1. Akamai Confidential Performance Implications of Mobile Design Guy Podjarny @guypod guy@akamai.com http://guypo.com/

2. ©2012 Akamai Faster Forward TM 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

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

4. ©2012 Akamai Faster Forward TM Who Am I #2: Akamai Mobitest Mobile Web Performance Measurement Free Online Service: http://mobitest.akamai.com/http://mobitest.akamai.com/ Open Source Agent (Google Code Project)Google Code Project For more details: http://bit.ly/open-source-mobitesthttp://bit.ly/open-source-mobitest

5. ©2012 Akamai Faster Forward TM Who Am I #3: Mobile Performance Researcher http://guypo.com/

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

7. Akamai Confidential Quick Intro to Mobile Design

8. ©2012 Akamai Faster Forward TM

9. ©2012 Akamai Faster Forward TM Dedicated Sites (mdot) m.walmart.com URL/Website Per Device Profile www.walmart.com

10. ©2012 Akamai Faster Forward TM 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)

11. ©2012 Akamai Faster Forward TM Responsive Web Design One URL, Adapt to screen size www.bostonglobe.com

12. ©2012 Akamai Faster Forward TM Mobile First & Desktop First: RWD Variations Mobile First (Progressive Enhancement) Desktop First (Graceful Degradation)

13. ©2012 Akamai Faster Forward TM 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/

14. ©2012 Akamai Faster Forward TM 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

15. Akamai Confidential Dedicated Sites (mdot)

16. ©2012 Akamai Faster Forward TM Dedicated Sites don’t create new performance problems Still have old problems, but that’s not related to mobile design Mdot

17. ©2012 Akamai Faster Forward TM Small Mobile Site, Small Waterfall Chart m.cnn.comm.cnn.com, iPhone 4, iOS 5.0

18. ©2012 Akamai Faster Forward TM Big Desktop/Tablet Site, Big Waterfall Chart www.cnn.com iPad 2 iOS 5

19. ©2012 Akamai Faster Forward TM Redirects Dedicated Sites Top Performance Problem m. www.

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

21. ©2012 Akamai Faster Forward TM User-Agent Detection FAIL Nexus S XOOM iPad 2

22. ©2012 Akamai Faster Forward TM Solution: Client-Side Detection

23. ©2012 Akamai Faster Forward TM Late Redirect using scripts are even slower www.disney.com www.disney.com 2 redirects + JS Redirect, 3 seconds lost

24. ©2012 Akamai Faster Forward TM Could get nasty www.garmin.com 3 redirects + JS Redirect, 3.6 seconds lost

25. ©2012 Akamai Faster Forward TM Redirects – What To Do? Replace redirects with client-specific HTML Your CDN/load-balancer can help! Make sure your paths are the same 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

26. Akamai Confidential Responsive Web Design

27. ©2012 Akamai Faster Forward TM RWD Implementation 101 Fluid Design Turn absolute sizes into relative sizes Breakpoints Stephen Hay @stephenhay (Mobile Web Designer): “Expand window until it looks like crap. Time to insert a breakpoint!”@stephenhay 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

28. ©2012 Akamai Faster Forward TM Live Demo

29. ©2012 Akamai Faster Forward TM Media Queries Example 2 Breakpoints: 320px, 640px 3 “versions”: Basic, Mobile, Desktop Mobile-First: Uses min-width

30. ©2012 Akamai Faster Forward TM 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

31. ©2012 Akamai Faster Forward TM Responsive Web Design Top Performance Problem: Over-Downloading Responsive Web Design

32. ©2012 Akamai Faster Forward TM Test – Compare Sites on Different Resolutions Data: 347 Sites from http://mediaqueri.es/http://mediaqueri.es/ Testing Methodology: Use http://webpagetest.org/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)Jason Grigsby’s test last year ©

33. ©2012 Akamai Faster Forward TM Responsive Sites Load Times & Size, by Resolution * Over Cable Speed (5 Mbps down, 1 Mbps up, 28ms RTT)

