![(lack of)Progressive Rendering[next page being loaded]flickr.com/photos/kevincollins/234678305/](https://image.slidesharecdn.com/webstock-20110217-110324174522-phpapp01/85/Website-performance-optimisation-15-320.jpg)
![Script DOM Elementvar se = document.createElement('script');se.src = 'http://anydomain.com/A.js';document.getElementsByTagName('head')[0].appendChild(se); script & page domains can differmay not preserve execution order](https://image.slidesharecdn.com/webstock-20110217-110324174522-phpapp01/85/Website-performance-optimisation-22-320.jpg)
![ControlJSa JavaScript module for making scripts load fastercontrol.js loads asyncvarcjsscript = document.createElement('script');cjsscript.src = "control.js";varcjssib = document.getElementsByTagName('script')[0];cjssib.parentNode.insertBefore(cjsscript, cjssib);](https://image.slidesharecdn.com/webstock-20110217-110324174522-phpapp01/85/Website-performance-optimisation-25-320.jpg)
Website performance optimisation
- 1. Web Performance Optimizationstevesouders.com/docs/webstock-20110217.pptxDisclaimer: This content does not necessarily reflect the opinions of my employer.flickr.com/photos/ddfic/722634166/
- 3. 2004
- 4. carsonified.com/blog/business/fred-wilsons-10-golden-principles-of-successful-web-apps/#1. Speed: “First and foremost, we believe that speed is more than a feature. Speed is the most important feature.”
- 7. Yahoo! 0.4 sec slower traffic 5-9%slideshare.net/stoyan/dont-make-me-wait-or-building-highperformance-web-applicationsslideshare.net/stoyan/yslow-20-presentation
- 8. blog.mozilla.com/metrics/category/website-optimization/…shaved 2.2 seconds off the average page load time and increased download conversions by 15.4%!
- 9. en.oreilly.com/velocity2009/public/schedule/detail/7709blog.mozilla.com/metrics/category/website-optimization/…shaved 2.2 seconds off the average page load time and increased download conversions by 15.4%!
- 12. Site speed in search rankScreen 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
- 13. WebPerformanceOptimizationWPOdrives trafficimproves UXincreases revenuereduces costsflickr.com/photos/pedromourapinheiro/3123885534/
- 14. What makes sites feel slow?flickr.com/photos/kevincollins/234678305/
- 15. (lack of)Progressive Rendering[next page being loaded]flickr.com/photos/kevincollins/234678305/
- 18. Progressive Enhancementdeliver HTMLdefer JSavoid DOMdecorate later
- 20. <script src="A.js"> blocks parallel downloads and rendering9 secs: IE 6-7, FF 3.0, Chr 1, Op 9-10, Saf 37 secs: IE 8-9, FF 3.6, Chr6, Saf 4Why focus on JavaScript?
- 21. Loading Scripts Without BlockingXHR EvalXHR InjectionScript in IframeScript DOM ElementScript Deferdocument.write Script Tag
- 22. Script DOM Elementvar se = document.createElement('script');se.src = 'http://anydomain.com/A.js';document.getElementsByTagName('head')[0].appendChild(se); script & page domains can differmay not preserve execution order
- 23. MeeboIframed JSvar iframe = document.createElement('iframe');document.body.appendChild(iframe);var doc = iframe.contentWindow.document;doc.open().write('<body onload="insertJS()">');doc.close();loads asynchronouslydelays parent’s load event: FF, Chr, Safgreat for 3rd party scriptsbetter for sandboxing & securityavoids iframe src roundtrip
- 24. GMail Mobile<script type="text/javascript">/*var ... */</script>get script DOM element's textremove commentseval() when invokedinline or iframeawesome for prefetching JS that might (not) be needed
- 25. ControlJSa JavaScript module for making scripts load fastercontrol.js loads asyncvarcjsscript = document.createElement('script');cjsscript.src = "control.js";varcjssib = document.getElementsByTagName('script')[0];cjssib.parentNode.insertBefore(cjsscript, cjssib);
- 26. ControlJSa JavaScript module for making scripts load fasterjust change HTMLinline & external scripts<script type="text/cjs" data-cjssrc="main.js"></script><script type="text/cjs">var name = getName();</script>
- 27. ControlJSa JavaScript module for making scripts load fasterasync downloadsdelays execution1st pass:if (IE || Opera) { new Image(); }else { document.createElement(‘object’); }2nd pass:external: document.createElement(‘script’);inline: window.execScript(sCode) or window.eval.call(window, sCode)
- 28. ControlJSa JavaScript module for making scripts load fasterdownloads without executing<script type="text/cjs" data-cjssrc="main.js” data-cjsexec=false><script>later (if needed):CJS.execScript(src);
- 29. ControlJSa JavaScript module for making scripts load fasterhandles (some) document.writeoverride document.write for each script
- 30. set SPAN innerHTML if there’s a write
- 31. parse out SCRIPT tags & add SCRIPT elembetter solutions:Aptimize – http://www.aptimize.com/
- 32. GhostWriter – http://digital-fulcrum.com/solutions /ghostwriter-complete-control/ControlJSa JavaScript module for making scripts load fastercontrol.js loads asyncjust change HTMLinline & external scriptsasync downloadsdelays executiondownloads w/ no executionhandles (some) document.write
- 33. ControlJSa JavaScript module for making scripts load fasterhttp://stevesouders.com/controljs/http://code.google.com/p/controljs/http://groups.google.com/group/controljs
- 42. to intrto intrTwitter iPhone appopen timeline
- 43. Twitter iPhone appexecute search
- 44. Twitter iPhone appopen timeline
- 50. speed mattersfocus on JavaScriptmore visibility into mobiletakeawaysflickr.com/photos/34771728@N00/361526991/
Editor's Notes
- #5: 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
- #9: “if we’re able to achieve a similar performance boost across ourothertoplanding pages, we’ll drive in excess of 60 million yearly Firefox downloads.”
- #10: This was a ~5 second speed up.
- #13: Time measurements from real users.
- #22: All of these allow for parallel downloads, but none of them allow for parallel JS execution – that's not possible (currently, WebKit is doing some stuff on that).
- #24: GMail Mobile: http://googlecode.blogspot.com/2009/09/gmail-for-mobile-html5-series-reducing.htmlSproutCore: http://blog.sproutcore.com/post/225219087/faster-loading-through-eval
- #25: GMail Mobile: http://googlecode.blogspot.com/2009/09/gmail-for-mobile-html5-series-reducing.htmlSproutCore: http://blog.sproutcore.com/post/225219087/faster-loading-through-eval