Performance Implications of Mobile Design

Guy Podjarny
Guy PodjarnyCEO at Snyk
Performance Implications of Mobile Design




Guy Podjarny
@guypod
guy@akamai.com
http://blaze.io/blog/
                                          Akamai Confidential
Good Morning!




                Faster ForwardTM   ©2012 Akamai
Agenda

• Performance Matters!
• Focus on top Mobile Design Paradigms
 • A bit on Dedicates Sites (mdot)
 • A lot on Responsive Web Design
• Review Performance each Paradigm
 • Dig into the 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://blaze.io/blog/




                          Faster ForwardTM   ©2012 Akamai
Some

        Terminology



       Faster ForwardTM   ©2012 Akamai
Dedicated Sites (mdot)

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




                          Faster ForwardTM                     ©2012 Akamai
Responsive Web Design

          One URL, Adapt to screen size
                  http://mediaqueri.es/mq/




                          Faster ForwardTM   ©2012 Akamai
Mobile First & Desktop First included in RWD


                             Mobile First
                     (Progressive Enhancement)


    Desktop First
(Graceful Degradation)




                          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
Please don‟t hate me…

• I use real world examples
 • Possibly written by you…
• Constructive feedback != bashing
 • These are common mistakes
 • We should learn from them
• I tried to spread the blame
 • Plenty of sites to choose from…
• If you fix it, let me know!
 • I‟ll spread the word




                                     Faster ForwardTM   ©2012 Akamai
Performance Matters!




                       Akamai Confidential
Users Expect Fast Sites




                                                  Source:
                                                  Akamai


                          Faster ForwardTM   ©2012 Akamai
Users Abandon Slow Sites
               Page Abandonment vs. Load Time




                                                    Source:
                                                KISS Metrics


                           Faster ForwardTM      ©2012 Akamai
Fast Sites Help Bottom Lines
              Shopzilla: 5 sec load time improvement




                                                         Source:
                                                        Shopzilla


                               Faster ForwardTM        ©2012 Akamai
Mobile Users Expect Equal Speeds




                                              Source: Gomez
                           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




www.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
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?

• 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 are not cached by the browser
 • Good test page (by @souders): http://bit.ly/redirect-cache-test

                             Faster ForwardTM                ©2012 Akamai
Responsive Web Design




                        Akamai Confidential
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                                                  10 Got Lucky
 320x480                              A Bit Smaller            (BG
                                          11%              Image, Fonts,
    vs                                                          …)
1600x1200

                                                  Much
                                                 Smaller
                                                   3%
          Same Size
            86%



                                                           1 Responsive
                                                              Images
A bit smaller = 50%-90% the size
Much smaller = <50% the size
                              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!




                           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
- May be used
  by JavaScript
- Possibly delayed till
  just before onload

                                        desktop.css
                            Faster ForwardTM                   ©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
Low Hanging Fruit: 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 – Helper Tool
• Responsive images apply to CSS too!
 • Especially to background images
 • And stop with the huge images!


                             Faster ForwardTM         ©2012 Akamai
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 resolution 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
                                                       px
 • Duplicating download is not
• Use Inline JavaScript to decide the layout
 • Then use external (cacheable) files to apply it
• 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 ForwardTM                        ©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
Measure!

     • Mobitest
      • Online service: http://akamai.com/mobitest/
      • 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/


49                                      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://blaze.io/blog/
                                          Akamai Confidential
1 of 53

Recommended

Step by Step Mobile Optimization by
Step by Step Mobile OptimizationStep by Step Mobile Optimization
Step by Step Mobile OptimizationGuy Podjarny
5.5K views69 slides
Performance Implications of Mobile Design (Perf Audience Edition) by
Performance Implications of Mobile Design (Perf Audience Edition)Performance Implications of Mobile Design (Perf Audience Edition)
Performance Implications of Mobile Design (Perf Audience Edition)Guy Podjarny
7.9K views60 slides
Velocity 2012: The 90-Minute Mobile Optimization Life Cycle by
Velocity 2012: The 90-Minute Mobile Optimization Life CycleVelocity 2012: The 90-Minute Mobile Optimization Life Cycle
Velocity 2012: The 90-Minute Mobile Optimization Life CycleStrangeloop
4.4K views206 slides
Quantifying The Mobile Difference by
Quantifying The Mobile DifferenceQuantifying The Mobile Difference
Quantifying The Mobile DifferenceGuy Podjarny
27.7K views57 slides
High Performance Mobile Web by
High Performance Mobile WebHigh Performance Mobile Web
High Performance Mobile WebMorgan Cheng
3.4K views54 slides
Going Fast on the Mobile Web by
Going Fast on the Mobile WebGoing Fast on the Mobile Web
Going Fast on the Mobile WebJason Grigsby
30.3K views59 slides

