Successfully reported this slideshow.

Mobile WPO

34

Share

Loading in …3
×
1 of 65
1 of 65

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

Mobile WPO

  1. Mobile WPO Presented by Tim Kadlec http://www.flickr.com/photos/vlastula/300102949/ Sunday, May 29, 2011
  2. It’s a Mobile World 2 http://www.flickr.com/photos/ivyfield/4731067532/ Sunday, May 29, 2011
  3. 5.6 billion mobile subscriptions 6.9 billion people 3 http://www.flickr.com/photos/wwworks/2222523486/in/photostream/ Sunday, May 29, 2011
  4. More smart phones and tablets shipped than PCs 4 http://www.flickr.com/photos/wwworks/4472384764/ Sunday, May 29, 2011
  5. Mobile traffic will grow by 26x in 5 years 5 http://www.flickr.com/photos/epsos/5591761716/ Sunday, May 29, 2011
  6. 25% mobile only in US 22% mobile only in UK 6 http://www.flickr.com/photos/perspective/49671901/ Sunday, May 29, 2011
  7. Things have changed... 7 http://www.flickr.com/photos/spine/2261612821/ Sunday, May 29, 2011
  8. In the last twelve months, customers around the world have ordered more than US $1 billion of products from Amazon using a mobile device. - Jeff Bezos (July 2010) 8 Source: http://phx.corporate-ir.net/phoenix.zhtml?c=97664&p=irol-newsArticle&ID=1451041&highlight= Sunday, May 29, 2011
  9. 2010: eBay mobile transactions were > $2 billion 2009: 600 million 9 Source: http://files.shareholder.com/downloads/ebay/1156981139x0x435896/9bd99676-b782-4784-87de-2899abe14a6d/eBay_Q42010EarningsRelease_Draft011911_FINAL.pdf Sunday, May 29, 2011
  10. If you’re not optimizing, you’re throwing money away 10 http://www.flickr.com/photos/lisa_yarost/1592436195/in/photostream/ Sunday, May 29, 2011
  11. Mobile users want fast experiences! 11 http://www.flickr.com/photos/thatguyfromcchs08/2300190277/ Sunday, May 29, 2011
  12. 58% 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 12 Sunday, May 29, 2011
  13. 73% of users are willing to wait a minute or less to complete a simple transaction - like checking their bank balance 13 Sunday, May 29, 2011
  14. 14 Source: The business case for assuring the customer mobile Web experience Sunday, May 29, 2011
  15. So how are we doing? 15 http://www.flickr.com/photos/deepphoto/463648209/ Sunday, May 29, 2011
  16. HTTP Archive Mobile 16 http://mobile.httparchive.org/index.php Sunday, May 29, 2011
  17. 17 Source: http://mobile.httparchive.org/trends.php Sunday, May 29, 2011
  18. 18 Source: http://mobile.httparchive.org/trends.php Sunday, May 29, 2011
  19. Retail and Banking 19 Source: http://www.gomez.com/benchmarks/sitemap/?region=US_Benchmarks Sunday, May 29, 2011
  20. Definitely room for improvement 20 http://www.flickr.com/photos/jonathansuzuki/2198667658/ Sunday, May 29, 2011
  21. This Is Gonna Hurt 21 http://www.flickr.com/photos/scottfeldstein/372141970/ Sunday, May 29, 2011
  22. 22 http://www.pcworld.com/zoom?id=167391&page=1&zoomIdx=1 Sunday, May 29, 2011
  23. Latency sucks 23 http://developer.yahoo.com/blogs/ydn/posts/2009/10/a_engineers_gui/ Sunday, May 29, 2011
  24. Just how bad is it? 24 http://www.yuiblog.com/blog/2010/04/08/analyzing-bandwidth-and-latency/ Sunday, May 29, 2011
  25. Uh oh! 25 http://developer.yahoo.com/blogs/ydn/posts/2009/10/a_engineers_gui/ Sunday, May 29, 2011
  26. Reduce Requests 26 Sunday, May 29, 2011
  27. Replace images with Data URIs 27 http://www.flickr.com/photos/orinrobertjohn/2189064194/ Sunday, May 29, 2011
  28. 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== 28 Sunday, May 29, 2011
  29. ...but they don’t have to be hard 29 http://www.nczonline.net/blog/2009/11/03/automatic-data-uri-embedding-in-css-files/ Sunday, May 29, 2011
  30. java -jar cssembed-x.y.z.jar -o styles_new.css styles.css 30 Sunday, May 29, 2011
  31. Inline JS & CSS (but be smart about it) 31 Sunday, May 29, 2011
  32. m.bing.com Desktop: 93kB iPad: 59kB iPhone: 198kb iPhone repeat: 30kb 32 http://www.stevesouders.com/blog/2011/03/14/mobile-comparison-of-top-11/ Sunday, May 29, 2011
  33. _load:function(b){ var a=null; if(localStorage) try{a=localStorage.getItem(b)} catch(c){} return a } 33 Sunday, May 29, 2011
  34. <style data-rms="save" id="CUX.Keyframes.B8625FEE" rel="stylesheet" type="text/css"> ..... </style> 34 Sunday, May 29, 2011
  35. <script type="text/javascript"> RMS.Load('CUX.Keyframes.B8625FEE') </script> 35 Sunday, May 29, 2011
  36. Javascript on Desktop 36 Source: http://ie.microsoft.com/testdrive/benchmarks/sunspider/default.html Sunday, May 29, 2011
  37. Javascript on Mobile 37 Source: http://jeftek.com/1942/motorola-xoom-sunspider-results/ Sunday, May 29, 2011
  38. Write Better Javascript (duh) 38 http://www.amazon.com/Performance-JavaScript-Faster-Application-Interfaces/dp/059680279X Sunday, May 29, 2011
  39. Don’t parse JS until needed 1kB of JS = 1ms 39 Source: http://code.google.com/speed/page-speed/docs/mobile.html Sunday, May 29, 2011
  40. 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 40 Sunday, May 29, 2011
  41. 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> 41 Source: http://googlecode.blogspot.com/2009/09/gmail-for-mobile-html5-series-reducing.html Sunday, May 29, 2011
  42. Prefer touch over click 300/500ms delay for click events Penalty is consistent cross- platform Remember - perception is important! 42 Source: http://pcapperf.appspot.com/fastbutton Sunday, May 29, 2011
  43. Make use of AppCache 43 Sunday, May 29, 2011
  44. CACHE MANIFEST someJS.js someMoreJS.js styles.css /images/myGoodSide.png /images/myBadSide.png <html manifest="mySite.appcache"> AddType text/cache-manifest .appcache Simple example 44 Sunday, May 29, 2011
  45. CACHE MANIFEST CACHE someJS.js NETWORK login.php FALLBACK /online.php /offline.php A bit more complicated 45 Sunday, May 29, 2011
  46. Confess.js 46 https://github.com/jamesgpearce/confess Sunday, May 29, 2011
  47. Confess.js phantomjs confess.js http://functionsource.com 47 Sunday, May 29, 2011
  48. 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: * Sunday, May 29, 2011
  49. A few AppCache resources http://www.html5rocks.com/tutorials/ appcache/beginner/ http://appcachefacts.info/ 49 Sunday, May 29, 2011
  50. Test. Rinse. Repeat. 50 http://www.flickr.com/photos/jurvetson/2798315677/ Sunday, May 29, 2011
  51. Let’s look at some tools 51 http://www.flickr.com/photos/olibac/560079597/ Sunday, May 29, 2011
  52. Page Speed Online 52 Sunday, May 29, 2011
  53. Sunday, May 29, 2011
  54. Sunday, May 29, 2011
  55. Charles Proxy 55 Sunday, May 29, 2011
  56. 56 Sunday, May 29, 2011
  57. Blaze.io 57 Sunday, May 29, 2011
  58. Sunday, May 29, 2011
  59. Mobile Performance Bookmarklet 59 Sunday, May 29, 2011
  60. Jdrop 60 Sunday, May 29, 2011
  61. 61 Sunday, May 29, 2011
  62. We need more data! 62 Sunday, May 29, 2011
  63. 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. - Joshua Bixby 63 Source: http://www.webperformancetoday.com/2010/07/22/mobile-web-performance-desperately-seeking-data/ Sunday, May 29, 2011
  64. Experiment. Create. Share. 64 Sunday, May 29, 2011
  65. Thank you! Tim Kadlec http://www.timkadlec.com Twitter: @tkadlec Sunday, May 29, 2011

×