Web Directions South - Even Faster Web Sites

Even Faster Web Sitesstevesouders.com/docs/wdx-20101014.pptxDisclaimer: This content does not necessarily reflect the opinions of my employer.flickr.com/photos/ddfic/722634166/

how exciting is web dev?flickr.com/photos/joshme17/1557627176/

darn exciting!flickr.com/photos/dougbrown47/4468708942//

flickr.com/photos/halans/5079721630/

flickr.com/photos/bekahstargazing/318930460/

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

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

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

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

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%!

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

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

Web Directions South - Even Faster Web Sites

Bothcombine scriptscombine stylesheetsadd an Expires headergzip responsesput stylesheets at the topput scripts at the bottomavoid CSS expressionsmake JS and CSS externalreduce DNS lookupsminify JS and CSSavoid redirectsremove duplicate scriptsmake Ajax cacheablereduce cookie sizeuse cookie-free domainsdon't scale imagesYSlowuse CSS spritesuse a CDNconfigure ETagsuse GET for Ajax requestsreduce # of DOM elementsno 404savoid image filtersoptimize faviconPage Speeddefer loading JSremove unused CSSuse efficient CSS selectorsoptimize imagesoptimize order of CSS & JSshard domainsleverage proxy caching

WebPerformanceOptimizationWPOdrives trafficimproves UXincreases revenuereduces costsflickr.com/photos/pedromourapinheiro/3123885534/

What makes sites feel slow?flickr.com/photos/kevincollins/234678305/

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

Progressive Enhancementdeliver HTMLdefer JSavoid DOMdecorate later

Progressive EnhancementProgressive Rendering

29% avg229 K avginitial payload and execution

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

Loading Scripts Without BlockingXHR EvalXHR InjectionScript in IframeScript DOM ElementScript Deferdocument.write Script Tag

XHR EvalvarxhrObj = 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

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

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

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

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

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

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

<head>...<script src="http://s.ytimg.com/yt/jsbin/www-core-vfl1I8mph.jsA"></script>...</head>YouTube

<body><div><table>[~40%]<script src="http://z-ecx.images-amazon.com/images/G/01/browser-scripts/us-site-wide-1.2.6/site-wide-4183309070.js._V198471533_.js"></script> Amazon

<body><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></body>eBay

$LAB .wait(function() { $LAB .script("http://a1.twimg.com/a/1286563368/javascripts/phoenix.bundle.js") .wait(function() { ... }); $LAB .script("http://a1.twimg.com/a/1286563368/javascripts/api.bundle.js") .wait(function() { ... }); });(new)Twitterhttp://labjs.com/

vara=_d.createElement("script");a.type="text/javascript";a.src=b;_d.getElementsByTagName("head")[0].appendChild(a);Bingonload

frontend SPOF8.2secshttp://en.wikipedia.org/wiki/Flowers (from NZ)

Ray MorganZappos.comMakindeAdeagboFacebookJenn LukasHappy Cogflickr.com/photos/waltzaround/4041024134/

Web Directions South - Even Faster Web Sites

More Related Content

What's hot (19)

Similar to Web Directions South - Even Faster Web Sites (20)

More from Steve Souders (12)

Web Directions South - Even Faster Web Sites

Editor's Notes