34. ©2012 Akamai Faster Forward TM Small Screen = Less Visible Content != Less Bytes 320x48 0 1600x120 0

35. ©2012 Akamai Faster Forward TM Some depressing stats… Page size Smallest Screen (320x480) vs. Biggest Screen (1600x1200) Page size Smallest Screen (320x480) vs. Biggest Screen (1600x1200)

36. ©2012 Akamai Faster Forward TM Big Site, Big Waterfall 1600x120 0

37. ©2012 Akamai Faster Forward TM Small Site, Big Waterfall 320x480

38. ©2012 Akamai Faster Forward TM Download and Hide Rich Side-bar, holds ads and more Display set to none

39. ©2012 Akamai Faster Forward TM Hidden content is still downloaded Display set to none, resources are still downloaded! Hidden background Images are not!

40. ©2012 Akamai Faster Forward TM Download and Shrink Smaller Screen, Same Size Image

41. ©2012 Akamai Faster Forward TM Media queries don’t prevent CSS downloads Separate CSS per media 320x480 “Wrong” CSS loaded -Possibly deferred to just before onload -WebKit Bug 3945539455 -Conditions may change (e.g. rotate device) -Scripts may use it basic.css mobile.css desktop.css “Right” CSS loaded

42. ©2012 Akamai Faster Forward TM Excess DOM 320x4801600x1200 Simplicity not reflected in DOM 1402 elements 3485 nodes 1398 elements 3491 nodes

43. ©2012 Akamai Faster Forward TM Download and Hide Download and Shrink Extra CSS Download Excess DOM RWD Woes

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

45. ©2012 Akamai Faster Forward TM Images accounts for most mobile pages size Stats from http://mobile.httparchive.com/http://mobile.httparchive.com/

46. ©2012 Akamai Faster Forward TM Responsive Images 128px, 2.9 KB 240px, 6.8 KB 320px, 10.6 KB 480px, 21.3 KB Full Res, 50.1 KB Site: lonelyplanet.com Device: iPhone 4 Before: 867 KB After: 570 KB

47. ©2012 Akamai Faster Forward TM Responding Up (or badly?) ipad_hero.jpg 113 KB Served to Desktop ipad_hero_2x.jpg 360 KB Served to New iPad

48. ©2012 Akamai Faster Forward TM Standardizing Responsive Images @srcset VS. https://github.com/scottjehl/picturefill

49. ©2012 Akamai Faster Forward TM 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 - EducationCloud Four blog Sencha.io Src – Free Server-Side Image ResizingSencha.io Src https://github.com/scottjehl/picturefill - Client-Side Selectorhttps://github.com/scottjehl/picturefill Responsive images apply to CSS too! Especially to background images

50. ©2012 Akamai Faster Forward TM Load Images via CSS Full Details: http://timkadlec.com/2012/04/media-query-asset-downloading-results/ http://timkadlec.com/2012/04/media-query-asset-downloading-results/

51. ©2012 Akamai Faster Forward TM 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

52. ©2012 Akamai Faster Forward TM 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%

53. ©2012 Akamai Faster Forward TM 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 …

54. ©2012 Akamai Faster Forward TM Now you can be Responsive AND Fast!

55. ©2012 Akamai Faster Forward TM Measure! Mobitest Online service: http://mobitest.akamai.com/ http://mobitest.akamai.com/ Install local open-source version (details)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/ 55

56. ©2012 Akamai Faster Forward TM Testing different screen dimensions Run webpagetest script with resizing Use Chrome as agent (not supported on other browsers) Sample script (tab delimited): setviewportsize320480 navigatehttp://bdconf.org/ Many other scripting options:https://sites.google.com/a/webpagetest.org/docs/using- webpagetest/scriptinghttps://sites.google.com/a/webpagetest.org/docs/using- webpagetest/scripting Figure out the viewport dimensions you want to simulate http://www.websitedimensions.com/

57. Akamai Confidential Summary

58. ©2012 Akamai Faster Forward TM 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

59. Akamai Confidential Performance Implications of Mobile Design Questions? Guy Podjarny @guypod guy@akamai.com http://guypo.com/