Your SlideShare is downloading. ×
0
Mobile WPO
Mobile WPO
Mobile WPO
Mobile WPO
Mobile WPO
Mobile WPO
Mobile WPO
Mobile WPO
Mobile WPO
Mobile WPO
Mobile WPO
Mobile WPO
Mobile WPO
Mobile WPO
Mobile WPO
Mobile WPO
Mobile WPO
Mobile WPO
Mobile WPO
Mobile WPO
Mobile WPO
Mobile WPO
Mobile WPO
Mobile WPO
Mobile WPO
Mobile WPO
Mobile WPO
Mobile WPO
Mobile WPO
Mobile WPO
Mobile WPO
Mobile WPO
Mobile WPO
Mobile WPO
Mobile WPO
Mobile WPO
Mobile WPO
Mobile WPO
Mobile WPO
Mobile WPO
Mobile WPO
Mobile WPO
Mobile WPO
Mobile WPO
Mobile WPO
Mobile WPO
Mobile WPO
Mobile WPO
Mobile WPO
Mobile WPO
Mobile WPO
Mobile WPO
Mobile WPO
Mobile WPO
Mobile WPO
Mobile WPO
Mobile WPO
Mobile WPO
Mobile WPO
Mobile WPO
Mobile WPO
Mobile WPO
Mobile WPO
Mobile WPO
Mobile WPO
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Mobile WPO

14,720

Published on

Presented for the online Web Performance Summit on May 25, 2011.

Presented for the online Web Performance Summit on May 25, 2011.

Published in: Technology
3 Comments
35 Likes
Statistics
Notes
No Downloads
Views
Total Views
14,720
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
321
Comments
3
Likes
35
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Mobile WPO Presented by Tim Kadlec http://www.flickr.com/photos/vlastula/300102949/Sunday, May 29, 2011
  • 2. It’s a Mobile World2 http://www.flickr.com/photos/ivyfield/4731067532/Sunday, May 29, 2011
  • 3. 5.6 billion mobile subscriptions 6.9 billion people3 http://www.flickr.com/photos/wwworks/2222523486/in/photostream/Sunday, May 29, 2011
  • 4. More smart phones and tablets shipped than PCs4 http://www.flickr.com/photos/wwworks/4472384764/Sunday, May 29, 2011
  • 5. Mobile traffic will grow by 26x in 5 years5 http://www.flickr.com/photos/epsos/5591761716/Sunday, May 29, 2011
  • 6. 25% mobile only in US 22% mobile only in UK6 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 million9 Source: http://files.shareholder.com/downloads/ebay/1156981139x0x435896/9bd99676-b782-4784-87de-2899abe14a6d/eBay_Q42010EarningsRelease_Draft011911_FINAL.pdfSunday, May 29, 2011
  • 10. If you’re not optimizing, you’re throwing money away10 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 home12Sunday, May 29, 2011
  • 13. 73% of users are willing to wait a minute or less to complete a simple transaction - like checking their bank balance13Sunday, May 29, 2011
  • 14. 14 Source: The business case for assuring the customer mobile Web experienceSunday, May 29, 2011
  • 15. So how are we doing?15 http://www.flickr.com/photos/deepphoto/463648209/Sunday, May 29, 2011
  • 16. HTTP Archive Mobile16 http://mobile.httparchive.org/index.phpSunday, May 29, 2011
  • 17. 17 Source: http://mobile.httparchive.org/trends.phpSunday, May 29, 2011
  • 18. 18 Source: http://mobile.httparchive.org/trends.phpSunday, May 29, 2011
  • 19. Retail and Banking19 Source: http://www.gomez.com/benchmarks/sitemap/?region=US_BenchmarksSunday, May 29, 2011
  • 20. Definitely room for improvement20 http://www.flickr.com/photos/jonathansuzuki/2198667658/Sunday, May 29, 2011
  • 21. This Is Gonna Hurt21 http://www.flickr.com/photos/scottfeldstein/372141970/Sunday, May 29, 2011
  • 22. 22 http://www.pcworld.com/zoom?id=167391&page=1&zoomIdx=1Sunday, May 29, 2011
  • 23. Latency sucks23 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 Requests26Sunday, May 29, 2011
  • 27. Replace images with Data URIs27 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==28Sunday, May 29, 2011
  • 29. ...but they don’t have to be hard29 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.css30Sunday, May 29, 2011
  • 31. Inline JS & CSS (but be smart about it)31Sunday, May 29, 2011
  • 32. m.bing.com Desktop: 93kB iPad: 59kB iPhone: 198kb iPhone repeat: 30kb32 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 }33Sunday, May 29, 2011
  • 34. <style data-rms="save" id="CUX.Keyframes.B8625FEE" rel="stylesheet" type="text/css"> ..... </style>34Sunday, May 29, 2011
  • 35. <script type="text/javascript"> RMS.Load(CUX.Keyframes.B8625FEE) </script>35Sunday, May 29, 2011
  • 36. Javascript on Desktop36 Source: http://ie.microsoft.com/testdrive/benchmarks/sunspider/default.htmlSunday, May 29, 2011
  • 37. Javascript on Mobile37 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/059680279XSunday, May 29, 2011
  • 39. Don’t parse JS until needed 1kB of JS = 1ms39 Source: http://code.google.com/speed/page-speed/docs/mobile.htmlSunday, 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/scriptjs40Sunday, 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.htmlSunday, 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/fastbuttonSunday, May 29, 2011
  • 43. Make use of AppCache43Sunday, 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 example44Sunday, May 29, 2011
  • 45. CACHE MANIFEST CACHE someJS.js NETWORK login.php FALLBACK /online.php /offline.php A bit more complicated45Sunday, May 29, 2011
  • 46. Confess.js46 https://github.com/jamesgpearce/confessSunday, May 29, 2011
  • 47. Confess.js phantomjs confess.js http://functionsource.com47Sunday, 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. Youll 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/49Sunday, 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 tools51 http://www.flickr.com/photos/olibac/560079597/Sunday, May 29, 2011
  • 52. Page Speed Online52Sunday, May 29, 2011
  • 53. Sunday, May 29, 2011
  • 54. Sunday, May 29, 2011
  • 55. Charles Proxy55Sunday, May 29, 2011
  • 56. 56Sunday, May 29, 2011
  • 57. Blaze.io57Sunday, May 29, 2011
  • 58. Sunday, May 29, 2011
  • 59. Mobile Performance Bookmarklet59Sunday, May 29, 2011
  • 60. Jdrop60Sunday, May 29, 2011
  • 61. 61Sunday, May 29, 2011
  • 62. We need more data!62Sunday, 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 Bixby63 Source: http://www.webperformancetoday.com/2010/07/22/mobile-web-performance-desperately-seeking-data/Sunday, May 29, 2011
  • 64. Experiment. Create. Share.64Sunday, May 29, 2011
  • 65. Thank you! Tim Kadlec http://www.timkadlec.com Twitter: @tkadlecSunday, May 29, 2011

×