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/
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/
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
14.
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
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
40.
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
50. Ray Morgan Zappos.com MakindeAdeagbo Facebook Jenn Lukas Happy Cog http://www.flickr.com/photos/waltzaround/4041024134/
51.
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/
Notas del editor
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.”
This was a ~5 second speed up.
Time measurements from real users.
http://www.webpagetest.org/video/compare.php?tests=100607_SN,100607_SM,100607_SK,100607_SJ,100607_S6http://www.google.com/search?q=flowershttp://search.yahoo.com/search?p=flowershttp://www.bing.com/search?q=flowershttp://www.ask.com/web?q=flowershttp://search.aol.com/aol/search?q=flowersIE7, Dulles VA, DSL
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).
