SlideShare a Scribd company logo
Performance Implications of Mobile Design




Guy Podjarny
@guypod
guy@akamai.com
http://guypo.com/                       Akamai Confidential
Agenda

• Quick Intro to top Mobile Design Paradigms
• Review each Paradigm
 • Explain Key Implementation Points
 • Dig into top performance problem
 • Show what went wrong
 • Discuss how you can fix it
• Share tools that can help
 • And how to use them
• Summary


                           Faster ForwardTM    ©2012 Akamai
Who Am I #1: Ex-CTO of Blaze.io (now Akamai)




                           Faster ForwardTM    ©2012 Akamai
Who Am I #2: Blaze Mobitest

• Mobile Web Performance Measurement
 • Free Online Service: http://akamai.com/mobitest/
• Now Open-Source!
 • For more details: http://bit.ly/open-source-mobitest




                                   Faster ForwardTM       ©2012 Akamai
Who Am I #3: Mobile Performance Researcher

http://guypo.com/




                          Faster ForwardTM   ©2012 Akamai
Waterfall Charts
                             Resource             Doc Complete,
   Waterfall                 (Request/Response)   (a.k.a. onload,
   Chart           Start Render                   Load Time)




                            Faster ForwardTM              ©2012 Akamai
Quick Intro to Mobile Design




                           Akamai Confidential
Faster ForwardTM   ©2012 Akamai
Dedicated Sites (mdot)

             URL/Website Per Device Profile
 m.walmart.com                               www.walmart.com




                          Faster ForwardTM                     ©2012 Akamai
Why Dedicated Websites?


• Historical Reasons
 • More established and better understood
 • Hard to change existing desktop websites
 • Different owners inside/outside the company


• Better Reasons
 • Less sensitive to specific browsers
 • Helps align to native apps
 • Easier to get perfect site for that context (Maybe)



                              Faster ForwardTM           ©2012 Akamai
Responsive Web Design

          One URL, Adapt to screen size
                 www.bostonglobe.com




                        Faster ForwardTM   ©2012 Akamai
Mobile First & Desktop First: RWD Variations


                             Mobile First
                     (Progressive Enhancement)


    Desktop First
(Graceful Degradation)




                          Faster ForwardTM     ©2012 Akamai
Why Responsive Websites?

• Broader Device Support
 • Support the endless screen size permutations
 • No Need for User-Agent Mapping


• Easier to maintain
 • Maintain one website instead of multiples


• Future Friendly
 • Anticipates future devices
 • Better suited for handling new types of devices
 • http://futurefriend.ly/

                             Faster ForwardTM        ©2012 Akamai
Responsive Shades of Grey


• Responsiveness is a property of a website
 • A dedicated mobile website can be responsive
 • A website can respond “only a little bit”


• Display Size is not the only variable
 • Can respond to hardware properties (e.g. camera)
 • Can respond to data availability (e.g. location)


• Server-side code can help too (a.k.a. RESS)
 • Though responsiveness is primarily client-side

                            Faster ForwardTM          ©2012 Akamai
Dedicated Sites (mdot)




                         Akamai Confidential
Mdot



   Dedicated Sites don‟t
 create new performance
         problems
              Still have old problems,
       but that‟s not related to mobile design


                       Faster ForwardTM          ©2012 Akamai
Small Mobile Site, Small Waterfall Chart




m.cnn.com , iPhone 4, iOS 5.0
                            Faster ForwardTM   ©2012 Akamai
Big Desktop/Tablet Site, Big Waterfall Chart




              www.cnn.com
                iPad 2
                 iOS 5




                           Faster ForwardTM    ©2012 Akamai
Dedicated Sites Top Performance Problem


                 Redirects



   m.
                                            www.


                         Faster ForwardTM   ©2012 Akamai
Redirects are expensive!
www.espn.com
2 redirects, 1.3 seconds lost




                            Faster ForwardTM   ©2012 Akamai
User-Agent Detection FAIL


 Nexus S              XOOM                     iPad 2




                            Faster ForwardTM            ©2012 Akamai
Solution: Client-Side Detection




                           Faster ForwardTM   ©2012 Akamai
Late Redirect using scripts are even slower

www.disney.com
2 redirects + JS Redirect, 3 seconds lost




                             Faster ForwardTM   ©2012 Akamai
Could get nasty

www.garmin.com
3 redirects + JS Redirect, 3.6 seconds lost




                           Faster ForwardTM   ©2012 Akamai
Redirects – What To Do?

• Replace redirects with client-specific HTML
 • Your CDN/load-balancer can help!
• Minimize Redirects
 • Merge redirect chains
• Use HTTP Redirects, not JS redirects
 • Keep the client-side detection as backup
 • Detect most devices server-side
• Cache HTTP Redirects on the CDN
 • Makes the extra round trip shorter
• Use HTTP 301 Redirect, with a future Expiry
 • 302/303/307 redirects not cached by iOS and others


                                  Faster ForwardTM      ©2012 Akamai
Responsive Web Design




                        Akamai Confidential
RWD Implementation 101

• Fluid Design
 • Turn absolute sizes into relative sizes
• Breakpoints
 • Ethan Marcotte (@beep) / Stephen Hay @stephenhay:
   “Expand window until it looks like shit. Time to insert a breakpoint!”
• CSS Media Queries
 • Change CSS more significantly at breakpoints
 • Examples: Hide Columns, Collapse Menus, Remove bg imgs
• Using min/max width controls default view
 • Determines what non-conforming browsers will display


                                Faster ForwardTM                 ©2012 Akamai
Live

                          Demo



       Faster ForwardTM          ©2012 Akamai
Media Queries Example                 Mobile-First:
                                      Uses min-width




3 “versions”:                                2 Breakpoints:
Basic, Mobile, Desktop                       320px, 640px
                        Faster ForwardTM               ©2012 Akamai
RWD Implementation 201

• Extend support with scripted DOM manipulations
 • Not all browsers support media queries (e.g. IE 6-8)
 • Due to JS Support concerns, used mainly for enhancement
 • Often required for responding to features


• Beware: Widths are not accurate or consistent
 • Leave some buffer…


• Use EMs instead of PXs for absolute sizes
 • Better handling for zoom or font size differences


                             Faster ForwardTM           ©2012 Akamai
Responsive Web Design



 Responsive Web Design
    Top Performance
       Problem:
   Over-Downloading

                        Faster ForwardTM   ©2012 Akamai
Test – Compare Sites on Different Resolutions

• Data:
 • 347 Sites from http://mediaqueri.es/
• Testing Methodology:
 • Use http://webpagetest.org/
 • Use Chrome browser
 • Resize window before each measurement
  •Resolutions: 320x480, 480x960, 1024x768, 1600x1200
 • Saw similar results with iPhone vs. iPad tests
• Collect Results
 • Excel & Pivot Tables
(Automated version of Jason Grigsby‟s test last year)
                                                        ©
                                  Faster ForwardTM      ©2012 Akamai
Responsive Sites Load Times & Size, by Resolution

    Load Time* by Resolution (ms)
4,000
3,500
3,000
2,500
2,000
1,500
1,000
  500
    0
                                                        Page Size by Resolution (KB)
                                              1,200
                                              1,000
                                                800
                                                600
                                                400
                                                200
                                                  0




* Over Cable Speed
(5 Mbps down, 1 Mbps up, 28ms RTT)

                                     Faster ForwardTM                           ©2012 Akamai
Small Screen = Less Visible Content != Less Bytes




         320x48                              1600x120
         0                                   0




                          Faster ForwardTM              ©2012 Akamai
Some depressing stats…
                                                     Page size
                                            Smallest Screen (320x480)
             3%
     11%                                                vs.
                                            Biggest Screen (1600x1200)




                                                Roughly Same Size

                                                A Bit Smaller (50-90%)
                   86%
                                                Much Smaller (<50%)



                         Faster ForwardTM                           ©2012 Akamai
Big Site, Big Waterfall
                          1600x120
                          0




                          Faster ForwardTM   ©2012 Akamai
Small Site, Big Waterfall

                            320x480




                            Faster ForwardTM   ©2012 Akamai
Download and Hide

Rich Side-bar,
holds ads and more




                                         Display set to none


                      Faster ForwardTM                 ©2012 Akamai
Hidden content is still downloaded

                                              Display set to none,
                                              resources are still
                                              downloaded!

                                                        Hidden
                                                      background
                                                     Images are not!




                           Faster ForwardTM                   ©2012 Akamai
Download and Shrink


        Smaller Screen,
        Same Size Image




                      Faster ForwardTM   ©2012 Akamai
Media queries don‟t prevent CSS downloads

                                                         Separate CSS
                                                         per media


                                                basic.css
                                                mobile.css    320x480
“Right” CSS loaded

“Wrong” CSS loaded
- Possibly deferred to
  just before onload
   - WebKit Bug 39455
- Conditions may change
  (e.g. rotate device)
- Scripts may use it
                            Faster ForwardTM
                                               desktop.css      ©2012 Akamai