More Related Content

What's hot

Mobile Web Best Practices by
Mobile Web Best PracticesMobile Web Best Practices
Mobile Web Best PracticesJames D Bloom
4K views50 slides
Imagesandvideo tallinn by
Imagesandvideo tallinnImagesandvideo tallinn
Imagesandvideo tallinnDoug Sillars
313 views122 slides
Imagesandvideo stockholm webmeetup by
Imagesandvideo stockholm webmeetupImagesandvideo stockholm webmeetup
Imagesandvideo stockholm webmeetupDoug Sillars
550 views122 slides
Threadneedle when its just too slow by
Threadneedle when its just too slowThreadneedle when its just too slow
Threadneedle when its just too slowDoug Sillars
195 views137 slides
Testing Mobile App Performance MOT Edinburgh by
Testing Mobile App Performance MOT EdinburghTesting Mobile App Performance MOT Edinburgh
Testing Mobile App Performance MOT EdinburghDoug Sillars
398 views137 slides
Mot cph when its just too slow by
Mot cph when its just too slowMot cph when its just too slow
Mot cph when its just too slowDoug Sillars
343 views137 slides

What's hot(20)

Imagesandvideo tallinn by Doug Sillars
Imagesandvideo tallinnImagesandvideo tallinn
Imagesandvideo tallinn
Doug Sillars313 views
Imagesandvideo stockholm webmeetup by Doug Sillars
Imagesandvideo stockholm webmeetupImagesandvideo stockholm webmeetup
Imagesandvideo stockholm webmeetup
Doug Sillars550 views
Threadneedle when its just too slow by Doug Sillars
Threadneedle when its just too slowThreadneedle when its just too slow
Threadneedle when its just too slow
Doug Sillars195 views
Testing Mobile App Performance MOT Edinburgh by Doug Sillars
Testing Mobile App Performance MOT EdinburghTesting Mobile App Performance MOT Edinburgh
Testing Mobile App Performance MOT Edinburgh
Doug Sillars398 views
Mot cph when its just too slow by Doug Sillars
Mot cph when its just too slowMot cph when its just too slow
Mot cph when its just too slow
Doug Sillars343 views
Nantes when its just too slow by Doug Sillars
Nantes when its just too slowNantes when its just too slow
Nantes when its just too slow
Doug Sillars171 views
Optimizing WordPress Performance by Douglas Yuen
Optimizing WordPress PerformanceOptimizing WordPress Performance
Optimizing WordPress Performance
Douglas Yuen2.1K views
10+апреля+лучшие+практики+и+инновации+вадим+береговский+akamai by elenae00
10+апреля+лучшие+практики+и+инновации+вадим+береговский+akamai10+апреля+лучшие+практики+и+инновации+вадим+береговский+akamai
10+апреля+лучшие+практики+и+инновации+вадим+береговский+akamai
elenae00523 views
Seatwave Web Peformance Optimisation Case Study by Stephen Thair
Seatwave Web Peformance Optimisation Case StudySeatwave Web Peformance Optimisation Case Study
Seatwave Web Peformance Optimisation Case Study
Stephen Thair1.2K views
Performance as UX with Justin Howlett by FITC
Performance as UX with Justin HowlettPerformance as UX with Justin Howlett
Performance as UX with Justin Howlett
FITC1.5K views
Developing High Performance Web Apps - CodeMash 2011 by Timothy Fisher
Developing High Performance Web Apps - CodeMash 2011Developing High Performance Web Apps - CodeMash 2011
Developing High Performance Web Apps - CodeMash 2011
Timothy Fisher9.6K views
Extending JMS to Web Devices over HTML5 WebSockets - JavaOne 2011 by Peter Moskovits
Extending JMS to Web Devices over HTML5 WebSockets - JavaOne 2011Extending JMS to Web Devices over HTML5 WebSockets - JavaOne 2011
Extending JMS to Web Devices over HTML5 WebSockets - JavaOne 2011
Peter Moskovits5.3K views
Optimizing Sites for Mobile Devices by jameswillweb
Optimizing Sites for Mobile DevicesOptimizing Sites for Mobile Devices
Optimizing Sites for Mobile Devices
jameswillweb5.5K views
Web前端性能分析工具导引 by 冰 郭
Web前端性能分析工具导引Web前端性能分析工具导引
Web前端性能分析工具导引
冰 郭1.1K views
FastView acceleration overview by Yaron_Radware
FastView acceleration overviewFastView acceleration overview
FastView acceleration overview
Yaron_Radware622 views
Happy Browser, Happy User! NY Web Performance Meetup 9/20/19 by Katie Sylor-Miller
Happy Browser, Happy User! NY Web Performance Meetup 9/20/19Happy Browser, Happy User! NY Web Performance Meetup 9/20/19
Happy Browser, Happy User! NY Web Performance Meetup 9/20/19
Katie Sylor-Miller452 views

