Downloaded 322 times
![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](https://image.slidesharecdn.com/mobilewposlides-110529144950-phpapp02/85/Mobile-WPO-48-320.jpg)
Uploaded byTim Kadlec
Mobile WPO
The document discusses optimizing websites for mobile users. It notes that mobile traffic is growing significantly as more people use smartphones and tablets. However, many websites still have poor performance on mobile devices. The document provides tips for improving mobile performance, such as reducing the number of server requests through image sprites and data URIs, inlineing CSS and JavaScript, lazy loading scripts, and using a cache manifest to enable offline browsing. Faster load times and a good user experience are critical for mobile users.
More Related Content
Mobile WPO
- 1. Mobile WPO Presentedby Tim Kadlec http://www.flickr.com/photos/vlastula/300102949/ Sunday, May 29, 2011
- 2. It’s a MobileWorld 2 http://www.flickr.com/photos/ivyfield/4731067532/ Sunday, May 29, 2011
- 3. 5.6 billion mobilesubscriptions 6.9 billion people 3 http://www.flickr.com/photos/wwworks/2222523486/in/photostream/ Sunday, May 29, 2011
- 4. More smart phonesand tablets shipped than PCs 4 http://www.flickr.com/photos/wwworks/4472384764/ Sunday, May 29, 2011
- 5. Mobile traffic willgrow by 26x in 5 years 5 http://www.flickr.com/photos/epsos/5591761716/ Sunday, May 29, 2011
- 6. 25% mobile onlyin 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 lasttwelve 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 mobiletransactions 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 notoptimizing, you’re throwing money away 10 http://www.flickr.com/photos/lisa_yarost/1592436195/in/photostream/ Sunday, May 29, 2011
- 11. Mobile users wantfast experiences! 11 http://www.flickr.com/photos/thatguyfromcchs08/2300190277/ Sunday, May 29, 2011
- 12. 58% of mobileusers 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 usersare 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 arewe 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 forimprovement 20 http://www.flickr.com/photos/jonathansuzuki/2198667658/ Sunday, May 29, 2011
- 21. This Is GonnaHurt 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 badis 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, May29, 2011
- 27. Replace images withData URIs 27 http://www.flickr.com/photos/orinrobertjohn/2189064194/ Sunday, May 29, 2011
- 28. They’re a littleugly... 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’thave 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 JSuntil needed 1kB of JS = 1ms 39 Source: http://code.google.com/speed/page-speed/docs/mobile.html Sunday, May 29, 2011
- 40. Use a scriptloader <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 overclick 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 ofAppCache 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 AppCacheresources 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 atsome 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, May29, 2011
- 56.
- 57.
- 58. Sunday, May 29,2011
- 59. Mobile Performance Bookmarklet 59 Sunday,May 29, 2011
- 60.
- 61.
- 62. We need moredata! 62 Sunday, May 29, 2011
- 63. It took ourcommunity 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