Excess DOM


1402 elements                 1398 elements
3485 nodes                    3491 nodes




                           Simplicity
                              not
                           reflected
                           in DOM

       1600x1200                              320x480
                   Faster ForwardTM                     ©2012 Akamai
RWD Woes




• Download and Hide
• Download and Shrink
• Extra CSS Download
• Excess DOM


                        Faster ForwardTM   ©2012 Akamai
What Can We Do About It?!




                            Akamai Confidential
Images accounts for most mobile pages size

Stats from http://mobile.httparchive.com/




                          Faster ForwardTM   ©2012 Akamai
Responsive Images


                                                                     128px,
                                                240px, 6.8 KB        2.9 KB
                          320px, 10.6 KB

         480px, 21.3 KB

Site:
lonelyplanet.com

Device:
iPhone 4

Before:                                       Full Res, 50.1 KB
867 KB

After:
570 KB
                           Faster ForwardTM                       ©2012 Akamai
Responding Up (or badly?)

                                                    ipad_hero.jpg
                                                     113 KB
                                                  Served to Desktop




 ipad_hero_2x.jpg
   360 KB
Served to New iPad



                               Faster ForwardTM             ©2012 Akamai
Standardizing Responsive Images

                         @srcset



                               VS.
                        <picture>




            https://github.com/scottjehl/picturefill
                           Faster ForwardTM            ©2012 Akamai
Responsive Images

• Responsive Images =
  Serve lower res images to smaller screens
 • Optionally load full res image in the background


• Lots of great resources on how to do it
 • Cloud Four blog - Education
 • Sencha.io Src – Free Server-Side Image Resizing
 • https://github.com/scottjehl/picturefill - Client-Side Selector


• Responsive images apply to CSS too!
 • Especially to background images
                              Faster ForwardTM                  ©2012 Akamai
Load Images via CSS




Full Details:
http://timkadlec.com/2012/04/media-query-asset-downloading-results/

                                 Faster ForwardTM                     ©2012 Akamai
Or load images via JavaScript




• Same loader can:
 • Apply responsive images
 • Load only visible images, including only above-the-fold images
• Interferes with speculative look-ahead parsing

                                   Faster ForwardTM                 ©2012 Akamai
Beyond Images - Build Mobile First


• Don‟t just design Mobile First – Code a Mobile-only site
 • Build only for the lowest resolution you care about
 • Adapt to similar screen sizes: No layout shifts, no big res jumps
 • Performance should compare to mdot sites
• Once implemented – Enhance via JavaScript
 • Grow DOM only on screens that need it.
• Desktop clients with no JS support are a minority
 • Your mobile site should be good enough for those
 • Don‟t sacrifice the performance of 99% for the remaining 1%



                             Faster ForwardTM               ©2012 Akamai
Enhancing via JavaScript – Tips & Tricks
                                                                          1600px
• Split your files by layout/resolution
                                                                 480
 • Duplicating content on the server is ok               320     px
 • Duplicating download is not                           px

• Use Inline JavaScript to decide the layout
 • Then use external (cacheable) files to apply it
 • document.write() all CSS files (and other links) in one inline script!
• Put scripts that change design at the top
 • JavaScript blocks rendering
 • Will avoid FOUC – Flash Of Unstyled Content
 • Put all other scripts at the bottom
       var css = „small.css‟;
       if (window.innerWidth > 640) css = „large.css‟;
       else if (window.innerWidth >= 320) css = „medium.css‟;
       document.write(„<link type=“stylesheet” rel=“stylesheet” href=“‟+css+‟”/>‟);
                                   Faster Forward
                                              TM
                                                                           ©2012 Akamai
Don‟t forget the “regular” concerns


• Reduce HTTP requests
 • Consolidate Files
 • Inline tiny files
• Reduce bytes
 • Minify CSS/JS
 • Use Lossless Compression for Images
• Load visible content first
 • Defer everything else
 • Or Load it on demand
• Avoid CSS Imports
•…
                            Faster ForwardTM   ©2012 Akamai
Now you can be Responsive AND Fast!




                         Faster ForwardTM   ©2012 Akamai
Measure!

     • Mobitest
      • Online service: http://mobitest.akamai.com/
      • Install local open-source version (details)
     • Google‟s Pcapperf
      • Convert network capture to waterfall charts
      • http://pcapperf.appspot.com/
     • Stoyan Stefanov‟s “icy”
      • HTTP insight into iOS HTTP requests
      • https://github.com/stoyan/icy
     • @firt‟s iWebInspector
      • Remote debugger for iOS simulator
      • http://www.iwebinspector.com/


56                                      Faster ForwardTM   ©2012 Akamai
Testing different screen dimensions

• Run webpagetest script with resizing
 • Use Chrome as agent (not supported on other browsers)
 • Sample script (tab delimited):
  setviewportsize 320 480
  navigate    http://bdconf.org/

 • Many other scripting
   options:https://sites.google.com/a/webpagetest.org/docs/using-
   webpagetest/scripting


• Figure out the viewport dimensions you want to simulate
 • http://www.websitedimensions.com/



                                   Faster ForwardTM                 ©2012 Akamai
Summary




          Akamai Confidential
Summary


• Choosing your mobile design is HARD
• There are many factors to consider
• Design Decision have Performance Implications
• Mdot Primary Concern: Redirects
• RWD Primary Concern: Over-Downloading
• Either design paradigm can be made fast
• Performance should be built in – not bolted on
• Measure!
• Make perf testing a part the core functionality test

                             Faster ForwardTM            ©2012 Akamai
Questions?
  Performance Implications of Mobile Design




Guy Podjarny
@guypod
guy@akamai.com
http://guypo.com/                       Akamai Confidential

More Related Content

What's hot

Faster web pages
Faster web pagesFaster web pages
Faster web pages
David Rodenas
 
Apache performance
Apache performanceApache performance
Apache performance
Devon Hillard
 
Seatwave Web Peformance Optimisation Case Study
Seatwave Web Peformance Optimisation Case StudySeatwave Web Peformance Optimisation Case Study
Seatwave Web Peformance Optimisation Case Study
Stephen Thair
 
Imagesandvideo stockholm webmeetup
Imagesandvideo stockholm webmeetupImagesandvideo stockholm webmeetup
Imagesandvideo stockholm webmeetup
Doug Sillars
 
10+апреля+лучшие+практики+и+инновации+вадим+береговский+akamai
10+апреля+лучшие+практики+и+инновации+вадим+береговский+akamai10+апреля+лучшие+практики+и+инновации+вадим+береговский+akamai
10+апреля+лучшие+практики+и+инновации+вадим+береговский+akamai
elenae00
 
Aptimize SharePoint Datasheet
Aptimize SharePoint DatasheetAptimize SharePoint Datasheet
Aptimize SharePoint Datasheet
Armand Sultantono
 
Imagesandvideo stockholm fastandbeautiful
Imagesandvideo stockholm fastandbeautifulImagesandvideo stockholm fastandbeautiful
Imagesandvideo stockholm fastandbeautiful
Doug Sillars
 
