Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
High Performance Mobile Web Optimization
1. High Performance Mobile stevesouders.com/docs/sfsv-webperf-20110830.pptx Disclaimer: This content does not necessarily reflect the opinions of my employer.
15. Site speed in search rank Screen shot of blog post …we've decided to take site speed into account in our search rankings. googlewebmastercentral.blogspot.com/2010/04/using-site-speed-in-web-search-ranking.html
33. 1. Make fewer HTTP requests 2. Use a CDN 3. Add an Expires header 4. Gzipcomponents 5. Put stylesheets at the top 6. Put scripts at the bottom 7. Avoid CSS expressions 8. Make JS and CSS external 9. Reduce DNS lookups 10. Minify JS 11. Avoid redirects 12. Remove duplicate scripts 13. Configure ETags 14. Make AJAX cacheable 14 Rules
34. 1. Make fewer HTTP requests 2. Use a CDN 3. Add an Expires header 4. Gzipcomponents 5. Put stylesheets at the top 6. Put scripts at the bottom 7. Avoid CSS expressions 8. Make JS and CSS external 9. Reduce DNS lookups 10. Minify JS 11. Avoid redirects 12. Remove duplicate scripts 13. Configure ETags 14. Make AJAX cacheable 14 Rules
35. 1. Make fewer HTTP requests 2. Use a CDN 3. Add an Expires header 4. Gzipcomponents 5. Put stylesheets at the top 6. Put scripts at the bottom 7. Avoid CSS expressions 8. Make JS and CSS external 9. Reduce DNS lookups 10. Minify JS 11. Avoid redirects 12. Remove duplicate scripts 13. Configure ETags 14. Make AJAX cacheable 14 Rules
36. Splitting the initial payload Loading scripts without blocking Coupling asynchronous scripts Positioning inline scripts Sharding dominant domains Flushing the document early Using iframes sparingly Simplifying CSS Selectors Understanding Ajax performance Doug Crockford Creating responsive web apps Ben Galbraith, Dion Almaer Writing efficient JavaScript Nicholas Zakas Scaling with Comet Dylan Schiemann Going beyond gzipping Tony Gentilcore Optimizing images StoyanStefanov, Nicole Sullivan
37. Splitting the initial payload Loading scripts without blocking Coupling asynchronous scripts Positioning inline scripts Sharding dominant domains Flushing the document early Using iframes sparingly Simplifying CSS Selectors Understanding Ajax performance Doug Crockford Creating responsive web apps Ben Galbraith, Dion Almaer Writing efficient JavaScript Nicholas Zakas Scaling with Comet Dylan Schiemann Going beyond gzipping Tony Gentilcore Optimizing images StoyanStefanov, Nicole Sullivan
38. Splitting the initial payload Loading scripts without blocking Coupling asynchronous scripts Positioning inline scripts Sharding dominant domains Flushing the document early Using iframes sparingly Simplifying CSS Selectors Understanding Ajax performance Doug Crockford Creating responsive web appsBen Galbraith, Dion Almaer Writing efficient JavaScript Nicholas Zakas Scaling with Comet Dylan Schiemann Going beyond gzipping Tony Gentilcore Optimizing images StoyanStefanov, Nicole Sullivan
44. GMail Mobile <script type="text/javascript"> /* var ... */ </script> get script DOM element's text remove comments eval() when invoked awesome for prefetching JS that might (not) be needed http://goo.gl/l5ZLQ
45. ControlJSa JavaScript module for making scripts load faster just change HTML inline & external scripts <script type="text/cjs" data-cjssrc="main.js"> </script> <script type="text/cjs"> var name = getName(); </script>
46. ControlJSa JavaScript module for making scripts load faster download without executing <script type="text/cjs" data-cjssrc="main.js” data-cjsexec=false> <script> Later if/when needed: CJS.execScript(src);
51. app cache gotchas html docs w/ manifest are cached 404 => nothing is cached size: 5MB+ must rev manifest to update resources update is served on 2nd reload (?!?!) flickr.com/photos/97657657@N00/1918688483/
52. app cache reload 1 2 push app logo.gif = user loads app app cache is empty fetch manifest fetch logo.gif app cache = user sees 3 4 5 push app logo.gif = rev manifest user loads app app cache = user sees fetch manifest fetch logo.gif app cache = user loads app again app cache = user sees fetch manifest (304)
53. load twice workaround window.applicationCache.addEventListener('updateready', function(e) { if ( window.applicationCache.status== window.applicationCache.UPDATEREADY) { if ( confirm(“Load new content?”) ) { ... http://www.webdirections.org/blog/get-offline/ http://www.html5rocks.com/en/tutorials/appcache/beginner/ flickr.com/photos/presley_m/5152304885/
54. localStorage window.localStorage: setItem() getItem() removeItem() clear() also sessionStorage all popular browsers, 5MB max http://dev.w3.org/html5/webstorage/ http://diveintohtml5.org/storage.html flickr.com/photos/bryanpearson/564703455/
55. localStorage as cache 1st doc: write JS & CSS blocks to localStorage JUX.UXBaseControls.252CB7BF: (function(){... JUX.FrameworkCore.A39F6425: (function(){... set cookie with entries & version RMSM=JUX.UXBaseControls.252CB7BF~ JUX.FrameworkCore.A39F6425~ later docs: read JS & CSS from localStorage script.text = localStorage.getItem(JUX.UXBaseControls.252CB7BF) http://stevesouders.com/blog/2011/03/28/storager-case-study-bing-google/ flickr.com/photos/nelsoncruz/431244400/
56. there’s more audio & video tags WebSockets onTouchEnd instead of onClick History <a ping requestAnimationFrame– not timers native JSON parse/stringify flickr.com/photos/dualphoto/2609096047/
57. Thanks to… Max Firtman Tony Gentilcore Josh Fraser Kyle Scholz StoyanStefanov Lindsey Simon Annie Sullivan Tim Kadlec Paul Irish Brad Neuberg flickr.com/photos/robertvega/3944132320/
Fred Wilson is Managing Partner of two venture capital firms, Flatiron Partners (Yoyodyne, Geocities) and Union Square Ventures (Twitter, delicious,Etsy, Feedburner).SpeedInstant utilitySoftware is mediaLess is moreMake it programmableMake it personalRESTfulDiscoverabilityCleanPlayful
“if we’re able to achieve a similar performance boost across ourothertoplanding pages, we’ll drive in excess of 60 million yearly Firefox downloads.”
Generallyasync & defer scripts start downloading immediately. I wish they’d wait, esp. defer scripts, so they don’t hog connections from the limited pool.
