Performance Implications of Mobile Design

1. Performance Implications of Mobile DesignGuy Podjarny@guypodguy@akamai.comhttp://blaze.io/blog/ Akamai Confidential

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

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

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

18. Dedicated Sites (mdot) Akamai Confidential

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

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,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

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

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

41. What Can We Do About It?! Akamai Confidential

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 DesignGuy Podjarny@guypodguy@akamai.comhttp://blaze.io/blog/ Akamai Confidential