Similar to Performance Implications of Mobile Design

Akamai 如何幫您的客戶用網站賺錢 how to monetize your site by
Akamai 如何幫您的客戶用網站賺錢 how to monetize your siteAkamai 如何幫您的客戶用網站賺錢 how to monetize your site
Akamai 如何幫您的客戶用網站賺錢 how to monetize your site零壹科技股份有限公司
1.2K views24 slides
Boston Web Performance Meetup: The Render Chain and You by
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 Youmattringel
1.7K views42 slides
Etail West 2013 Akamai CEO Tom Leighton_Final by
Etail West 2013 Akamai CEO Tom Leighton_FinalEtail West 2013 Akamai CEO Tom Leighton_Final
Etail West 2013 Akamai CEO Tom Leighton_FinalLiz Bradley
2.1K views26 slides
Akamai connector for varnish by
Akamai connector for varnishAkamai connector for varnish
Akamai connector for varnishVarnish Software
392 views46 slides
Akamai internet insights by
Akamai internet insightsAkamai internet insights
Akamai internet insightsJustin Dorfman
1.6K views15 slides
eTail Keynote from Akamai CEO Tom Leighton by
eTail Keynote from Akamai CEO Tom LeightoneTail Keynote from Akamai CEO Tom Leighton
eTail Keynote from Akamai CEO Tom LeightonAkamai Technologies
1.2K views26 slides

Similar to Performance Implications of Mobile Design(20)

Boston Web Performance Meetup: The Render Chain and You by mattringel
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
mattringel1.7K views
Etail West 2013 Akamai CEO Tom Leighton_Final by Liz Bradley
Etail West 2013 Akamai CEO Tom Leighton_FinalEtail West 2013 Akamai CEO Tom Leighton_Final
Etail West 2013 Akamai CEO Tom Leighton_Final
Liz Bradley2.1K views
TL;DR Web Performance Workshop by Gareth Hughes
TL;DR Web Performance WorkshopTL;DR Web Performance Workshop
TL;DR Web Performance Workshop
Gareth Hughes1.5K views
Responsive In The Wild, 2014 by Guy Podjarny
Responsive In The Wild, 2014Responsive In The Wild, 2014
Responsive In The Wild, 2014
Guy Podjarny2.1K views
Tom uk soti_final_without video.4.21.15 by Liz Bradley
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 Bradley676 views
AWS Webinar - Intro to Amazon Cloudfront 13-09-17 by Amazon Web Services
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 Services119.3K views
Third Party Performance (Velocity, 2014) by Guy Podjarny
Third Party Performance (Velocity, 2014)Third Party Performance (Velocity, 2014)
Third Party Performance (Velocity, 2014)
Guy Podjarny2K views
DIY Website Performance - Akamai Toronto Tech Day 2015 by Desmond Tam
DIY Website Performance - Akamai Toronto Tech Day 2015DIY Website Performance - Akamai Toronto Tech Day 2015
DIY Website Performance - Akamai Toronto Tech Day 2015
Desmond Tam988 views
Marrying CDNs with Front-End Optimization by Strangeloop
Marrying CDNs with Front-End Optimization Marrying CDNs with Front-End Optimization
Marrying CDNs with Front-End Optimization
Strangeloop6.7K views
Akamai: From Theory to Practice by Liz Bradley
Akamai: From Theory to PracticeAkamai: From Theory to Practice
Akamai: From Theory to Practice
Liz Bradley5.2K views
10+апреля+лучшие+практики+и+инновации+вадим+береговский+akamai by elenae00
10+апреля+лучшие+практики+и+инновации+вадим+береговский+akamai10+апреля+лучшие+практики+и+инновации+вадим+береговский+akamai
10+апреля+лучшие+практики+и+инновации+вадим+береговский+akamai
elenae00334 views

