Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Optimizing for Mobile Performance

A9a379f2e92c7ded4564190c5b286b78?s=47 Tim Kadlec
December 01, 2011

Optimizing for Mobile Performance

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

A9a379f2e92c7ded4564190c5b286b78?s=128

Tim Kadlec

December 01, 2011
Tweet

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