1. Even Faster Web Sites stevesouders.com/docs/atmedia-20100611.pptx Disclaimer: This content does not necessarily reflect the opinions of my employer. flickr.com/photos/ddfic/722634166/

2. flickr.com/photos/bekahstargazing/318930460/

3. the importance of frontend performance 9% 91% 17% 83% iGoogle, primed cache iGoogle, empty cache http://www.flickr.com/photos/minami/2458184654/

4. Make fewer HTTP requests Use a CDN Add an Expires header Gzip components Put stylesheets at the top Put scripts at the bottom Avoid CSS expressions Make JS and CSS external Reduce DNS lookups Minify JS Avoid redirects Remove duplicate scripts Configure ETags Make AJAX cacheable 14 Rules

5. Even Faster Web Sites 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...................Stoyan Stefanov, Nicole Sullivan flickr.com/photos/motionblur/3049984012/

6. 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. en.oreilly.com/velocity2009/public/schedule/detail/8523

8. en.oreilly.com/velocity2009/public/schedule/detail/8523

9. Yahoo! 0.4 sec slower traffic  5-9% slideshare.net/stoyan/dont-make-me-wait-or-building-highperformance-web-applications slideshare.net/stoyan/yslow-20-presentation

10. blog.mozilla.com/metrics/category/website-optimization/ …shaved 2.2 seconds off the average page load time and increased download conversions by 15.4%!

11. en.oreilly.com/velocity2009/public/schedule/detail/7709 blog.mozilla.com/metrics/category/website-optimization/ …shaved 2.2 seconds off the average page load time and increased download conversions by 15.4%!

12. en.oreilly.com/velocity2008/public/schedule/detail/3632

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

15. Both combine scripts combine stylesheets add an Expires header gzip responses put stylesheets at the top put scripts at the bottom avoid CSS expressions make JS and CSS external reduce DNS lookups minify JS and CSS avoid redirects remove duplicate scripts make Ajax cacheable reduce cookie size use cookie-free domains don't scale images YSlow use CSS sprites use a CDN configure ETags use GET for Ajax requests reduce # of DOM elements no 404s avoid image filters optimize favicon Page Speed defer loading JS remove unused CSS use efficient CSS selectors optimize images optimize order of CSS & JS shard domains leverage proxy caching

20. Web Performance Optimization WPO drives traffic improves UX increases revenue reduces costs flickr.com/photos/pedromourapinheiro/3123885534/

21. What makes sites feel slow? http://www.flickr.com/photos/kevincollins/234678305/

22. (lack of) Progressive Rendering [next page being loaded] http://www.flickr.com/photos/kevincollins/234678305/

23. Search

24. Sports

25. News

26. Shopping

31. Progressive Enhancement deliver HTML defer JS avoid DOM decorate later

32. Progressive Enhancement  Progressive Rendering

33. <script src="A.js"> blocks parallel downloads and rendering 9 secs: IE 6-7, FF 3.0, Chr 1, Op 9-10, Saf 3 7 secs: IE 8, FF 3.5, Chr3, Saf 4 Why focus on JavaScript?

34. 29% avg 229 K avg initial payload and execution

35. split the initial payload split your JavaScript between what's needed to render the page and everything else defer "everything else" split manually (Page Speed), automatically (Microsoft Doloto) load scripts without blocking http://www.flickr.com/photos/devcentre/108032900/

36. Loading Scripts Without Blocking XHR Eval XHR Injection Script in Iframe Script DOM Element Script Defer document.write Script Tag

37. XHR Eval varxhrObj = getXHRObject(); xhrObj.onreadystatechange = function() { if ( xhrObj.readyState != 4 ) return; eval(xhrObj.responseText); }; xhrObj.open('GET', 'A.js', true); xhrObj.send(''); script & page must be same domain massage script?

38. Script DOM Element var se = document.createElement('script'); se.src = 'http://anydomain.com/A.js'; document.getElementsByTagName('head') [0].appendChild(se); script & page domains can differ no need to massage JavaScript may not preserve execution order

39. GMail Mobile <script type="text/javascript"> /* var ... */ </script> get script DOM element's text remove comments eval() when invoked inline or iframe awesome for prefetching JS that might (not) be needed

41. window.setTimeout( function(){ var a=document.createElement("script"); a.src="/extern_js/f/CgJlbhz8US8_w.js"; (document.getElementById("xjsd")|| document.body).appendChild(a);}, 0); Google Search

