Optimizing for Mobile Performance

Presented at the Rich Web Experience in Fort Lauderdale, FL on 12/1/11.

Transcript

1. http://flic.kr/p/5DBgES Optimizing for Mobile Performance presented by Tim Kadlec at The Rich Web Experience 2011 in Fort Lauderdale, FL timkadlec.com @tkadlec
2. It’s a mobile world
3. http://flic.kr/p/68NZhL 5.6 billion mobile subscriptions 6.9 billion people
4. http://allthingsd.com/20111010/mobile-devices-seen-doubling-by-2020-as-non-phones-dominate-wireless-airwaves/ 12 billion by 2020!
5. http://flic.kr/p/7Pd9b9 More smart phones and tablets shipped than PCs
6. http://flic.kr/p/9w8eWL Mobile traffic will grow by 26x in 5 years
7. http://flic.kr/p/5ozJ6 25% mobile only in US 22% mobile only in UK
8. http://flic.kr/p/4T2Rwa 70%!
9. http://flic.kr/p/4rRmGv Things have changed....
10. http://flic.kr/p/53czUe Mobile is more than this....
11. http://flic.kr/p/6e7uqr Phones are used everywhere....
12. http://flic.kr/p/5PoENv ...for increasingly complex tasks
13. Source: http://bit.ly/qap5fw 2010: eBay mobile transactions were > $2 billion 2009: $600 million
14. Jeff Bezos (July 2010) In the last twelve months, customers around the world have ordered more than US $1 billion of products from Amazon using a mobile device. Source: http://bit.ly/oKcI3e
15. Source: http://www.lukew.com/ff/entry.asp?1361 Paypal: Up to $10 million mobile Total Payment Volume per day
16. http://flic.kr/p/5X1QeB
17. http://flic.kr/p/9trsE9 More m-commerce than e-commerce by 2015
18. http://flic.kr/p/3qHDNt If you’re not optimizing, you’re throwing money away
19. http://flic.kr/p/4vg5r4 Mobile users want fast experiences!
20. 71% of mobile users expect websites to load as quickly, almost as quickly or faster on their mobile phone, compared to the computer they use at home Source: http://bit.ly/w2Dg3W
21. In 2009, that number was 58% Source: http://bit.ly/w2Dg3W
22. <= 1 second 2 seconds 3 seconds 4 seconds 5 seconds > 5 seconds 30% 14% 21% 24% 11% 18% 12% How quickly should a mobile site load? Source: http://bit.ly/tB9Q3T
23. 25% 50% 75% 100% 2009 2011 20% 74% Percentage of people who will bounce after 5 seconds Source: http://bit.ly/viowVq
24. http://bit.ly/tVJpOJ Effect of delay on mobile
25. http://bit.ly/tVJpOJ Effect of delay on returning visits
26. Source: The business case for assuring the customer mobile Web experience
27. http://flic.kr/p/5ASnEz Your visitors notice!
28. Rollin Shelton Source: http://wapo.st/nXtqkd My default posture now, when wanting to check news sites, is to pretty much avoid The Post all together.
29. http://flic.kr/p/66vUy5 Phone rage
30. http://flic.kr/p/GYjsD So how are we doing?
31. http://mobile.httparchive.org/index.php HTTP Archive Mobile
34. Source: http://www.gomez.com/benchmarks/sitemap/?region=US_Benchmarks Retail and Banking
35. http://flic.kr/p/4mhKi5 Room for improvement
36. http://flic.kr/p/6e7uqr This is gonna hurt
37. Source: http://bit.ly/oxwKDG
38. Source: http://yhoo.it/nzZTMQ Latency sucks
39. Source: http://bit.ly/o6mTmp Just how bad is it?
40. Uh oh!
41. Reduce requests
42. http://flic.kr/p/8VoSGj CSS3
43. Sorry Office Depot
44. Image (1.23KB) Image (1.01KB) Image (137B) Image (155B)
45. -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px background-color: #0081db; background-image: -webkit-gradient(linear, left top, left bottom, from(#14a1f0), to (#0081db)); background-image: -webkit-linear-gradient(top, #14a1f0, #0081db); background-image: -moz-linear-gradient(top, #14a1f0, #0081db); background-image: -ms-linear-gradient(top, #14a1f0, #0081db); background-image: -o-linear-gradient(top, #14a1f0, #0081db); background-image: linear-gradient(top, #14a1f0, #0081db);
46. http://flic.kr/p/urBo No such thing as a silver bullet
47. http://flic.kr/p/4krww7 Replace images with Data URIs
48. They’re a little ugly... data:image/ png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAASCAMAAACQGyXoAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZ SBJbWFnZVJlYWR5ccllPAAAAUdQTFRFFxUOJiMMFBIOkYsCjIYDioQDGxkNk40CYVwHNDALgHoENTILHRoNJSIMb WgFnJYBnpcBJCEMiYMDKygMPzwKWlUHREAJSUUJlo8CgXsEkIoCGBYNmJECIh8NXFgHHx0NExEOp6AAcWwFjYcD RkMJcm0Fgn0EHRsNUEwIY14GpJ0AcGoFIiAMT0sITEgJKCUMHBoNpp8Al5ECjogCa2YGaWQGIB0Nd3IFmZMBFhMOJ yQMGhgNiIIDWVQHOjcKLSoLIyAMODQKKicMVVEIPToKd3EFQj4KenQEaGQGS0cJh4EDlY8CoJkBfHcEZWAGaGMG hX8DZ2IGo5wAi4UDopsBlY4CeHIFRUEJXFcHdG8FKSYMeHMEmpMBV1MISkYJfnkEf3oEc24FnZcBVFAIeXQEQ0AJNj MLmJIBYl0Hn5gBVlEIqKEAEhAOjBZoxgAAAG10Uk5T///////////////////////////////////////////////////////////////////////// /////////////////////////////////////////////////////////////////////// AC221EsAAAEWSURBVHjabNHlVwMxDADw3u1kbGPK3NhwGe7uvuE+3En+/8/k2h6sQD70pf3l9aUNQ0Q9dj5/ WWjFv8EQI2kAaJvA/ 7WTcKr513kgL9UkTcpar9En6ljHttBVgBFL6D4VeiI8TUAL1+ljMAQugxOZopPne3MWqY4LMCoavuEKUY3yoRC8kJYL2 FNnXCtCwaZL/QBB0mvw3YZXuF6dSC4Z4ynqgHRwl7anTzNZ4jFojJzTVaB96y4Fwx925iKp6Doy +XpzL354tvauaMJVKzRH66eCnqzULh8MYP+BguEm/hu46H2EOOKkgvYr/8nZ8tHbA9XhZiM+L8kpaJrOry/uuFRK +78n+DPNjVo1at4Hu2PuyZcAAwA2KbSDyyYFcAAAAABJRU5ErkJggg==
49. http://bit.ly/1nld1J ...but they don’t have to be hard
50. java -jar cssembed-x.y.z.jar -o styles_new.css styles.css
51. Inline JS & CSS (but be smart about it)
52. window.locationStorage.setItem(); window.locationStorage.getItem(); window.locationStorage.removeItem(); window.locationStorage.clear();
53. http://bit.ly/r0Xwq8 m.bing.com Desktop: 93kB iPad: 59kB iPhone: 198kb iPhone repeat: 30kb
54. _load:function(b){ var a=null; if(localStorage) try{a=localStorage.getItem(b)} catch(c){} return a }
55. <style data-rms="save" id="CUX.Keyframes.B8625FEE" rel="stylesheet" type="text/css"> ..... </style>
56. <script type="text/javascript"> RMS.Load('CUX.Keyframes.B8625FEE') </script>
57. Eliminate unnecessary redirects
58. m.domain.com
59. http://amzn.to/onTYpF Write better javascript (duh)
60. Source: http://bit.ly/qXrMqe Javascript on desktop
61. Source: http://bit.ly/oE8MK9 Javascript on mobile
62. Source: http://bit.ly/ot91Ee Don’t parse JS until needed 1kB of JS = 1ms
63. Use a script loader <script> $LAB .script("myScript.js") .script("bonusScript.js"); </script> http://labjs.com/ <script> $script(“myScript.js”); $script(“bonusScript.js”); </script> http://dustindiaz.com/scriptjs
64. Source: http://bit.ly/gpwaa Lazy-loading JS <html> ... <script id="lazy"> // Make sure you strip out (or replace) comment blocks in your JavaScript first. /* JavaScript of lazy module */ </script> <script> function lazyLoad() { var lazyElement = document.getElementById('lazy'); var lazyElementBody = lazyElement.innerHTML; var jsCode = stripOutCommentBlock(lazyElementBody); eval(jsCode); } </script> <div onclick=lazyLoad()> Lazy Load </div> </html>
65. http://googlecode.blogspot.com/2009/09/gmail-for-mobile-html5-series-reducing.html 200k of JavaScript held within a block comment adds 240ms during page load, whereas 200k of JavaScript that is parsed during page load added 2600 ms.
66. Source: http://bit.ly/p9NoOL Prefer touch over click 300/500ms delay for click events Penalty is consistent cross- platform
67. Gustave Flaubert There is no truth. There is only perception.
68. Asynchronous UIs
69. Alex MacCaw http://alexmaccaw.co.uk/posts/async_ui ...interfaces should be completely non- blocking. Interactions should be resolved instantly; there should be no loading messages or spinners.
70. Make use of AppCache
71. CACHE MANIFEST someJS.js someMoreJS.js styles.css /images/myGoodSide.png /images/myBadSide.png <html manifest="mySite.appcache"> AddType text/cache-manifest .appcache
72. CACHE MANIFEST CACHE someJS.js NETWORK login.php FALLBACK /online.php /offline.php
73. http://flic.kr/p/4vV38F A few gotchas...
74. A single 404 means nothing is cached http://flic.kr/p/9ZSGiM
75. Pages with manifest attribute automatically cached http://flic.kr/p/7p7raq
76. Manifest files must be changed for resources to update http://flic.kr/p/4xN7Mc
77. http://bit.ly/qX4pbf Confess.js
78. phantomjs confess.js http://functionsource.com
79. CACHE MANIFEST # This manifest was created by confess.js, http://github.com/jamesgpearce/ confess # # Time: Wed Apr 13 2011 15:40:27 GMT-0700 (PDT) # URL: http://functionsource.com # UA: Mozilla/5.0 (Macintosh; U; PPC Mac OS X; en-US) AppleWebKit/533.3 (KHTML, like Gecko) PhantomJS/1.1.0 Safari/533.3 # # Any console output generated by this page or app is shown immediately below. You'll need to remove this to create a valid manifest syntax. # [Start of console output] # [End of console output] CACHE: /javascripts/lib/jquery.js /javascripts/lib/underscore.js /javascripts/lib/backbone.js ........ http://functionsource.com/images/icons/rss.png http://functionsource.com/images/icons/podcast.png http://functionsource.com/images/icons/firehose.png NETWORK: *
80. http://flic.kr/p/6e7uqr manifestR
81. http://flic.kr/p/6e7uqr
82. A few AppCache resources http://www.html5rocks.com/tutorials/appcache/beginner/ http://appcachefacts.info/ http://www.webdirections.org/blog/get-offline/ http://www.stevesouders.com/blog/2011/10/03/improving- app-cache/
83. http://flic.kr/p/5N2tQ In the not-so-distant future... hopefully!
84. Source: http://www.w3.org/TR/netinfo-api/ Network Information API navigator.connection.type returns: unknown, ethernet, wifi, 2g, 3g, 4g, none supported! (kind of) returns: 0,1,2,3,4
85. http://flic.kr/p/XLMGv Battery life
86. http://flic.kr/p/6e7uqr Source: http://bit.ly/qXrMqe
87. Source: http://bit.ly/ny5IET
88. Source: http://bit.ly/nob5dd http://stevesouders.com/ms/
89. http://flic.kr/p/5gh6L2 Test. Rinse. Repeat.
90. http://flic.kr/p/Ruy9M Let’s look at some tools
91. Page Speed Online
95. Charles Proxy
97. Blaze.io
99. Mobile performance bookmarklet
100. Jdrop
102. http://flic.kr/p/sBbaN We need more data!
103. Joshua Bixby Source: http://bit.ly/mXUvR7 It took our community almost ten years to generate meaningful data around regular web performance. We don’t have that luxury with the mobile internet.
104. Experiment. Create. Share.
105. http://flic.kr/p/6e7uqr timkadlec.com @tkadlec