Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Mobile WPO Presented by Tim Kadlec http://www.flickr.com/photos/vlastula/300102949/Sunday, May 2...
It’s a Mobile World2 http://www.flickr.com/photos/ivyfield/4731067532/Sunday, May 29, 2011
5.6 billion mobile subscriptions 6.9 billion people3 http://www.flickr.com/...
More smart phones and tablets shipped than PCs4 http://www.flickr....
Mobile traffic will grow by 26x in 5 years5 http://www.flickr.com/photos/epsos/5591761716/S...
25% mobile only in US 22% mobile only in UK6 http://www.flickr.com/...
Things have changed...7 http://www.flickr.com/photos/spine/2261612821/Sunday, May 29, 2011
In the last twelve months, customers around the world have ordered more than US $1 billion of prod...
2010: eBay mobile transactions were > $2 billion 2009: 600 million9 Source: http://files.shareholder.com/dow...
If you’re not optimizing, you’re throwing money away10 http://www.flickr.com/photos/lisa_y...
Mobile users want fast experiences!11 http://www.flickr.com/photos/thatguyfromcchs08/230019...
58% of mobile users expect websites to load as quickly, almost as quickly or faster on their m...
73% of users are willing to wait a minute or less to complete a simple transaction - like chec...
14 Source: The business case for assuring the customer mobile Web experienceSunday, May 29, 2011
So how are we doing?15 http://www.flickr.com/photos/deepphoto/463648209/Sunday, May 29, 2011
HTTP Archive Mobile16 http://mobile.httparchive.org/index.phpSunday, May 29, 2011
17 Source: http://mobile.httparchive.org/trends.phpSunday, May 29, 2011
18 Source: http://mobile.httparchive.org/trends.phpSunday, May 29, 2011
Retail and Banking19 Source: http://www.gomez.com/benchmarks/sitemap/?region=US_BenchmarksSunday, ...
Definitely room for improvement20 http://www.flickr.com/photos/jonathansuzuki/219866765...
This Is Gonna Hurt21 http://www.flickr.com/photos/scottfeldstein/372141970/Sunday, May 29, 2011
22 http://www.pcworld.com/zoom?id=167391&page=1&zoomIdx=1Sunday, May 29, 2011
Latency sucks23 http://developer.yahoo.com/blogs/ydn/posts/2009/10/a_engineers_gui/Sunday, May 29, ...
Just how bad is it?24 http://www.yuiblog.com/blog/2010/04/08/analyzing-bandwidth-and-latency/Sunda...
Uh oh!25 http://developer.yahoo.com/blogs/ydn/posts/2009/10/a_engineers_gui/Sunday, May 29, 2011
Reduce Requests26Sunday, May 29, 2011
Replace images with Data URIs27 http://www.flickr.com/photos/orinrobertjohn/2189064194/Sunday, May 29...
They’re a little ugly... data:image/ png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAASCAMAAACQGyXoAAAAGXRFWHRTb2Z0d2FyZQ...
...but they don’t have to be hard29 http://www.nczonline.net/blog/2009/11/03/automatic-data-uri-embedd...
java -jar cssembed-x.y.z.jar -o styles_new.css styles.css30Sunday, May 29, 2011
Inline JS & CSS (but be smart about it)31Sunday, May 29, 2011
m.bing.com Desktop: 93kB iPad: 59kB iPhone: 198kb ...
_load:function(b){ var a=null; if(localStorage) ...
<style data-rms="save" id="CUX.Keyframes.B8625FEE" rel="stylesheet" type="text/css"> ..... </style...
<script type="text/javascript"> RMS.Load(CUX.Keyframes.B8625FEE) </script>35Sunday, May 29, 2011
Javascript on Desktop36 Source: http://ie.microsoft.com/testdrive/benchmarks/sunspider/default.h...
Javascript on Mobile37 Source: http://jeftek.com/1942/motorola-xoom-sunspider-results/Sunday, ...
Write Better Javascript (duh)38 http://www.amazon....
Don’t parse JS until needed 1kB of JS = 1ms39 Source: http://code.google.co...
Use a script loader <script> $LAB .script("myScript.js") .sc...
Lazy-loading JS <html> ... <script id="lazy"> // Make sure you str...
Prefer touch over click 300/500ms delay for click events ...
Make use of AppCache43Sunday, May 29, 2011
CACHE MANIFEST someJS.js someMoreJS.js styles.css ...
CACHE MANIFEST CACHE someJS.js NETWORK ...
Confess.js46 https://github.com/jamesgpearce/confessSunday, May 29, 2011
Confess.js phantomjs confess.js http://functionsource.com47Sunday, May 29, 2011
CACHE MANIFEST # This manifest was created by confess.js, http://github.com/jamesgpearce/ confess ...
A few AppCache resources http://www.html5rocks.com/tutorials/ appcache/beginner/ http://appcach...
Test. Rinse. Repeat.50 http://www.flickr.com/photos/jurvetson/2798315677/Sunday, May 29, 2011
Let’s look at some tools51 http://www.flickr.com/photos/olibac/560079597/Sunday, May 29,...
Page Speed Online52Sunday, May 29, 2011
Sunday, May 29, 2011
Sunday, May 29, 2011
Charles Proxy55Sunday, May 29, 2011
56Sunday, May 29, 2011
Blaze.io57Sunday, May 29, 2011
Sunday, May 29, 2011
Mobile Performance Bookmarklet59Sunday, May 29, 2011
Jdrop60Sunday, May 29, 2011
61Sunday, May 29, 2011
We need more data!62Sunday, May 29, 2011
It took our community almost ten years to generate meaningful data around regular web performance. W...
Experiment. Create. Share.64Sunday, May 29, 2011
Thank you! Tim Kadlec http://www.timkadlec.com Twitter: @tkadlecSunday, May 29, 2011
Upcoming SlideShare
Loading in …5
×

Mobile WPO

24,427 views

Published on

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

Published in: Technology
no profile picture user
Show More

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 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

×