Performance Implications of Mobile DesignGuy Podjarny@guypodguy@akamai.comhttp://blaze.io/blog/                           ...
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...
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 Op...
Who Am I #3: Mobile Performance Researcherhttp://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....
Responsive Web Design          One URL, Adapt to screen size                  http://mediaqueri.es/mq/                    ...
Mobile First & Desktop First included in RWD                             Mobile First                     (Progressive Enh...
Waterfall Charts                             Resource             Doc Complete,   Waterfall                 (Request/Respo...
Please don‟t hate me…• I use real world examples • Possibly written by you…• Constructive feedback != bashing • These are ...
Performance Matters!                       Akamai Confidential
Users Expect Fast Sites                                                  Source:                                          ...
Users Abandon Slow Sites               Page Abandonment vs. Load Time                                                    S...
Fast Sites Help Bottom Lines              Shopzilla: 5 sec load time improvement                                          ...
Mobile Users Expect Equal Speeds                                              Source: Gomez                           Fast...
Dedicated Sites (mdot)                         Akamai Confidential
Mdot   Dedicated Sites don‟t create new performance         problems              Still have old problems,       but that‟...
Small Mobile Site, Small Waterfall Chartwww.cnn.com , iPhone 4, iOS 5.0                                  Faster ForwardTM ...
Big Desktop/Tablet Site, Big Waterfall Chart                www.cnn.com                  iPad 2                   iOS 5   ...
Dedicated Sites Top Performance Problem                 Redirects   m.                                            www.    ...
Redirects are expensive!www.espn.com2 redirects, 1.3 seconds lost                            Faster ForwardTM   ©2012 Akamai
Late Redirect using scripts are even slowerwww.disney.com2 redirects + JS Redirect, 3 seconds lost                        ...
Could get nastywww.garmin.com3 redirects + JS Redirect, 3.6 seconds lost                           Faster ForwardTM   ©201...
Redirects – What To Do?• Minimize Redirects • Merge redirect chains• Use HTTP Redirects, not JS redirects • Keep the clien...
Responsive Web Design                        Akamai Confidential
Responsive Web Design Responsive Web Design    Top Performance       Problem:   Over-Downloading                        Fa...
Test – Compare Sites on Different Resolutions• Data: • 347 Sites from http://mediaqueri.es/• Testing Methodology: • Use ht...
Responsive Sites Load Times & Size, by Resolution    Load Time* by Resolution (ms)4,0003,5003,0002,5002,0001,5001,000  500...
Small Screen = Less Visible Content != Less Bytes         320x48                              1600x120         0          ...
Some depressing stats…Page Size                                                  10 Got Lucky 320x480                     ...
Big Site, Big Waterfall                          1600x120                          0                          Faster Forwa...
Small Site, Big Waterfall                            320x480                            Faster ForwardTM   ©2012 Akamai
Download and HideRich Side-bar,holds ads and more                                         Display set to none             ...
Hidden content is still downloaded                                              Display set to none,                      ...
Download and Shrink        Smaller Screen,        Same Size Image                      Faster ForwardTM   ©2012 Akamai
Media queries don‟t prevent CSS downloads                                                        Separate CSS             ...
Excess DOM1402 elements                 1398 elements3485 nodes                    3491 nodes                           Si...
RWD Woes• Download and Hide• Download and Shrink• Extra CSS Download• Excess DOM                        Faster ForwardTM  ...
What Can We Do About It?!                            Akamai Confidential
Images accounts for most mobile pages sizeStats from http://mobile.httparchive.com/                          Faster Forwar...
Responsive Images                                                                     128px,                              ...
Responding Up (or badly?)                                                    ipad_hero.jpg                                ...
Low Hanging Fruit: Responsive Images• Responsive Images =  Serve lower res images to smaller screens • Optionally load ful...
Build Mobile First• Don‟t just design Mobile First – Code a Mobile-only site • Build only for the lowest resolution you ca...
Enhancing via JavaScript – Tips & Tricks                                                                        1600px• Sp...
Don‟t forget the “regular” concerns• Reduce HTTP requests • Consolidate Files • Inline tiny files• Reduce bytes • Minify C...
Measure!     • Mobitest      • Online service: http://akamai.com/mobitest/      • Install local open-source version (detai...
Testing different screen dimensions• Run webpagetest script with resizing • Use Chrome as agent (not supported on other br...
Summary          Akamai Confidential
Summary• Choosing your mobile design is HARD• There are many factors to consider• Design Decision have Performance Implica...
Questions?    Performance Implications of Mobile DesignGuy Podjarny@guypodguy@akamai.comhttp://blaze.io/blog/             ...
Upcoming SlideShare
Loading in...5
×

Performance Implications of Mobile Design

26,624

Published on

Choosing your mobile design paradigm is hard, and performance is an often overlooked parameter in this decision process.

This presentation discusses the top performance concerns for the top mobile design paradigms - Dedicated Sites (mdot) and Responsive Web Design (RWD).

Presented at Breaking Dev (bdconf) in April, 2012.

Published in: Technology, Design
0 Comments
39 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
26,624
On Slideshare
0
From Embeds
0
Number of Embeds
25
Actions
Shares
0
Downloads
408
Comments
0
Likes
39
Embeds 0
No embeds

No notes for slide

Performance Implications of Mobile Design

  1. 1. Performance Implications of Mobile DesignGuy Podjarny@guypodguy@akamai.comhttp://blaze.io/blog/ Akamai Confidential
  2. 2. Good Morning! Faster ForwardTM ©2012 Akamai
  3. 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. 4. Who Am I #1: Ex-CTO of Blaze.io (now Akamai) Faster ForwardTM ©2012 Akamai
  5. 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. 6. Who Am I #3: Mobile Performance Researcherhttp://blaze.io/blog/ Faster ForwardTM ©2012 Akamai
  7. 7. Some Terminology Faster ForwardTM ©2012 Akamai
  8. 8. Dedicated Sites (mdot) URL/Website Per Device Profile m.walmart.com www.walmart.com Faster ForwardTM ©2012 Akamai
  9. 9. Responsive Web Design One URL, Adapt to screen size http://mediaqueri.es/mq/ Faster ForwardTM ©2012 Akamai
  10. 10. Mobile First & Desktop First included in RWD Mobile First (Progressive Enhancement) Desktop First(Graceful Degradation) Faster ForwardTM ©2012 Akamai
  11. 11. Waterfall Charts Resource Doc Complete, Waterfall (Request/Response) (a.k.a. onload, Chart Start Render Load Time) Faster ForwardTM ©2012 Akamai
  12. 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. 13. Performance Matters! Akamai Confidential
  14. 14. Users Expect Fast Sites Source: Akamai Faster ForwardTM ©2012 Akamai
  15. 15. Users Abandon Slow Sites Page Abandonment vs. Load Time Source: KISS Metrics Faster ForwardTM ©2012 Akamai
  16. 16. Fast Sites Help Bottom Lines Shopzilla: 5 sec load time improvement Source: Shopzilla Faster ForwardTM ©2012 Akamai
  17. 17. Mobile Users Expect Equal Speeds Source: Gomez Faster ForwardTM ©2012 Akamai
  18. 18. Dedicated Sites (mdot) Akamai Confidential
  19. 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. 20. Small Mobile Site, Small Waterfall Chartwww.cnn.com , iPhone 4, iOS 5.0 Faster ForwardTM ©2012 Akamai
  21. 21. Big Desktop/Tablet Site, Big Waterfall Chart www.cnn.com iPad 2 iOS 5 Faster ForwardTM ©2012 Akamai
  22. 22. Dedicated Sites Top Performance Problem Redirects m. www. Faster ForwardTM ©2012 Akamai
  23. 23. Redirects are expensive!www.espn.com2 redirects, 1.3 seconds lost Faster ForwardTM ©2012 Akamai
  24. 24. Late Redirect using scripts are even slowerwww.disney.com2 redirects + JS Redirect, 3 seconds lost Faster ForwardTM ©2012 Akamai
  25. 25. Could get nastywww.garmin.com3 redirects + JS Redirect, 3.6 seconds lost Faster ForwardTM ©2012 Akamai
  26. 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. 27. Responsive Web Design Akamai Confidential
  28. 28. Responsive Web Design Responsive Web Design Top Performance Problem: Over-Downloading Faster ForwardTM ©2012 Akamai
  29. 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. 30. Responsive Sites Load Times & Size, by Resolution Load Time* by Resolution (ms)4,0003,5003,0002,5002,0001,5001,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. 31. Small Screen = Less Visible Content != Less Bytes 320x48 1600x120 0 0 Faster ForwardTM ©2012 Akamai
  32. 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 ImagesA bit smaller = 50%-90% the sizeMuch smaller = <50% the size Faster ForwardTM ©2012 Akamai
  33. 33. Big Site, Big Waterfall 1600x120 0 Faster ForwardTM ©2012 Akamai
  34. 34. Small Site, Big Waterfall 320x480 Faster ForwardTM ©2012 Akamai
  35. 35. Download and HideRich Side-bar,holds ads and more Display set to none Faster ForwardTM ©2012 Akamai
  36. 36. Hidden content is still downloaded Display set to none, resources are still downloaded! Faster ForwardTM ©2012 Akamai
  37. 37. Download and Shrink Smaller Screen, Same Size Image Faster ForwardTM ©2012 Akamai
  38. 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. 39. Excess DOM1402 elements 1398 elements3485 nodes 3491 nodes Simplicity not reflected in DOM 1600x1200 320x480 Faster ForwardTM ©2012 Akamai
  40. 40. RWD Woes• Download and Hide• Download and Shrink• Extra CSS Download• Excess DOM Faster ForwardTM ©2012 Akamai
  41. 41. What Can We Do About It?! Akamai Confidential
  42. 42. Images accounts for most mobile pages sizeStats from http://mobile.httparchive.com/ Faster ForwardTM ©2012 Akamai
  43. 43. Responsive Images 128px, 240px, 6.8 KB 2.9 KB 320px, 10.6 KB 480px, 21.3 KBSite:lonelyplanet.comDevice:iPhone 4Before: Full Res, 50.1 KB867 KBAfter:570 KB Faster ForwardTM ©2012 Akamai
  44. 44. Responding Up (or badly?) ipad_hero.jpg 113 KB Served to Desktop ipad_hero_2x.jpg 360 KBServed to New iPad Faster ForwardTM ©2012 Akamai
  45. 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. 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. 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. 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. 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. 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. 51. Summary Akamai Confidential
  52. 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. 53. Questions? Performance Implications of Mobile DesignGuy Podjarny@guypodguy@akamai.comhttp://blaze.io/blog/ Akamai Confidential
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×