Optimizing for Mobile Performance

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

32. None
33. None

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

92. None
93. None
94. None

95. Charles Proxy

96. None

97. Blaze.io

98. None

99. Mobile performance bookmarklet

100. Jdrop

101. None

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