@media - Even Faster Web Sites

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

flickr.com/photos/bekahstargazing/318930460/

the importance of frontend performance9%91%17%83%iGoogle, primed cacheiGoogle, empty cachehttp://www.flickr.com/photos/minami/2458184654/

Make fewer HTTP requestsUse a CDNAdd an Expires headerGzip componentsPut stylesheets at the topPut scripts at the bottomAvoid CSS expressionsMake JS and CSS externalReduce DNS lookupsMinify JSAvoid redirectsRemove duplicate scriptsConfigure ETagsMake AJAX cacheable14 Rules

Even Faster Web SitesSplitting the initial payloadLoading scripts without blockingCoupling asynchronous scriptsPositioning inline scriptsSharding dominant domainsFlushing the document earlyUsing iframes sparinglySimplifying CSS SelectorsUnderstanding Ajax performance..........Doug CrockfordCreating responsive web apps............Ben Galbraith, Dion AlmaerWriting efficient JavaScript.............Nicholas ZakasScaling with Comet.....................Dylan SchiemannGoing beyond gzipping...............Tony GentilcoreOptimizing images...................Stoyan Stefanov, Nicole Sullivanflickr.com/photos/motionblur/3049984012/

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

@media - 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?http://www.flickr.com/photos/kevincollins/234678305/

(lack of)Progressive Rendering[next page being loaded]http://www.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 domainmassage script?

Script DOM Elementvar se = document.createElement('script');se.src = 'http://anydomain.com/A.js';document.getElementsByTagName('head')[0].appendChild(se); script & page domains can differno need to massage JavaScriptmay not preserve execution order

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(){var a=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];var d=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

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

Ray MorganZappos.comMakindeAdeagboFacebookJenn LukasHappy Coghttp://www.flickr.com/photos/waltzaround/4041024134/

@media - Even Faster Web Sites

More Related Content

What's hot (20)

Similar to @media - Even Faster Web Sites (20)

More from Steve Souders (14)

Recently uploaded (20)

@media - Even Faster Web Sites

Editor's Notes