42. Bootloader.setResourceMap( {"CDYbm": {"name":"js32kskxvl4c8w0848.pkg.js", "type":"js", "src":"http:...1fakc64i.js"},...}); var c=a ? document.body : document.getElementsByTagName('head')[0]; var d=document.createElement('script'); d.type='text/javascript'; d.src=f; c.appendChild(d); Facebook

43. YUI.presentation.lazyScriptList = ["http://l.yimg.com/a/combo?arc/yui/substitute_0.1.9.js&arc/yui/oop_0.1.10.js&[...58 more!...]"]; d = w.document; h = d.getElementsByTagName("head")[0]; n = d.createElement("script"), n.src = url; h.appendChild(n); Yahoo! FP

44. <script src="http://bits.wikimedia.org/skins-1.5/common/wikibits.js?281c" type="text/javascript"></script> <script src="http://bits.wikimedia.org/skins-1.5/common/jquery.min.js?281c" type="text/javascript"></script> <script src="http://bits.wikimedia.org/skins-1.5/common/ajax.js?281c" type="text/javascript"></script> <script src="http://bits.wikimedia.org/skins-1.5/common/mwsuggest.js?281c" type="text/javascript"></script> <script src="http://bits.wikimedia.org/w/extensions/UsabilityInitiative/js/plugins.combined.min.js?281c" type="text/javascript"></script> <script src="http://bits.wikimedia.org/w/extensions/UsabilityInitiative/Vector/Vector.combined.min.js?281c" type="text/javascript"></script> <script src="http://upload.wikimedia.org/centralnotice/wikipedia/en/centralnotice.js?281c" type="text/javascript"></script> <script src="/w/index.php?title=-&amp;action=raw&amp;gen=js&amp;useskin=vector&amp;281c" type="text/javascript"></script> </head> Wikipedia

45. <script src="/js/jquery-1.4.2.js"></script> </body> </html> subsequent page: <script src="/js/jquery-1.4.2.js"></script> <script src="/js/toChecklist.js"></script> <script src="/js/tocs.js"></script> </body> </html> Craigslist

46. <script src="http://include.ebaystatic.com/v4js/en_US/e673/SYS-RA_vjo_e67311309442_1_en_US.js"></script> <script src="http://include.ebaystatic.com/v4js/en_US/e673/GH-RA_ReskinEbay_e67311309442_1_en_US.js"></script> <script src="http://include.ebaystatic.com/v4js/en_US/e673/SYS-RA_vjo_e67311252543_opta_en_US.js"> <script src="http://include.ebaystatic.com/v4js/en_US/e673/CCHP_HomepageV4_SLDR_e67311252543_6_en_US.js"></script> eBay

47. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js" type="text/javascript"></script> <script src="http://a3.twimg.com/a/1276018586/javascripts/twitter.js?1276019402" type="text/javascript"></script> <script src="http://a1.twimg.com/a/1276018586/javascripts/lib/jquery.tipsy.min.js?1276019402" type="text/javascript"></script> <script src='http://maps.google.com/maps/api/js?sensor=false' type="text/javascript"></script> <script src="http://a1.twimg.com/a/1276018586/javascripts/lib/gears_init.js?1276019402" type="text/javascript"></script> <script src="http://a3.twimg.com/a/1276018586/javascripts/geov1.js?1276019402" type="text/javascript"></script> <script src="http://a1.twimg.com/a/1276018586/javascripts/api.js?1276019402" type="text/javascript"></script> <script src="http://a2.twimg.com/a/1276018586/javascripts/lib/mustache.js?1276019402" type="text/javascript"></script> <script src="http://a3.twimg.com/a/1276018586/javascripts/dismissable.js?1276019402" type="text/javascript"></script> <script src="http://a1.twimg.com/a/1276018586/javascripts/api.js?1276019402" type="text/javascript"></script> <script src="http://a0.twimg.com/a/1276018586/javascripts/controls.js?1276019402" type="text/javascript"></script> <script src="http://a1.twimg.com/a/1276018586/javascripts/hover_cards.js?1276019402" type="text/javascript"></script> </body> </html> Twitter

48. var a=_d.createElement("script"); a.type="text/javascript"; a.src=b; _d.getElementsByTagName("head")[0].appendChild(a); Bing onload

50. Ray Morgan Zappos.com MakindeAdeagbo Facebook Jenn Lukas Happy Cog http://www.flickr.com/photos/waltzaround/4041024134/

52. speed matters focus on the frontend run Page Speed and YSlow progressive enhancement  progressive rendering takeaways http://www.flickr.com/photos/34771728@N00/361526991/

53. Steve Souders @souders, souders@google.com stevesouders.com/docs/atmedia-20100611.pptx flickr.com/photos/nj_dodge/187190601/