Cloud Performance: Guide to Tackling Cloud Latency [Cloud Connect - Chicago 2...
Cloud Performance: Guide to Tackling Cloud Latency [Cloud Connect - Chicago 2...Cloud Performance: Guide to Tackling Cloud Latency [Cloud Connect - Chicago 2...
Cloud Performance: Guide to Tackling Cloud Latency [Cloud Connect - Chicago 2...
Strangeloop
 
Vertically Challenged
Vertically ChallengedVertically Challenged
Vertically Challenged
Aurynn Shaw
 
Threadneedle when its just too slow
Threadneedle when its just too slowThreadneedle when its just too slow
Threadneedle when its just too slow
Doug Sillars
 
Comet and the Rise of Highly Interactive Websites
Comet and the Rise of Highly Interactive WebsitesComet and the Rise of Highly Interactive Websites
Comet and the Rise of Highly Interactive Websites
Joe Walker
 
High Performance Web - Full Stack Toronto
High Performance Web - Full Stack TorontoHigh Performance Web - Full Stack Toronto
High Performance Web - Full Stack Toronto
Maximiliano Firtman
 
Amazon Simple Work Flow Engine (SWF): How Beamr uses SWF for video optimizati...
Amazon Simple Work Flow Engine (SWF): How Beamr uses SWF for video optimizati...Amazon Simple Work Flow Engine (SWF): How Beamr uses SWF for video optimizati...
Amazon Simple Work Flow Engine (SWF): How Beamr uses SWF for video optimizati...
Amazon Web Services
 
Velocity 2013: Extreme Image Optimization
Velocity 2013: Extreme Image OptimizationVelocity 2013: Extreme Image Optimization
Velocity 2013: Extreme Image Optimization
Akamai Technologies
 
Testing Mobile App Performance MOT Edinburgh
Testing Mobile App Performance MOT EdinburghTesting Mobile App Performance MOT Edinburgh
Testing Mobile App Performance MOT Edinburgh
Doug Sillars
 
Mot cph when its just too slow
Mot cph when its just too slowMot cph when its just too slow
Mot cph when its just too slow
Doug Sillars
 
Show104 buried treasure
Show104 buried treasureShow104 buried treasure
Show104 buried treasure
Mark Myers
 
SHOW104 - Buried treasure: Finding the Hidden Gold in Lotus Notes Data
SHOW104 - Buried treasure: Finding the Hidden Gold in Lotus Notes DataSHOW104 - Buried treasure: Finding the Hidden Gold in Lotus Notes Data
SHOW104 - Buried treasure: Finding the Hidden Gold in Lotus Notes Data
panagenda
 

What's hot (18)

Faster web pages
Faster web pagesFaster web pages
Faster web pages
 
Apache performance
Apache performanceApache performance
Apache performance
 
Seatwave Web Peformance Optimisation Case Study
Seatwave Web Peformance Optimisation Case StudySeatwave Web Peformance Optimisation Case Study
Seatwave Web Peformance Optimisation Case Study
 
Imagesandvideo stockholm webmeetup
Imagesandvideo stockholm webmeetupImagesandvideo stockholm webmeetup
Imagesandvideo stockholm webmeetup
 
10+апреля+лучшие+практики+и+инновации+вадим+береговский+akamai
10+апреля+лучшие+практики+и+инновации+вадим+береговский+akamai10+апреля+лучшие+практики+и+инновации+вадим+береговский+akamai
10+апреля+лучшие+практики+и+инновации+вадим+береговский+akamai
 
Aptimize SharePoint Datasheet
Aptimize SharePoint DatasheetAptimize SharePoint Datasheet
Aptimize SharePoint Datasheet
 
Imagesandvideo stockholm fastandbeautiful
Imagesandvideo stockholm fastandbeautifulImagesandvideo stockholm fastandbeautiful
Imagesandvideo stockholm fastandbeautiful
 
Cloud Performance: Guide to Tackling Cloud Latency [Cloud Connect - Chicago 2...
Cloud Performance: Guide to Tackling Cloud Latency [Cloud Connect - Chicago 2...Cloud Performance: Guide to Tackling Cloud Latency [Cloud Connect - Chicago 2...
Cloud Performance: Guide to Tackling Cloud Latency [Cloud Connect - Chicago 2...
 
Vertically Challenged
Vertically ChallengedVertically Challenged
Vertically Challenged
 
Threadneedle when its just too slow
Threadneedle when its just too slowThreadneedle when its just too slow
Threadneedle when its just too slow
 
Comet and the Rise of Highly Interactive Websites
Comet and the Rise of Highly Interactive WebsitesComet and the Rise of Highly Interactive Websites
Comet and the Rise of Highly Interactive Websites
 
High Performance Web - Full Stack Toronto
High Performance Web - Full Stack TorontoHigh Performance Web - Full Stack Toronto
High Performance Web - Full Stack Toronto
 
Amazon Simple Work Flow Engine (SWF): How Beamr uses SWF for video optimizati...
Amazon Simple Work Flow Engine (SWF): How Beamr uses SWF for video optimizati...Amazon Simple Work Flow Engine (SWF): How Beamr uses SWF for video optimizati...
Amazon Simple Work Flow Engine (SWF): How Beamr uses SWF for video optimizati...
 
Velocity 2013: Extreme Image Optimization
Velocity 2013: Extreme Image OptimizationVelocity 2013: Extreme Image Optimization
Velocity 2013: Extreme Image Optimization
 
Testing Mobile App Performance MOT Edinburgh
Testing Mobile App Performance MOT EdinburghTesting Mobile App Performance MOT Edinburgh
Testing Mobile App Performance MOT Edinburgh
 
Mot cph when its just too slow
Mot cph when its just too slowMot cph when its just too slow
Mot cph when its just too slow
 
Show104 buried treasure
Show104 buried treasureShow104 buried treasure
Show104 buried treasure
 
SHOW104 - Buried treasure: Finding the Hidden Gold in Lotus Notes Data
SHOW104 - Buried treasure: Finding the Hidden Gold in Lotus Notes DataSHOW104 - Buried treasure: Finding the Hidden Gold in Lotus Notes Data
SHOW104 - Buried treasure: Finding the Hidden Gold in Lotus Notes Data
 

Viewers also liked

HTML5 for web app. development
HTML5 for web app. developmentHTML5 for web app. development
HTML5 for web app. development
SangJin Kang
 
Akamai 서비스 트러블 슈팅 및 테스트 방법과 도구
Akamai 서비스 트러블 슈팅 및 테스트 방법과 도구Akamai 서비스 트러블 슈팅 및 테스트 방법과 도구
Akamai 서비스 트러블 슈팅 및 테스트 방법과 도구
SangJin Kang
 
Akamai Korea - Tech Day (2015/03/11) DNS
Akamai Korea - Tech Day (2015/03/11) DNSAkamai Korea - Tech Day (2015/03/11) DNS
Akamai Korea - Tech Day (2015/03/11) DNS
SangJin Kang
 
Akamai Korea - Tech Day (2015/03/11) HTTP/2
Akamai Korea - Tech Day (2015/03/11) HTTP/2Akamai Korea - Tech Day (2015/03/11) HTTP/2
Akamai Korea - Tech Day (2015/03/11) HTTP/2
SangJin Kang
 
презентация1
презентация1презентация1
презентация1
KirillPavlov
 
Donar vida.
Donar vida.Donar vida.
Donar vida.
José María
 
JavaScript performance patterns
JavaScript performance patternsJavaScript performance patterns
JavaScript performance patterns
Stoyan Stefanov
 
Leveraging Social Media Marketing Trends
Leveraging Social Media Marketing TrendsLeveraging Social Media Marketing Trends
Leveraging Social Media Marketing Trends
Erica Campbell Byrum
 
Hanckemaborg Zuidhorn
Hanckemaborg ZuidhornHanckemaborg Zuidhorn
REDtone IoT and Unified Inbox partner to integrate IoT devices with Social Media
REDtone IoT and Unified Inbox partner to integrate IoT devices with Social MediaREDtone IoT and Unified Inbox partner to integrate IoT devices with Social Media
REDtone IoT and Unified Inbox partner to integrate IoT devices with Social Media
Dr. Mazlan Abbas
 
Mapa conceptual 2 de alejandra alvarez
Mapa conceptual 2 de alejandra alvarezMapa conceptual 2 de alejandra alvarez
Mapa conceptual 2 de alejandra alvarez
LaChicaHolix99
 
Gptw conference 14_oct2011-hyderabad_final
Gptw conference 14_oct2011-hyderabad_finalGptw conference 14_oct2011-hyderabad_final
Gptw conference 14_oct2011-hyderabad_final
Best Workplaces Conference
 
28704893 sixth-sense-final-ppt
28704893 sixth-sense-final-ppt28704893 sixth-sense-final-ppt
28704893 sixth-sense-final-ppt
vignan university
 
Water security for Delhi: a case study of government projects
Water security for Delhi: a case study of government projectsWater security for Delhi: a case study of government projects
Water security for Delhi: a case study of government projects
Anupam Saraph
 
Tnooz-Expedia FREE webinar: Impact of multi-screens on the travel purchase path
Tnooz-Expedia FREE webinar: Impact of multi-screens on the travel purchase pathTnooz-Expedia FREE webinar: Impact of multi-screens on the travel purchase path
Tnooz-Expedia FREE webinar: Impact of multi-screens on the travel purchase path
tnooz
 
10 Office Holiday Party Rules
10 Office Holiday Party Rules10 Office Holiday Party Rules
10 Office Holiday Party Rules
Robert Half
 
16 00361 beslut
16 00361 beslut16 00361 beslut
16 00361 beslut
Johan Westerholm
 
A project report on construction of balanced portfolio comprising of equity a...
A project report on construction of balanced portfolio comprising of equity a...A project report on construction of balanced portfolio comprising of equity a...
A project report on construction of balanced portfolio comprising of equity a...
Babasab Patil
 
A project report on consumer attitude towards branded accessories with specif...
A project report on consumer attitude towards branded accessories with specif...A project report on consumer attitude towards branded accessories with specif...
A project report on consumer attitude towards branded accessories with specif...
Babasab Patil
 
HTTP/2와 웹 성능 최적화 방안
HTTP/2와 웹 성능 최적화 방안HTTP/2와 웹 성능 최적화 방안
HTTP/2와 웹 성능 최적화 방안
SangJin Kang
 

Viewers also liked (20)

HTML5 for web app. development
HTML5 for web app. developmentHTML5 for web app. development
HTML5 for web app. development
 
Akamai 서비스 트러블 슈팅 및 테스트 방법과 도구
Akamai 서비스 트러블 슈팅 및 테스트 방법과 도구Akamai 서비스 트러블 슈팅 및 테스트 방법과 도구
Akamai 서비스 트러블 슈팅 및 테스트 방법과 도구
 
Akamai Korea - Tech Day (2015/03/11) DNS
Akamai Korea - Tech Day (2015/03/11) DNSAkamai Korea - Tech Day (2015/03/11) DNS
Akamai Korea - Tech Day (2015/03/11) DNS
 
Akamai Korea - Tech Day (2015/03/11) HTTP/2
Akamai Korea - Tech Day (2015/03/11) HTTP/2Akamai Korea - Tech Day (2015/03/11) HTTP/2
Akamai Korea - Tech Day (2015/03/11) HTTP/2
 
презентация1
презентация1презентация1
презентация1
 
Donar vida.
Donar vida.Donar vida.
Donar vida.
 
JavaScript performance patterns
JavaScript performance patternsJavaScript performance patterns
JavaScript performance patterns
 
Leveraging Social Media Marketing Trends
Leveraging Social Media Marketing TrendsLeveraging Social Media Marketing Trends
Leveraging Social Media Marketing Trends
 
Hanckemaborg Zuidhorn
Hanckemaborg ZuidhornHanckemaborg Zuidhorn
Hanckemaborg Zuidhorn
 
REDtone IoT and Unified Inbox partner to integrate IoT devices with Social Media
REDtone IoT and Unified Inbox partner to integrate IoT devices with Social MediaREDtone IoT and Unified Inbox partner to integrate IoT devices with Social Media
REDtone IoT and Unified Inbox partner to integrate IoT devices with Social Media
 
Mapa conceptual 2 de alejandra alvarez
Mapa conceptual 2 de alejandra alvarezMapa conceptual 2 de alejandra alvarez
Mapa conceptual 2 de alejandra alvarez
 
Gptw conference 14_oct2011-hyderabad_final
Gptw conference 14_oct2011-hyderabad_finalGptw conference 14_oct2011-hyderabad_final
Gptw conference 14_oct2011-hyderabad_final
 
28704893 sixth-sense-final-ppt
28704893 sixth-sense-final-ppt28704893 sixth-sense-final-ppt
28704893 sixth-sense-final-ppt
 
Water security for Delhi: a case study of government projects
Water security for Delhi: a case study of government projectsWater security for Delhi: a case study of government projects
Water security for Delhi: a case study of government projects
 
Tnooz-Expedia FREE webinar: Impact of multi-screens on the travel purchase path
Tnooz-Expedia FREE webinar: Impact of multi-screens on the travel purchase pathTnooz-Expedia FREE webinar: Impact of multi-screens on the travel purchase path
Tnooz-Expedia FREE webinar: Impact of multi-screens on the travel purchase path
 
10 Office Holiday Party Rules
10 Office Holiday Party Rules10 Office Holiday Party Rules
10 Office Holiday Party Rules
 
16 00361 beslut
16 00361 beslut16 00361 beslut
16 00361 beslut
 
A project report on construction of balanced portfolio comprising of equity a...
A project report on construction of balanced portfolio comprising of equity a...A project report on construction of balanced portfolio comprising of equity a...
A project report on construction of balanced portfolio comprising of equity a...
 
A project report on consumer attitude towards branded accessories with specif...
A project report on consumer attitude towards branded accessories with specif...A project report on consumer attitude towards branded accessories with specif...
A project report on consumer attitude towards branded accessories with specif...
 
HTTP/2와 웹 성능 최적화 방안
HTTP/2와 웹 성능 최적화 방안HTTP/2와 웹 성능 최적화 방안
HTTP/2와 웹 성능 최적화 방안
 

Similar to Performance Implications of Mobile Design (Perf Audience Edition)

Step by Step Mobile Optimization
Step by Step Mobile OptimizationStep by Step Mobile Optimization
Step by Step Mobile Optimization
Guy Podjarny
 
Akamai 如何幫您的客戶用網站賺錢 how to monetize your site
Akamai 如何幫您的客戶用網站賺錢 how to monetize your siteAkamai 如何幫您的客戶用網站賺錢 how to monetize your site
Akamai 如何幫您的客戶用網站賺錢 how to monetize your site
零壹科技股份有限公司
 
Chicago Tech Day Jan 2015: RWD
Chicago Tech Day Jan 2015: RWDChicago Tech Day Jan 2015: RWD
Chicago Tech Day Jan 2015: RWD
Akamai Technologies
 
Boston Web Performance Meetup: The Render Chain and You
Boston Web Performance Meetup: The Render Chain and YouBoston Web Performance Meetup: The Render Chain and You
Boston Web Performance Meetup: The Render Chain and You
mattringel
 
Etail West 2013 Akamai CEO Tom Leighton_Final
Etail West 2013 Akamai CEO Tom Leighton_FinalEtail West 2013 Akamai CEO Tom Leighton_Final
Etail West 2013 Akamai CEO Tom Leighton_Final
Liz Bradley
 
Akamai connector for varnish
Akamai connector for varnishAkamai connector for varnish
Akamai connector for varnish
Varnish Software
 
TL;DR Web Performance Workshop
TL;DR Web Performance WorkshopTL;DR Web Performance Workshop
TL;DR Web Performance Workshop
Gareth Hughes
 
eTail Keynote from Akamai CEO Tom Leighton
eTail Keynote from Akamai CEO Tom LeightoneTail Keynote from Akamai CEO Tom Leighton
eTail Keynote from Akamai CEO Tom Leighton
Akamai Technologies
 
Assessing Your Own Site Configuration
Assessing Your Own Site ConfigurationAssessing Your Own Site Configuration
Assessing Your Own Site Configuration
Akamai Developers & Admins
 
Responsive Web Demo with Akamai
Responsive Web Demo with AkamaiResponsive Web Demo with Akamai
Responsive Web Demo with Akamai
Fran Albaladejo
 
Tom uk soti_final_without video.4.21.15
Tom uk soti_final_without video.4.21.15Tom uk soti_final_without video.4.21.15
Tom uk soti_final_without video.4.21.15
Liz Bradley
 
Akamai: From Theory to Practice
Akamai: From Theory to PracticeAkamai: From Theory to Practice
Akamai: From Theory to Practice
Liz Bradley
 
Akamai internet insights
Akamai internet insightsAkamai internet insights
Akamai internet insights
Justin Dorfman
 
Akamai partner training by Malcolm Rowe
Akamai partner training by Malcolm RoweAkamai partner training by Malcolm Rowe
Akamai partner training by Malcolm Rowe
零壹科技股份有限公司
 
10+апреля+лучшие+практики+и+инновации+вадим+береговский+akamai
10+апреля+лучшие+практики+и+инновации+вадим+береговский+akamai10+апреля+лучшие+практики+и+инновации+вадим+береговский+akamai
10+апреля+лучшие+практики+и+инновации+вадим+береговский+akamai
elenae00
 
AWS Webinar - Intro to Amazon Cloudfront 13-09-17
AWS Webinar -  Intro to Amazon Cloudfront 13-09-17AWS Webinar -  Intro to Amazon Cloudfront 13-09-17
AWS Webinar - Intro to Amazon Cloudfront 13-09-17
Amazon Web Services
 
Holiday Retail Readiness: Preparing For Peak
Holiday Retail Readiness: Preparing For PeakHoliday Retail Readiness: Preparing For Peak
Holiday Retail Readiness: Preparing For Peak
G3 Communications
 
Responsive In The Wild, 2014
Responsive In The Wild, 2014Responsive In The Wild, 2014
Responsive In The Wild, 2014
Guy Podjarny
 
Future of CDN - Next 10 Years - Ahmet Ozalp, Akamai Technologies - DigiWorld ...
Future of CDN - Next 10 Years - Ahmet Ozalp, Akamai Technologies - DigiWorld ...Future of CDN - Next 10 Years - Ahmet Ozalp, Akamai Technologies - DigiWorld ...
Future of CDN - Next 10 Years - Ahmet Ozalp, Akamai Technologies - DigiWorld ...
IDATE DigiWorld
 
Modern Web Applications
Modern Web ApplicationsModern Web Applications
Modern Web Applications
Ömer Göktuğ Poyraz
 

Similar to Performance Implications of Mobile Design (Perf Audience Edition) (20)

Step by Step Mobile Optimization
Step by Step Mobile OptimizationStep by Step Mobile Optimization
Step by Step Mobile Optimization
 
Akamai 如何幫您的客戶用網站賺錢 how to monetize your site
Akamai 如何幫您的客戶用網站賺錢 how to monetize your siteAkamai 如何幫您的客戶用網站賺錢 how to monetize your site
Akamai 如何幫您的客戶用網站賺錢 how to monetize your site
 
Chicago Tech Day Jan 2015: RWD
Chicago Tech Day Jan 2015: RWDChicago Tech Day Jan 2015: RWD
Chicago Tech Day Jan 2015: RWD
 
Boston Web Performance Meetup: The Render Chain and You
Boston Web Performance Meetup: The Render Chain and YouBoston Web Performance Meetup: The Render Chain and You
Boston Web Performance Meetup: The Render Chain and You
 
Etail West 2013 Akamai CEO Tom Leighton_Final
Etail West 2013 Akamai CEO Tom Leighton_FinalEtail West 2013 Akamai CEO Tom Leighton_Final
Etail West 2013 Akamai CEO Tom Leighton_Final
 
Akamai connector for varnish
Akamai connector for varnishAkamai connector for varnish
Akamai connector for varnish
 
TL;DR Web Performance Workshop
TL;DR Web Performance WorkshopTL;DR Web Performance Workshop
TL;DR Web Performance Workshop
 
eTail Keynote from Akamai CEO Tom Leighton
eTail Keynote from Akamai CEO Tom LeightoneTail Keynote from Akamai CEO Tom Leighton
eTail Keynote from Akamai CEO Tom Leighton
 
Assessing Your Own Site Configuration
Assessing Your Own Site ConfigurationAssessing Your Own Site Configuration
Assessing Your Own Site Configuration
 
Responsive Web Demo with Akamai
Responsive Web Demo with AkamaiResponsive Web Demo with Akamai
Responsive Web Demo with Akamai
 
Tom uk soti_final_without video.4.21.15
Tom uk soti_final_without video.4.21.15Tom uk soti_final_without video.4.21.15
Tom uk soti_final_without video.4.21.15
 
Akamai: From Theory to Practice
Akamai: From Theory to PracticeAkamai: From Theory to Practice
Akamai: From Theory to Practice
 
Akamai internet insights
Akamai internet insightsAkamai internet insights
Akamai internet insights
 
Akamai partner training by Malcolm Rowe
Akamai partner training by Malcolm RoweAkamai partner training by Malcolm Rowe
Akamai partner training by Malcolm Rowe
 
10+апреля+лучшие+практики+и+инновации+вадим+береговский+akamai
10+апреля+лучшие+практики+и+инновации+вадим+береговский+akamai10+апреля+лучшие+практики+и+инновации+вадим+береговский+akamai
10+апреля+лучшие+практики+и+инновации+вадим+береговский+akamai
 
AWS Webinar - Intro to Amazon Cloudfront 13-09-17
AWS Webinar -  Intro to Amazon Cloudfront 13-09-17AWS Webinar -  Intro to Amazon Cloudfront 13-09-17
AWS Webinar - Intro to Amazon Cloudfront 13-09-17
 
Holiday Retail Readiness: Preparing For Peak
Holiday Retail Readiness: Preparing For PeakHoliday Retail Readiness: Preparing For Peak
Holiday Retail Readiness: Preparing For Peak
 
Responsive In The Wild, 2014
Responsive In The Wild, 2014Responsive In The Wild, 2014
Responsive In The Wild, 2014
 
Future of CDN - Next 10 Years - Ahmet Ozalp, Akamai Technologies - DigiWorld ...
Future of CDN - Next 10 Years - Ahmet Ozalp, Akamai Technologies - DigiWorld ...Future of CDN - Next 10 Years - Ahmet Ozalp, Akamai Technologies - DigiWorld ...
Future of CDN - Next 10 Years - Ahmet Ozalp, Akamai Technologies - DigiWorld ...
 
Modern Web Applications
Modern Web ApplicationsModern Web Applications
Modern Web Applications
 

More from Guy Podjarny

Serverless Security: What's Left To Protect
Serverless Security: What's Left To ProtectServerless Security: What's Left To Protect
Serverless Security: What's Left To Protect
Guy Podjarny
 
Securing Serverless - By Breaking In
Securing Serverless - By Breaking InSecuring Serverless - By Breaking In
Securing Serverless - By Breaking In
Guy Podjarny
 
Serverless Security: What's Left to Protect?
Serverless Security: What's Left to Protect?Serverless Security: What's Left to Protect?
Serverless Security: What's Left to Protect?
Guy Podjarny
 
Secure Node Code (workshop, O'Reilly Security)
Secure Node Code (workshop, O'Reilly Security)Secure Node Code (workshop, O'Reilly Security)
Secure Node Code (workshop, O'Reilly Security)
Guy Podjarny
 
Stranger Danger (NodeSummit, 2016)
Stranger Danger (NodeSummit, 2016)Stranger Danger (NodeSummit, 2016)
Stranger Danger (NodeSummit, 2016)
Guy Podjarny
 
Stranger Danger: Securing Third Party Components (Tech2020)
Stranger Danger: Securing Third Party Components (Tech2020)Stranger Danger: Securing Third Party Components (Tech2020)
Stranger Danger: Securing Third Party Components (Tech2020)
Guy Podjarny
 
High Performance Images: Beautiful Shouldn't Mean Slow (Velocity EU 2015)
High Performance Images: Beautiful Shouldn't Mean Slow (Velocity EU 2015)High Performance Images: Beautiful Shouldn't Mean Slow (Velocity EU 2015)
High Performance Images: Beautiful Shouldn't Mean Slow (Velocity EU 2015)
Guy Podjarny
 
HTTPS: What, Why and How (SmashingConf Freiburg, Sep 2015)
HTTPS: What, Why and How (SmashingConf Freiburg, Sep 2015)HTTPS: What, Why and How (SmashingConf Freiburg, Sep 2015)
HTTPS: What, Why and How (SmashingConf Freiburg, Sep 2015)
Guy Podjarny
 
High Performance Images: Beautiful Shouldn't Mean Slow
High Performance Images: Beautiful Shouldn't Mean SlowHigh Performance Images: Beautiful Shouldn't Mean Slow
High Performance Images: Beautiful Shouldn't Mean Slow
Guy Podjarny
 
Third Party Performance (Velocity, 2014)
Third Party Performance (Velocity, 2014)Third Party Performance (Velocity, 2014)
Third Party Performance (Velocity, 2014)
Guy Podjarny
 
Rules driven-delivery
Rules driven-deliveryRules driven-delivery
Rules driven-delivery
Guy Podjarny
 
Responsive In The Wild (SmashingConf, 2014)
Responsive In The Wild (SmashingConf, 2014)Responsive In The Wild (SmashingConf, 2014)
Responsive In The Wild (SmashingConf, 2014)
Guy Podjarny
 
Putting Your Images on a Diet (SmashingConf, 2014)
Putting Your Images on a Diet (SmashingConf, 2014)Putting Your Images on a Diet (SmashingConf, 2014)
Putting Your Images on a Diet (SmashingConf, 2014)
Guy Podjarny
 
Third party-performance (Airbnb Nerds, Nov 2013)
Third party-performance (Airbnb Nerds, Nov 2013)Third party-performance (Airbnb Nerds, Nov 2013)
Third party-performance (Airbnb Nerds, Nov 2013)
Guy Podjarny
 
Third Party Performance
Third Party PerformanceThird Party Performance
Third Party Performance
Guy Podjarny
 
A Picture Costs A Thousand Words
A Picture Costs A Thousand WordsA Picture Costs A Thousand Words
A Picture Costs A Thousand Words
Guy Podjarny
 
Unravelling Mobile Web Performance
Unravelling Mobile Web PerformanceUnravelling Mobile Web Performance
Unravelling Mobile Web Performance
Guy Podjarny
 
State Of Mobile Web Performance
State Of Mobile Web PerformanceState Of Mobile Web Performance
State Of Mobile Web Performance
Guy Podjarny
 

More from Guy Podjarny (18)

Serverless Security: What's Left To Protect
Serverless Security: What's Left To ProtectServerless Security: What's Left To Protect
Serverless Security: What's Left To Protect
 
Securing Serverless - By Breaking In
Securing Serverless - By Breaking InSecuring Serverless - By Breaking In
Securing Serverless - By Breaking In
 
Serverless Security: What's Left to Protect?
Serverless Security: What's Left to Protect?Serverless Security: What's Left to Protect?
Serverless Security: What's Left to Protect?
 
Secure Node Code (workshop, O'Reilly Security)
Secure Node Code (workshop, O'Reilly Security)Secure Node Code (workshop, O'Reilly Security)
Secure Node Code (workshop, O'Reilly Security)
 
Stranger Danger (NodeSummit, 2016)
Stranger Danger (NodeSummit, 2016)Stranger Danger (NodeSummit, 2016)
Stranger Danger (NodeSummit, 2016)
 
Stranger Danger: Securing Third Party Components (Tech2020)
Stranger Danger: Securing Third Party Components (Tech2020)Stranger Danger: Securing Third Party Components (Tech2020)
Stranger Danger: Securing Third Party Components (Tech2020)
 
High Performance Images: Beautiful Shouldn't Mean Slow (Velocity EU 2015)
High Performance Images: Beautiful Shouldn't Mean Slow (Velocity EU 2015)High Performance Images: Beautiful Shouldn't Mean Slow (Velocity EU 2015)
High Performance Images: Beautiful Shouldn't Mean Slow (Velocity EU 2015)
 
HTTPS: What, Why and How (SmashingConf Freiburg, Sep 2015)
HTTPS: What, Why and How (SmashingConf Freiburg, Sep 2015)HTTPS: What, Why and How (SmashingConf Freiburg, Sep 2015)
HTTPS: What, Why and How (SmashingConf Freiburg, Sep 2015)
 
High Performance Images: Beautiful Shouldn't Mean Slow
High Performance Images: Beautiful Shouldn't Mean SlowHigh Performance Images: Beautiful Shouldn't Mean Slow
High Performance Images: Beautiful Shouldn't Mean Slow
 
Third Party Performance (Velocity, 2014)
Third Party Performance (Velocity, 2014)Third Party Performance (Velocity, 2014)
Third Party Performance (Velocity, 2014)
 
Rules driven-delivery
Rules driven-deliveryRules driven-delivery
Rules driven-delivery
 
Responsive In The Wild (SmashingConf, 2014)
Responsive In The Wild (SmashingConf, 2014)Responsive In The Wild (SmashingConf, 2014)
Responsive In The Wild (SmashingConf, 2014)
 
Putting Your Images on a Diet (SmashingConf, 2014)
Putting Your Images on a Diet (SmashingConf, 2014)Putting Your Images on a Diet (SmashingConf, 2014)
Putting Your Images on a Diet (SmashingConf, 2014)
 
Third party-performance (Airbnb Nerds, Nov 2013)
Third party-performance (Airbnb Nerds, Nov 2013)Third party-performance (Airbnb Nerds, Nov 2013)
Third party-performance (Airbnb Nerds, Nov 2013)
 
Third Party Performance
Third Party PerformanceThird Party Performance
Third Party Performance
 
A Picture Costs A Thousand Words
A Picture Costs A Thousand WordsA Picture Costs A Thousand Words
A Picture Costs A Thousand Words
 
Unravelling Mobile Web Performance
Unravelling Mobile Web PerformanceUnravelling Mobile Web Performance
Unravelling Mobile Web Performance
 
State Of Mobile Web Performance
State Of Mobile Web PerformanceState Of Mobile Web Performance
State Of Mobile Web Performance
 

Recently uploaded

Vertex AI Agent Builder - GDG Alicante - Julio 2024
Vertex AI Agent Builder - GDG Alicante - Julio 2024Vertex AI Agent Builder - GDG Alicante - Julio 2024
Vertex AI Agent Builder - GDG Alicante - Julio 2024
Nicolás Lopéz
 
Integrating Kafka with MuleSoft 4 and usecase
Integrating Kafka with MuleSoft 4 and usecaseIntegrating Kafka with MuleSoft 4 and usecase
Integrating Kafka with MuleSoft 4 and usecase
shyamraj55
 
Russian Girls Call Navi Mumbai 🎈🔥9920725232 🔥💋🎈 Provide Best And Top Girl Ser...
Russian Girls Call Navi Mumbai 🎈🔥9920725232 🔥💋🎈 Provide Best And Top Girl Ser...Russian Girls Call Navi Mumbai 🎈🔥9920725232 🔥💋🎈 Provide Best And Top Girl Ser...
Russian Girls Call Navi Mumbai 🎈🔥9920725232 🔥💋🎈 Provide Best And Top Girl Ser...
bellared2
 
Discovery Series - Zero to Hero - Task Mining Session 1
Discovery Series - Zero to Hero - Task Mining Session 1Discovery Series - Zero to Hero - Task Mining Session 1
Discovery Series - Zero to Hero - Task Mining Session 1
DianaGray10
 
UX Webinar Series: Drive Revenue and Decrease Costs with Passkeys for Consume...
UX Webinar Series: Drive Revenue and Decrease Costs with Passkeys for Consume...UX Webinar Series: Drive Revenue and Decrease Costs with Passkeys for Consume...
UX Webinar Series: Drive Revenue and Decrease Costs with Passkeys for Consume...
FIDO Alliance
 
kk vathada _digital transformation frameworks_2024.pdf
kk vathada _digital transformation frameworks_2024.pdfkk vathada _digital transformation frameworks_2024.pdf
kk vathada _digital transformation frameworks_2024.pdf
KIRAN KV
 
Retrieval Augmented Generation Evaluation with Ragas
Retrieval Augmented Generation Evaluation with RagasRetrieval Augmented Generation Evaluation with Ragas
Retrieval Augmented Generation Evaluation with Ragas
Zilliz
 
BLOCKCHAIN TECHNOLOGY - Advantages and Disadvantages
BLOCKCHAIN TECHNOLOGY - Advantages and DisadvantagesBLOCKCHAIN TECHNOLOGY - Advantages and Disadvantages
BLOCKCHAIN TECHNOLOGY - Advantages and Disadvantages
SAI KAILASH R
 
COVID-19 and the Level of Cloud Computing Adoption: A Study of Sri Lankan Inf...
COVID-19 and the Level of Cloud Computing Adoption: A Study of Sri Lankan Inf...COVID-19 and the Level of Cloud Computing Adoption: A Study of Sri Lankan Inf...
COVID-19 and the Level of Cloud Computing Adoption: A Study of Sri Lankan Inf...
AimanAthambawa1
 
Uncharted Together- Navigating AI's New Frontiers in Libraries
Uncharted Together- Navigating AI's New Frontiers in LibrariesUncharted Together- Navigating AI's New Frontiers in Libraries
Uncharted Together- Navigating AI's New Frontiers in Libraries
Brian Pichman
 
Sonkoloniya documentation - ONEprojukti.pdf
Sonkoloniya documentation - ONEprojukti.pdfSonkoloniya documentation - ONEprojukti.pdf
Sonkoloniya documentation - ONEprojukti.pdf
SubhamMandal40
 
Mastering OnlyFans Clone App Development: Key Strategies for Success
Mastering OnlyFans Clone App Development: Key Strategies for SuccessMastering OnlyFans Clone App Development: Key Strategies for Success
Mastering OnlyFans Clone App Development: Key Strategies for Success
David Wilson
 
Mule Experience Hub and Release Channel with Java 17
Mule Experience Hub and Release Channel with Java 17Mule Experience Hub and Release Channel with Java 17
Mule Experience Hub and Release Channel with Java 17
Bhajan Mehta
 
Opencast Summit 2024 — Opencast @ University of Münster
Opencast Summit 2024 — Opencast @ University of MünsterOpencast Summit 2024 — Opencast @ University of Münster
Opencast Summit 2024 — Opencast @ University of Münster
Matthias Neugebauer
 
The History of Embeddings & Multimodal Embeddings
The History of Embeddings & Multimodal EmbeddingsThe History of Embeddings & Multimodal Embeddings
The History of Embeddings & Multimodal Embeddings
Zilliz
 
Improving Learning Content Efficiency with Reusable Learning Content
Improving Learning Content Efficiency with Reusable Learning ContentImproving Learning Content Efficiency with Reusable Learning Content
Improving Learning Content Efficiency with Reusable Learning Content
Enterprise Knowledge
 
Intel Unveils Core Ultra 200V Lunar chip .pdf
Intel Unveils Core Ultra 200V Lunar chip .pdfIntel Unveils Core Ultra 200V Lunar chip .pdf
Intel Unveils Core Ultra 200V Lunar chip .pdf
Tech Guru
 
leewayhertz.com-Generative AI tech stack Frameworks infrastructure models and...
leewayhertz.com-Generative AI tech stack Frameworks infrastructure models and...leewayhertz.com-Generative AI tech stack Frameworks infrastructure models and...
leewayhertz.com-Generative AI tech stack Frameworks infrastructure models and...
alexjohnson7307
 
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
sunilverma7884
 
LeadMagnet IQ Review: Unlock the Secret to Effortless Traffic and Leads.pdf
LeadMagnet IQ Review:  Unlock the Secret to Effortless Traffic and Leads.pdfLeadMagnet IQ Review:  Unlock the Secret to Effortless Traffic and Leads.pdf
LeadMagnet IQ Review: Unlock the Secret to Effortless Traffic and Leads.pdf
SelfMade bd
 

Recently uploaded (20)

Vertex AI Agent Builder - GDG Alicante - Julio 2024
Vertex AI Agent Builder - GDG Alicante - Julio 2024Vertex AI Agent Builder - GDG Alicante - Julio 2024
Vertex AI Agent Builder - GDG Alicante - Julio 2024
 
Integrating Kafka with MuleSoft 4 and usecase
Integrating Kafka with MuleSoft 4 and usecaseIntegrating Kafka with MuleSoft 4 and usecase
Integrating Kafka with MuleSoft 4 and usecase
 
Russian Girls Call Navi Mumbai 🎈🔥9920725232 🔥💋🎈 Provide Best And Top Girl Ser...
Russian Girls Call Navi Mumbai 🎈🔥9920725232 🔥💋🎈 Provide Best And Top Girl Ser...Russian Girls Call Navi Mumbai 🎈🔥9920725232 🔥💋🎈 Provide Best And Top Girl Ser...
Russian Girls Call Navi Mumbai 🎈🔥9920725232 🔥💋🎈 Provide Best And Top Girl Ser...
 
Discovery Series - Zero to Hero - Task Mining Session 1
Discovery Series - Zero to Hero - Task Mining Session 1Discovery Series - Zero to Hero - Task Mining Session 1
Discovery Series - Zero to Hero - Task Mining Session 1
 
UX Webinar Series: Drive Revenue and Decrease Costs with Passkeys for Consume...
UX Webinar Series: Drive Revenue and Decrease Costs with Passkeys for Consume...UX Webinar Series: Drive Revenue and Decrease Costs with Passkeys for Consume...
UX Webinar Series: Drive Revenue and Decrease Costs with Passkeys for Consume...
 
kk vathada _digital transformation frameworks_2024.pdf
kk vathada _digital transformation frameworks_2024.pdfkk vathada _digital transformation frameworks_2024.pdf
kk vathada _digital transformation frameworks_2024.pdf
 
Retrieval Augmented Generation Evaluation with Ragas
Retrieval Augmented Generation Evaluation with RagasRetrieval Augmented Generation Evaluation with Ragas
Retrieval Augmented Generation Evaluation with Ragas
 
BLOCKCHAIN TECHNOLOGY - Advantages and Disadvantages
BLOCKCHAIN TECHNOLOGY - Advantages and DisadvantagesBLOCKCHAIN TECHNOLOGY - Advantages and Disadvantages
BLOCKCHAIN TECHNOLOGY - Advantages and Disadvantages
 
COVID-19 and the Level of Cloud Computing Adoption: A Study of Sri Lankan Inf...
COVID-19 and the Level of Cloud Computing Adoption: A Study of Sri Lankan Inf...COVID-19 and the Level of Cloud Computing Adoption: A Study of Sri Lankan Inf...
COVID-19 and the Level of Cloud Computing Adoption: A Study of Sri Lankan Inf...
 
Uncharted Together- Navigating AI's New Frontiers in Libraries
Uncharted Together- Navigating AI's New Frontiers in LibrariesUncharted Together- Navigating AI's New Frontiers in Libraries
Uncharted Together- Navigating AI's New Frontiers in Libraries
 
Sonkoloniya documentation - ONEprojukti.pdf
Sonkoloniya documentation - ONEprojukti.pdfSonkoloniya documentation - ONEprojukti.pdf
Sonkoloniya documentation - ONEprojukti.pdf
 
Mastering OnlyFans Clone App Development: Key Strategies for Success
Mastering OnlyFans Clone App Development: Key Strategies for SuccessMastering OnlyFans Clone App Development: Key Strategies for Success
Mastering OnlyFans Clone App Development: Key Strategies for Success
 
Mule Experience Hub and Release Channel with Java 17
Mule Experience Hub and Release Channel with Java 17Mule Experience Hub and Release Channel with Java 17
Mule Experience Hub and Release Channel with Java 17
 
Opencast Summit 2024 — Opencast @ University of Münster
Opencast Summit 2024 — Opencast @ University of MünsterOpencast Summit 2024 — Opencast @ University of Münster
Opencast Summit 2024 — Opencast @ University of Münster
 
The History of Embeddings & Multimodal Embeddings
The History of Embeddings & Multimodal EmbeddingsThe History of Embeddings & Multimodal Embeddings
The History of Embeddings & Multimodal Embeddings
 
Improving Learning Content Efficiency with Reusable Learning Content
Improving Learning Content Efficiency with Reusable Learning ContentImproving Learning Content Efficiency with Reusable Learning Content
Improving Learning Content Efficiency with Reusable Learning Content
 
Intel Unveils Core Ultra 200V Lunar chip .pdf
Intel Unveils Core Ultra 200V Lunar chip .pdfIntel Unveils Core Ultra 200V Lunar chip .pdf
Intel Unveils Core Ultra 200V Lunar chip .pdf
 
leewayhertz.com-Generative AI tech stack Frameworks infrastructure models and...
leewayhertz.com-Generative AI tech stack Frameworks infrastructure models and...leewayhertz.com-Generative AI tech stack Frameworks infrastructure models and...
leewayhertz.com-Generative AI tech stack Frameworks infrastructure models and...
 
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
 
LeadMagnet IQ Review: Unlock the Secret to Effortless Traffic and Leads.pdf
LeadMagnet IQ Review:  Unlock the Secret to Effortless Traffic and Leads.pdfLeadMagnet IQ Review:  Unlock the Secret to Effortless Traffic and Leads.pdf
LeadMagnet IQ Review: Unlock the Secret to Effortless Traffic and Leads.pdf
 

Performance Implications of Mobile Design (Perf Audience Edition)

  • 1. Performance Implications of Mobile Design Guy Podjarny @guypod guy@akamai.com http://guypo.com/ Akamai Confidential
  • 2. Agenda • Quick Intro to top Mobile Design Paradigms • Review each Paradigm • Explain Key Implementation Points • Dig into top performance problem • Show what went wrong • Discuss how you can fix it • Share tools that can help • And how to use them • Summary Faster ForwardTM ©2012 Akamai
  • 3. Who Am I #1: Ex-CTO of Blaze.io (now Akamai) Faster ForwardTM ©2012 Akamai
  • 4. Who Am I #2: Blaze Mobitest • Mobile Web Performance Measurement • Free Online Service: http://akamai.com/mobitest/ • Now Open-Source! • For more details: http://bit.ly/open-source-mobitest Faster ForwardTM ©2012 Akamai
  • 5. Who Am I #3: Mobile Performance Researcher http://guypo.com/ Faster ForwardTM ©2012 Akamai
  • 6. Waterfall Charts Resource Doc Complete, Waterfall (Request/Response) (a.k.a. onload, Chart Start Render Load Time) Faster ForwardTM ©2012 Akamai
  • 7. Quick Intro to Mobile Design Akamai Confidential
  • 8. Faster ForwardTM ©2012 Akamai
  • 9. Dedicated Sites (mdot) URL/Website Per Device Profile m.walmart.com www.walmart.com Faster ForwardTM ©2012 Akamai
  • 10. Why Dedicated Websites? • Historical Reasons • More established and better understood • Hard to change existing desktop websites • Different owners inside/outside the company • Better Reasons • Less sensitive to specific browsers • Helps align to native apps • Easier to get perfect site for that context (Maybe) Faster ForwardTM ©2012 Akamai
  • 11. Responsive Web Design One URL, Adapt to screen size www.bostonglobe.com Faster ForwardTM ©2012 Akamai
  • 12. Mobile First & Desktop First: RWD Variations Mobile First (Progressive Enhancement) Desktop First (Graceful Degradation) Faster ForwardTM ©2012 Akamai
  • 13. Why Responsive Websites? • Broader Device Support • Support the endless screen size permutations • No Need for User-Agent Mapping • Easier to maintain • Maintain one website instead of multiples • Future Friendly • Anticipates future devices • Better suited for handling new types of devices • http://futurefriend.ly/ Faster ForwardTM ©2012 Akamai
  • 14. Responsive Shades of Grey • Responsiveness is a property of a website • A dedicated mobile website can be responsive • A website can respond “only a little bit” • Display Size is not the only variable • Can respond to hardware properties (e.g. camera) • Can respond to data availability (e.g. location) • Server-side code can help too (a.k.a. RESS) • Though responsiveness is primarily client-side Faster ForwardTM ©2012 Akamai
  • 15. Dedicated Sites (mdot) Akamai Confidential
  • 16. Mdot Dedicated Sites don‟t create new performance problems Still have old problems, but that‟s not related to mobile design Faster ForwardTM ©2012 Akamai
  • 17. Small Mobile Site, Small Waterfall Chart m.cnn.com , iPhone 4, iOS 5.0 Faster ForwardTM ©2012 Akamai
  • 18. Big Desktop/Tablet Site, Big Waterfall Chart www.cnn.com iPad 2 iOS 5 Faster ForwardTM ©2012 Akamai
  • 19. Dedicated Sites Top Performance Problem Redirects m. www. Faster ForwardTM ©2012 Akamai
  • 20. Redirects are expensive! www.espn.com 2 redirects, 1.3 seconds lost Faster ForwardTM ©2012 Akamai
  • 21. User-Agent Detection FAIL Nexus S XOOM iPad 2 Faster ForwardTM ©2012 Akamai
  • 22. Solution: Client-Side Detection Faster ForwardTM ©2012 Akamai
  • 23. Late Redirect using scripts are even slower www.disney.com 2 redirects + JS Redirect, 3 seconds lost Faster ForwardTM ©2012 Akamai
  • 24. Could get nasty www.garmin.com 3 redirects + JS Redirect, 3.6 seconds lost Faster ForwardTM ©2012 Akamai
  • 25. Redirects – What To Do? • Replace redirects with client-specific HTML • Your CDN/load-balancer can help! • Minimize Redirects • Merge redirect chains • Use HTTP Redirects, not JS redirects • Keep the client-side detection as backup • Detect most devices server-side • Cache HTTP Redirects on the CDN • Makes the extra round trip shorter • Use HTTP 301 Redirect, with a future Expiry • 302/303/307 redirects not cached by iOS and others Faster ForwardTM ©2012 Akamai
  • 26. Responsive Web Design Akamai Confidential
  • 27. RWD Implementation 101 • Fluid Design • Turn absolute sizes into relative sizes • Breakpoints • Ethan Marcotte (@beep) / Stephen Hay @stephenhay: “Expand window until it looks like shit. Time to insert a breakpoint!” • CSS Media Queries • Change CSS more significantly at breakpoints • Examples: Hide Columns, Collapse Menus, Remove bg imgs • Using min/max width controls default view • Determines what non-conforming browsers will display Faster ForwardTM ©2012 Akamai
  • 28. Live Demo Faster ForwardTM ©2012 Akamai
  • 29. Media Queries Example Mobile-First: Uses min-width 3 “versions”: 2 Breakpoints: Basic, Mobile, Desktop 320px, 640px Faster ForwardTM ©2012 Akamai
  • 30. RWD Implementation 201 • Extend support with scripted DOM manipulations • Not all browsers support media queries (e.g. IE 6-8) • Due to JS Support concerns, used mainly for enhancement • Often required for responding to features • Beware: Widths are not accurate or consistent • Leave some buffer… • Use EMs instead of PXs for absolute sizes • Better handling for zoom or font size differences Faster ForwardTM ©2012 Akamai
  • 31. Responsive Web Design Responsive Web Design Top Performance Problem: Over-Downloading Faster ForwardTM ©2012 Akamai
  • 32. Test – Compare Sites on Different Resolutions • Data: • 347 Sites from http://mediaqueri.es/ • Testing Methodology: • Use http://webpagetest.org/ • Use Chrome browser • Resize window before each measurement •Resolutions: 320x480, 480x960, 1024x768, 1600x1200 • Saw similar results with iPhone vs. iPad tests • Collect Results • Excel & Pivot Tables (Automated version of Jason Grigsby‟s test last year) © Faster ForwardTM ©2012 Akamai
  • 33. Responsive Sites Load Times & Size, by Resolution Load Time* by Resolution (ms) 4,000 3,500 3,000 2,500 2,000 1,500 1,000 500 0 Page Size by Resolution (KB) 1,200 1,000 800 600 400 200 0 * Over Cable Speed (5 Mbps down, 1 Mbps up, 28ms RTT) Faster ForwardTM ©2012 Akamai
  • 34. Small Screen = Less Visible Content != Less Bytes 320x48 1600x120 0 0 Faster ForwardTM ©2012 Akamai
  • 35. Some depressing stats… Page size Smallest Screen (320x480) 3% 11% vs. Biggest Screen (1600x1200) Roughly Same Size A Bit Smaller (50-90%) 86% Much Smaller (<50%) Faster ForwardTM ©2012 Akamai
  • 36. Big Site, Big Waterfall 1600x120 0 Faster ForwardTM ©2012 Akamai
  • 37. Small Site, Big Waterfall 320x480 Faster ForwardTM ©2012 Akamai
  • 38. Download and Hide Rich Side-bar, holds ads and more Display set to none Faster ForwardTM ©2012 Akamai
  • 39. Hidden content is still downloaded Display set to none, resources are still downloaded! Hidden background Images are not! Faster ForwardTM ©2012 Akamai
  • 40. Download and Shrink Smaller Screen, Same Size Image Faster ForwardTM ©2012 Akamai
  • 41. Media queries don‟t prevent CSS downloads Separate CSS per media basic.css mobile.css 320x480 “Right” CSS loaded “Wrong” CSS loaded - Possibly deferred to just before onload - WebKit Bug 39455 - Conditions may change (e.g. rotate device) - Scripts may use it Faster ForwardTM desktop.css ©2012 Akamai
  • 42. Excess DOM 1402 elements 1398 elements 3485 nodes 3491 nodes Simplicity not reflected in DOM 1600x1200 320x480 Faster ForwardTM ©2012 Akamai
  • 43. RWD Woes • Download and Hide • Download and Shrink • Extra CSS Download • Excess DOM Faster ForwardTM ©2012 Akamai
  • 44. What Can We Do About It?! Akamai Confidential
  • 45. Images accounts for most mobile pages size Stats from http://mobile.httparchive.com/ Faster ForwardTM ©2012 Akamai
  • 46. Responsive Images 128px, 240px, 6.8 KB 2.9 KB 320px, 10.6 KB 480px, 21.3 KB Site: lonelyplanet.com Device: iPhone 4 Before: Full Res, 50.1 KB 867 KB After: 570 KB Faster ForwardTM ©2012 Akamai
  • 47. Responding Up (or badly?) ipad_hero.jpg 113 KB Served to Desktop ipad_hero_2x.jpg 360 KB Served to New iPad Faster ForwardTM ©2012 Akamai
  • 48. Standardizing Responsive Images @srcset VS. <picture> https://github.com/scottjehl/picturefill Faster ForwardTM ©2012 Akamai
  • 49. Responsive Images • Responsive Images = Serve lower res images to smaller screens • Optionally load full res image in the background • Lots of great resources on how to do it • Cloud Four blog - Education • Sencha.io Src – Free Server-Side Image Resizing • https://github.com/scottjehl/picturefill - Client-Side Selector • Responsive images apply to CSS too! • Especially to background images Faster ForwardTM ©2012 Akamai
  • 50. Load Images via CSS Full Details: http://timkadlec.com/2012/04/media-query-asset-downloading-results/ Faster ForwardTM ©2012 Akamai
  • 51. Or load images via JavaScript • Same loader can: • Apply responsive images • Load only visible images, including only above-the-fold images • Interferes with speculative look-ahead parsing Faster ForwardTM ©2012 Akamai
  • 52. Beyond Images - Build Mobile First • Don‟t just design Mobile First – Code a Mobile-only site • Build only for the lowest resolution you care about • Adapt to similar screen sizes: No layout shifts, no big res jumps • Performance should compare to mdot sites • Once implemented – Enhance via JavaScript • Grow DOM only on screens that need it. • Desktop clients with no JS support are a minority • Your mobile site should be good enough for those • Don‟t sacrifice the performance of 99% for the remaining 1% Faster ForwardTM ©2012 Akamai
  • 53. Enhancing via JavaScript – Tips & Tricks 1600px • Split your files by layout/resolution 480 • Duplicating content on the server is ok 320 px • Duplicating download is not px • Use Inline JavaScript to decide the layout • Then use external (cacheable) files to apply it • document.write() all CSS files (and other links) in one inline script! • Put scripts that change design at the top • JavaScript blocks rendering • Will avoid FOUC – Flash Of Unstyled Content • Put all other scripts at the bottom var css = „small.css‟; if (window.innerWidth > 640) css = „large.css‟; else if (window.innerWidth >= 320) css = „medium.css‟; document.write(„<link type=“stylesheet” rel=“stylesheet” href=“‟+css+‟”/>‟); Faster Forward TM ©2012 Akamai
  • 54. Don‟t forget the “regular” concerns • Reduce HTTP requests • Consolidate Files • Inline tiny files • Reduce bytes • Minify CSS/JS • Use Lossless Compression for Images • Load visible content first • Defer everything else • Or Load it on demand • Avoid CSS Imports •… Faster ForwardTM ©2012 Akamai
  • 55. Now you can be Responsive AND Fast! Faster ForwardTM ©2012 Akamai
  • 56. Measure! • Mobitest • Online service: http://mobitest.akamai.com/ • Install local open-source version (details) • Google‟s Pcapperf • Convert network capture to waterfall charts • http://pcapperf.appspot.com/ • Stoyan Stefanov‟s “icy” • HTTP insight into iOS HTTP requests • https://github.com/stoyan/icy • @firt‟s iWebInspector • Remote debugger for iOS simulator • http://www.iwebinspector.com/ 56 Faster ForwardTM ©2012 Akamai
  • 57. Testing different screen dimensions • Run webpagetest script with resizing • Use Chrome as agent (not supported on other browsers) • Sample script (tab delimited): setviewportsize 320 480 navigate http://bdconf.org/ • Many other scripting options:https://sites.google.com/a/webpagetest.org/docs/using- webpagetest/scripting • Figure out the viewport dimensions you want to simulate • http://www.websitedimensions.com/ Faster ForwardTM ©2012 Akamai
  • 58. Summary Akamai Confidential
  • 59. Summary • Choosing your mobile design is HARD • There are many factors to consider • Design Decision have Performance Implications • Mdot Primary Concern: Redirects • RWD Primary Concern: Over-Downloading • Either design paradigm can be made fast • Performance should be built in – not bolted on • Measure! • Make perf testing a part the core functionality test Faster ForwardTM ©2012 Akamai
  • 60. Questions? Performance Implications of Mobile Design Guy Podjarny @guypod guy@akamai.com http://guypo.com/ Akamai Confidential