More from Guy Podjarny

Serverless Security: What's Left To Protect by
Serverless Security: What's Left To ProtectServerless Security: What's Left To Protect
Serverless Security: What's Left To ProtectGuy Podjarny
1.9K views107 slides
Securing Serverless - By Breaking In by
Securing Serverless - By Breaking InSecuring Serverless - By Breaking In
Securing Serverless - By Breaking InGuy Podjarny
448 views31 slides
Serverless Security: What's Left to Protect? by
Serverless Security: What's Left to Protect?Serverless Security: What's Left to Protect?
Serverless Security: What's Left to Protect?Guy Podjarny
17.6K views94 slides
Secure Node Code (workshop, O'Reilly Security) by
Secure Node Code (workshop, O'Reilly Security)Secure Node Code (workshop, O'Reilly Security)
Secure Node Code (workshop, O'Reilly Security)Guy Podjarny
1.2K views161 slides
Stranger Danger (NodeSummit, 2016) by
Stranger Danger (NodeSummit, 2016)Stranger Danger (NodeSummit, 2016)
Stranger Danger (NodeSummit, 2016)Guy Podjarny
786 views29 slides
Stranger Danger: Securing Third Party Components (Tech2020) by
Stranger Danger: Securing Third Party Components (Tech2020)Stranger Danger: Securing Third Party Components (Tech2020)
Stranger Danger: Securing Third Party Components (Tech2020)Guy Podjarny
1.6K views67 slides

More from Guy Podjarny(17)

Serverless Security: What's Left To Protect by Guy Podjarny
Serverless Security: What's Left To ProtectServerless Security: What's Left To Protect
Serverless Security: What's Left To Protect
Guy Podjarny1.9K views
Securing Serverless - By Breaking In by Guy Podjarny
Securing Serverless - By Breaking InSecuring Serverless - By Breaking In
Securing Serverless - By Breaking In
Guy Podjarny448 views
Serverless Security: What's Left to Protect? by Guy Podjarny
Serverless Security: What's Left to Protect?Serverless Security: What's Left to Protect?
Serverless Security: What's Left to Protect?
Guy Podjarny17.6K views
Secure Node Code (workshop, O'Reilly Security) by Guy Podjarny
Secure Node Code (workshop, O'Reilly Security)Secure Node Code (workshop, O'Reilly Security)
Secure Node Code (workshop, O'Reilly Security)
Guy Podjarny1.2K views
Stranger Danger (NodeSummit, 2016) by Guy Podjarny
Stranger Danger (NodeSummit, 2016)Stranger Danger (NodeSummit, 2016)
Stranger Danger (NodeSummit, 2016)
Guy Podjarny786 views
Stranger Danger: Securing Third Party Components (Tech2020) by Guy Podjarny
Stranger Danger: Securing Third Party Components (Tech2020)Stranger Danger: Securing Third Party Components (Tech2020)
Stranger Danger: Securing Third Party Components (Tech2020)
Guy Podjarny1.6K views
High Performance Images: Beautiful Shouldn't Mean Slow (Velocity EU 2015) by 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)
Guy Podjarny7K views
HTTPS: What, Why and How (SmashingConf Freiburg, Sep 2015) by 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)
Guy Podjarny14.5K views
High Performance Images: Beautiful Shouldn't Mean Slow by Guy Podjarny
High Performance Images: Beautiful Shouldn't Mean SlowHigh Performance Images: Beautiful Shouldn't Mean Slow
High Performance Images: Beautiful Shouldn't Mean Slow
Guy Podjarny3.9K views
Rules driven-delivery by Guy Podjarny
Rules driven-deliveryRules driven-delivery
Rules driven-delivery
Guy Podjarny1.7K views
Responsive In The Wild (SmashingConf, 2014) by Guy Podjarny
Responsive In The Wild (SmashingConf, 2014)Responsive In The Wild (SmashingConf, 2014)
Responsive In The Wild (SmashingConf, 2014)
Guy Podjarny2.1K views
Putting Your Images on a Diet (SmashingConf, 2014) by 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)
Guy Podjarny5.7K views
Third party-performance (Airbnb Nerds, Nov 2013) by Guy Podjarny
Third party-performance (Airbnb Nerds, Nov 2013)Third party-performance (Airbnb Nerds, Nov 2013)
Third party-performance (Airbnb Nerds, Nov 2013)
Guy Podjarny3K views
Third Party Performance by Guy Podjarny
Third Party PerformanceThird Party Performance
Third Party Performance
Guy Podjarny3.2K views
A Picture Costs A Thousand Words by Guy Podjarny
A Picture Costs A Thousand WordsA Picture Costs A Thousand Words
A Picture Costs A Thousand Words
Guy Podjarny19.4K views
Unravelling Mobile Web Performance by Guy Podjarny
Unravelling Mobile Web PerformanceUnravelling Mobile Web Performance
Unravelling Mobile Web Performance
Guy Podjarny2.7K views
State Of Mobile Web Performance by Guy Podjarny
State Of Mobile Web PerformanceState Of Mobile Web Performance
State Of Mobile Web Performance
Guy Podjarny805 views

Recently uploaded

Live Demo Showcase: Unveiling Dell PowerFlex’s IaaS Capabilities with Apache ... by
Live Demo Showcase: Unveiling Dell PowerFlex’s IaaS Capabilities with Apache ...Live Demo Showcase: Unveiling Dell PowerFlex’s IaaS Capabilities with Apache ...
Live Demo Showcase: Unveiling Dell PowerFlex’s IaaS Capabilities with Apache ...ShapeBlue
126 views10 slides
Backroll, News and Demo - Pierre Charton, Matthias Dhellin, Ousmane Diarra - ... by
Backroll, News and Demo - Pierre Charton, Matthias Dhellin, Ousmane Diarra - ...Backroll, News and Demo - Pierre Charton, Matthias Dhellin, Ousmane Diarra - ...
Backroll, News and Demo - Pierre Charton, Matthias Dhellin, Ousmane Diarra - ...ShapeBlue
186 views15 slides
CloudStack and GitOps at Enterprise Scale - Alex Dometrius, Rene Glover - AT&T by
CloudStack and GitOps at Enterprise Scale - Alex Dometrius, Rene Glover - AT&TCloudStack and GitOps at Enterprise Scale - Alex Dometrius, Rene Glover - AT&T
CloudStack and GitOps at Enterprise Scale - Alex Dometrius, Rene Glover - AT&TShapeBlue
152 views34 slides
Business Analyst Series 2023 - Week 4 Session 8 by
Business Analyst Series 2023 -  Week 4 Session 8Business Analyst Series 2023 -  Week 4 Session 8
Business Analyst Series 2023 - Week 4 Session 8DianaGray10
123 views13 slides
Zero to Cloud Hero: Crafting a Private Cloud from Scratch with XCP-ng, Xen Or... by
Zero to Cloud Hero: Crafting a Private Cloud from Scratch with XCP-ng, Xen Or...Zero to Cloud Hero: Crafting a Private Cloud from Scratch with XCP-ng, Xen Or...
Zero to Cloud Hero: Crafting a Private Cloud from Scratch with XCP-ng, Xen Or...ShapeBlue
198 views20 slides
Webinar : Desperately Seeking Transformation - Part 2: Insights from leading... by
Webinar : Desperately Seeking Transformation - Part 2:  Insights from leading...Webinar : Desperately Seeking Transformation - Part 2:  Insights from leading...
Webinar : Desperately Seeking Transformation - Part 2: Insights from leading...The Digital Insurer
90 views52 slides

Recently uploaded(20)

Live Demo Showcase: Unveiling Dell PowerFlex’s IaaS Capabilities with Apache ... by ShapeBlue
Live Demo Showcase: Unveiling Dell PowerFlex’s IaaS Capabilities with Apache ...Live Demo Showcase: Unveiling Dell PowerFlex’s IaaS Capabilities with Apache ...
Live Demo Showcase: Unveiling Dell PowerFlex’s IaaS Capabilities with Apache ...
ShapeBlue126 views
Backroll, News and Demo - Pierre Charton, Matthias Dhellin, Ousmane Diarra - ... by ShapeBlue
Backroll, News and Demo - Pierre Charton, Matthias Dhellin, Ousmane Diarra - ...Backroll, News and Demo - Pierre Charton, Matthias Dhellin, Ousmane Diarra - ...
Backroll, News and Demo - Pierre Charton, Matthias Dhellin, Ousmane Diarra - ...
ShapeBlue186 views
CloudStack and GitOps at Enterprise Scale - Alex Dometrius, Rene Glover - AT&T by ShapeBlue
CloudStack and GitOps at Enterprise Scale - Alex Dometrius, Rene Glover - AT&TCloudStack and GitOps at Enterprise Scale - Alex Dometrius, Rene Glover - AT&T
CloudStack and GitOps at Enterprise Scale - Alex Dometrius, Rene Glover - AT&T
ShapeBlue152 views
Business Analyst Series 2023 - Week 4 Session 8 by DianaGray10
Business Analyst Series 2023 -  Week 4 Session 8Business Analyst Series 2023 -  Week 4 Session 8
Business Analyst Series 2023 - Week 4 Session 8
DianaGray10123 views
Zero to Cloud Hero: Crafting a Private Cloud from Scratch with XCP-ng, Xen Or... by ShapeBlue
Zero to Cloud Hero: Crafting a Private Cloud from Scratch with XCP-ng, Xen Or...Zero to Cloud Hero: Crafting a Private Cloud from Scratch with XCP-ng, Xen Or...
Zero to Cloud Hero: Crafting a Private Cloud from Scratch with XCP-ng, Xen Or...
ShapeBlue198 views
Webinar : Desperately Seeking Transformation - Part 2: Insights from leading... by The Digital Insurer
Webinar : Desperately Seeking Transformation - Part 2:  Insights from leading...Webinar : Desperately Seeking Transformation - Part 2:  Insights from leading...
Webinar : Desperately Seeking Transformation - Part 2: Insights from leading...
Mitigating Common CloudStack Instance Deployment Failures - Jithin Raju - Sha... by ShapeBlue
Mitigating Common CloudStack Instance Deployment Failures - Jithin Raju - Sha...Mitigating Common CloudStack Instance Deployment Failures - Jithin Raju - Sha...
Mitigating Common CloudStack Instance Deployment Failures - Jithin Raju - Sha...
ShapeBlue180 views
Import Export Virtual Machine for KVM Hypervisor - Ayush Pandey - University ... by ShapeBlue
Import Export Virtual Machine for KVM Hypervisor - Ayush Pandey - University ...Import Export Virtual Machine for KVM Hypervisor - Ayush Pandey - University ...
Import Export Virtual Machine for KVM Hypervisor - Ayush Pandey - University ...
ShapeBlue119 views
Backup and Disaster Recovery with CloudStack and StorPool - Workshop - Venko ... by ShapeBlue
Backup and Disaster Recovery with CloudStack and StorPool - Workshop - Venko ...Backup and Disaster Recovery with CloudStack and StorPool - Workshop - Venko ...
Backup and Disaster Recovery with CloudStack and StorPool - Workshop - Venko ...
ShapeBlue184 views
Initiating and Advancing Your Strategic GIS Governance Strategy by Safe Software
Initiating and Advancing Your Strategic GIS Governance StrategyInitiating and Advancing Your Strategic GIS Governance Strategy
Initiating and Advancing Your Strategic GIS Governance Strategy
Safe Software176 views
Digital Personal Data Protection (DPDP) Practical Approach For CISOs by Priyanka Aash
Digital Personal Data Protection (DPDP) Practical Approach For CISOsDigital Personal Data Protection (DPDP) Practical Approach For CISOs
Digital Personal Data Protection (DPDP) Practical Approach For CISOs
Priyanka Aash158 views
TrustArc Webinar - Managing Online Tracking Technology Vendors_ A Checklist f... by TrustArc
TrustArc Webinar - Managing Online Tracking Technology Vendors_ A Checklist f...TrustArc Webinar - Managing Online Tracking Technology Vendors_ A Checklist f...
TrustArc Webinar - Managing Online Tracking Technology Vendors_ A Checklist f...
TrustArc170 views
NTGapps NTG LowCode Platform by Mustafa Kuğu
NTGapps NTG LowCode Platform NTGapps NTG LowCode Platform
NTGapps NTG LowCode Platform
Mustafa Kuğu423 views
KVM Security Groups Under the Hood - Wido den Hollander - Your.Online by ShapeBlue
KVM Security Groups Under the Hood - Wido den Hollander - Your.OnlineKVM Security Groups Under the Hood - Wido den Hollander - Your.Online
KVM Security Groups Under the Hood - Wido den Hollander - Your.Online
ShapeBlue221 views
iSAQB Software Architecture Gathering 2023: How Process Orchestration Increas... by Bernd Ruecker
iSAQB Software Architecture Gathering 2023: How Process Orchestration Increas...iSAQB Software Architecture Gathering 2023: How Process Orchestration Increas...
iSAQB Software Architecture Gathering 2023: How Process Orchestration Increas...
Bernd Ruecker54 views
The Power of Heat Decarbonisation Plans in the Built Environment by IES VE
The Power of Heat Decarbonisation Plans in the Built EnvironmentThe Power of Heat Decarbonisation Plans in the Built Environment
The Power of Heat Decarbonisation Plans in the Built Environment
IES VE79 views
DRaaS using Snapshot copy and destination selection (DRaaS) - Alexandre Matti... by ShapeBlue
DRaaS using Snapshot copy and destination selection (DRaaS) - Alexandre Matti...DRaaS using Snapshot copy and destination selection (DRaaS) - Alexandre Matti...
DRaaS using Snapshot copy and destination selection (DRaaS) - Alexandre Matti...
ShapeBlue139 views

Performance Implications of Mobile Design

  • 1. Performance Implications of Mobile Design Guy Podjarny @guypod guy@akamai.com http://blaze.io/blog/ Akamai Confidential
  • 2. Good Morning! Faster ForwardTM ©2012 Akamai
  • 3. Agenda • Performance Matters! • Focus on top Mobile Design Paradigms • A bit on Dedicates Sites (mdot) • A lot on Responsive Web Design • Review Performance each Paradigm • Dig into the 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
  • 4. Who Am I #1: Ex-CTO of Blaze.io (now Akamai) Faster ForwardTM ©2012 Akamai
  • 5. 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
  • 6. Who Am I #3: Mobile Performance Researcher http://blaze.io/blog/ Faster ForwardTM ©2012 Akamai
  • 7. Some Terminology Faster ForwardTM ©2012 Akamai
  • 8. Dedicated Sites (mdot) URL/Website Per Device Profile m.walmart.com www.walmart.com Faster ForwardTM ©2012 Akamai
  • 9. Responsive Web Design One URL, Adapt to screen size http://mediaqueri.es/mq/ Faster ForwardTM ©2012 Akamai
  • 10. Mobile First & Desktop First included in RWD Mobile First (Progressive Enhancement) Desktop First (Graceful Degradation) Faster ForwardTM ©2012 Akamai
  • 11. Waterfall Charts Resource Doc Complete, Waterfall (Request/Response) (a.k.a. onload, Chart Start Render Load Time) Faster ForwardTM ©2012 Akamai
  • 12. Please don‟t hate me… • I use real world examples • Possibly written by you… • Constructive feedback != bashing • These are common mistakes • We should learn from them • I tried to spread the blame • Plenty of sites to choose from… • If you fix it, let me know! • I‟ll spread the word Faster ForwardTM ©2012 Akamai
  • 13. Performance Matters! Akamai Confidential
  • 14. Users Expect Fast Sites Source: Akamai Faster ForwardTM ©2012 Akamai
  • 15. Users Abandon Slow Sites Page Abandonment vs. Load Time Source: KISS Metrics Faster ForwardTM ©2012 Akamai
  • 16. Fast Sites Help Bottom Lines Shopzilla: 5 sec load time improvement Source: Shopzilla Faster ForwardTM ©2012 Akamai
  • 17. Mobile Users Expect Equal Speeds Source: Gomez Faster ForwardTM ©2012 Akamai
  • 18. Dedicated Sites (mdot) Akamai Confidential
  • 19. 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
  • 20. Small Mobile Site, Small Waterfall Chart www.cnn.com , iPhone 4, iOS 5.0 Faster ForwardTM ©2012 Akamai
  • 21. Big Desktop/Tablet Site, Big Waterfall Chart www.cnn.com iPad 2 iOS 5 Faster ForwardTM ©2012 Akamai
  • 22. Dedicated Sites Top Performance Problem Redirects m. www. Faster ForwardTM ©2012 Akamai
  • 23. Redirects are expensive! www.espn.com 2 redirects, 1.3 seconds lost Faster ForwardTM ©2012 Akamai
  • 24. Late Redirect using scripts are even slower www.disney.com 2 redirects + JS Redirect, 3 seconds lost Faster ForwardTM ©2012 Akamai
  • 25. Could get nasty www.garmin.com 3 redirects + JS Redirect, 3.6 seconds lost Faster ForwardTM ©2012 Akamai
  • 26. Redirects – What To Do? • 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 are not cached by the browser • Good test page (by @souders): http://bit.ly/redirect-cache-test Faster ForwardTM ©2012 Akamai
  • 27. Responsive Web Design Akamai Confidential
  • 28. Responsive Web Design Responsive Web Design Top Performance Problem: Over-Downloading Faster ForwardTM ©2012 Akamai
  • 29. 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
  • 30. 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
  • 31. Small Screen = Less Visible Content != Less Bytes 320x48 1600x120 0 0 Faster ForwardTM ©2012 Akamai
  • 32. Some depressing stats… Page Size 10 Got Lucky 320x480 A Bit Smaller (BG 11% Image, Fonts, vs …) 1600x1200 Much Smaller 3% Same Size 86% 1 Responsive Images A bit smaller = 50%-90% the size Much smaller = <50% the size Faster ForwardTM ©2012 Akamai
  • 33. Big Site, Big Waterfall 1600x120 0 Faster ForwardTM ©2012 Akamai
  • 34. Small Site, Big Waterfall 320x480 Faster ForwardTM ©2012 Akamai
  • 35. Download and Hide Rich Side-bar, holds ads and more Display set to none Faster ForwardTM ©2012 Akamai
  • 36. Hidden content is still downloaded Display set to none, resources are still downloaded! Faster ForwardTM ©2012 Akamai
  • 37. Download and Shrink Smaller Screen, Same Size Image Faster ForwardTM ©2012 Akamai
  • 38. Media queries don‟t prevent CSS downloads Separate CSS per media basic.css mobile.css 320x480 “Right” CSS loaded “Wrong” CSS loaded - May be used by JavaScript - Possibly delayed till just before onload desktop.css Faster ForwardTM ©2012 Akamai
  • 39. Excess DOM 1402 elements 1398 elements 3485 nodes 3491 nodes Simplicity not reflected in DOM 1600x1200 320x480 Faster ForwardTM ©2012 Akamai
  • 40. RWD Woes • Download and Hide • Download and Shrink • Extra CSS Download • Excess DOM Faster ForwardTM ©2012 Akamai
  • 41. What Can We Do About It?! Akamai Confidential
  • 42. Images accounts for most mobile pages size Stats from http://mobile.httparchive.com/ Faster ForwardTM ©2012 Akamai
  • 43. 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
  • 44. 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
  • 45. Low Hanging Fruit: 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 – Helper Tool • Responsive images apply to CSS too! • Especially to background images • And stop with the huge images! Faster ForwardTM ©2012 Akamai
  • 46. 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 resolution 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
  • 47. Enhancing via JavaScript – Tips & Tricks 1600px • Split your files by layout/resolution 480 • Duplicating content on the server is ok 320 px px • Duplicating download is not • Use Inline JavaScript to decide the layout • Then use external (cacheable) files to apply it • 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 ForwardTM ©2012 Akamai
  • 48. 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
  • 49. Measure! • Mobitest • Online service: http://akamai.com/mobitest/ • 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/ 49 Faster ForwardTM ©2012 Akamai
  • 50. 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
  • 51. Summary Akamai Confidential
  • 52. 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
  • 53. Questions? Performance Implications of Mobile Design Guy Podjarny @guypod guy@akamai.com http://blaze.io/blog/ Akamai Confidential