Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Even Faster Web Sites<br />stevesouders.com/docs/atmedia-20100611.pptx<br />Disclaimer: This content does not necessarily ...
flickr.com/photos/bekahstargazing/318930460/<br />
the importance of        frontend performance<br />9%<br />91%<br />17%<br />83%<br />iGoogle, primed cache<br />iGoogle, ...
Make fewer HTTP requests<br />Use a CDN<br />Add an Expires header<br />Gzip components<br />Put stylesheets at the top<br...
Even Faster Web Sites<br />Splitting the initial payload<br />Loading scripts without blocking<br />Coupling asynchronous ...
carsonified.com/blog/business/fred-wilsons-10-golden-principles-of-successful-web-apps/<br />#1. Speed:        “First and ...
en.oreilly.com/velocity2009/public/schedule/detail/8523<br />
en.oreilly.com/velocity2009/public/schedule/detail/8523<br />
Yahoo!<br />	0.4 sec slower<br />	traffic  5-9%<br />slideshare.net/stoyan/dont-make-me-wait-or-building-highperformance-...
blog.mozilla.com/metrics/category/website-optimization/<br />…shaved 2.2 seconds off the average page load time and increa...
en.oreilly.com/velocity2009/public/schedule/detail/7709<br />blog.mozilla.com/metrics/category/website-optimization/<br />...
en.oreilly.com/velocity2008/public/schedule/detail/3632<br />
Site speed in search rank<br />Screen shot of blog post<br />…we've decided to take site speed into account in our search ...
Both<br />combine scripts<br />combine stylesheets<br />add an Expires header<br />gzip responses<br />put stylesheets at ...
Web<br />Performance<br />Optimization<br />WPO<br />drives traffic<br />improves UX<br />increases revenue<br />reduces c...
What makes sites feel slow?<br />http://www.flickr.com/photos/kevincollins/234678305/<br />
(lack of)<br />Progressive Rendering<br />[next page being loaded]<br />http://www.flickr.com/photos/kevincollins/23467830...
Search<br />
Sports<br />
News<br />
Shopping<br />
Progressive Enhancement<br />deliver HTML<br />defer JS<br />avoid DOM<br />decorate later<br />
Progressive Enhancement<br /><br />Progressive Rendering<br />
<script src="A.js"> blocks parallel downloads and rendering<br />9 secs: IE 6-7, FF 3.0, Chr 1, Op 9-10, Saf 3<br />7 secs...
29% avg<br />229 K avg<br />initial payload and execution<br />
split the initial payload<br />split your JavaScript between what's needed to render the page and everything else<br />def...
Loading Scripts Without Blocking<br />XHR Eval<br />XHR Injection<br />Script in Iframe<br />Script DOM Element<br />Scrip...
XHR Eval<br />varxhrObj = getXHRObject();<br />xhrObj.onreadystatechange = <br />  function() { <br />    if ( xhrObj.read...
Script DOM Element<br />var se = document.createElement('script');<br />se.src = 'http://anydomain.com/A.js';<br />documen...
GMail Mobile<br /><script type="text/javascript"><br />/*<br />var ... <br />*/<br /></script><br />get script DOM element...
window.setTimeout(<br />function(){<br />var a=document.createElement("script");<br /> a.src="/extern_js/f/CgJlbhz8US8_w.j...
Bootloader.setResourceMap(<br />{"CDYbm":<br /> {"name":"js/32kskxvl4c8w0848.pkg.js",<br />  "type":"js",<br />  "src":"ht...
YUI.presentation.lazyScriptList = <br />	["http://l.yimg.com/a/combo?arc/yui/substitute_0.1.9.js&arc/yui/oop_0.1.10.js&[.....
<script src="http://bits.wikimedia.org/skins-1.5/common/wikibits.js?281c" type="text/javascript"></script><br /><script sr...
<script src="/js/jquery-1.4.2.js"></script><br /></body><br /></html><br />subsequent page:<br /><script src="/js/jquery-1...
<script src="http://include.ebaystatic.com/v4js/en_US/e673/SYS-RA_vjo_e67311309442_1_en_US.js"></script><br /><script src=...
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js" type="text/javascript"></script><br /><scrip...
var a=_d.createElement("script");<br />a.type="text/javascript";<br />a.src=b;<br />_d.getElementsByTagName("head")[0].app...
Ray Morgan<br />Zappos.com<br />MakindeAdeagbo<br />Facebook<br />Jenn Lukas<br />Happy Cog<br />http://www.flickr.com/pho...
Upcoming SlideShare
Loading in …5
×

@media - Even Faster Web Sites

19,135 views

Published on

Published in: Technology, Design
  • Be the first to comment

@media - Even Faster Web Sites

  1. 1. Even Faster Web Sites<br />stevesouders.com/docs/atmedia-20100611.pptx<br />Disclaimer: This content does not necessarily reflect the opinions of my employer.<br />flickr.com/photos/ddfic/722634166/<br />
  2. 2. flickr.com/photos/bekahstargazing/318930460/<br />
  3. 3. the importance of frontend performance<br />9%<br />91%<br />17%<br />83%<br />iGoogle, primed cache<br />iGoogle, empty cache<br />http://www.flickr.com/photos/minami/2458184654/<br />
  4. 4. Make fewer HTTP requests<br />Use a CDN<br />Add an Expires header<br />Gzip components<br />Put stylesheets at the top<br />Put scripts at the bottom<br />Avoid CSS expressions<br />Make JS and CSS external<br />Reduce DNS lookups<br />Minify JS<br />Avoid redirects<br />Remove duplicate scripts<br />Configure ETags<br />Make AJAX cacheable<br />14 Rules<br />
  5. 5. Even Faster Web Sites<br />Splitting the initial payload<br />Loading scripts without blocking<br />Coupling asynchronous scripts<br />Positioning inline scripts<br />Sharding dominant domains<br />Flushing the document early<br />Using iframes sparingly<br />Simplifying CSS Selectors<br />Understanding Ajax performance..........Doug Crockford<br />Creating responsive web apps............Ben Galbraith, Dion Almaer<br />Writing efficient JavaScript.............Nicholas Zakas<br />Scaling with Comet.....................Dylan Schiemann<br />Going beyond gzipping...............Tony Gentilcore<br />Optimizing images...................Stoyan Stefanov, Nicole Sullivan<br />flickr.com/photos/motionblur/3049984012/<br />
  6. 6. carsonified.com/blog/business/fred-wilsons-10-golden-principles-of-successful-web-apps/<br />#1. Speed: “First and foremost, we believe that speed is more than a feature. Speed is the most important feature.”<br />
  7. 7. en.oreilly.com/velocity2009/public/schedule/detail/8523<br />
  8. 8. en.oreilly.com/velocity2009/public/schedule/detail/8523<br />
  9. 9. Yahoo!<br /> 0.4 sec slower<br /> traffic  5-9%<br />slideshare.net/stoyan/dont-make-me-wait-or-building-highperformance-web-applications<br />slideshare.net/stoyan/yslow-20-presentation<br />
  10. 10. blog.mozilla.com/metrics/category/website-optimization/<br />…shaved 2.2 seconds off the average page load time and increased download conversions by 15.4%!<br />
  11. 11. en.oreilly.com/velocity2009/public/schedule/detail/7709<br />blog.mozilla.com/metrics/category/website-optimization/<br />…shaved 2.2 seconds off the average page load time and increased download conversions by 15.4%!<br />
  12. 12. en.oreilly.com/velocity2008/public/schedule/detail/3632<br />
  13. 13. Site speed in search rank<br />Screen shot of blog post<br />…we've decided to take site speed into account in our search rankings.<br />googlewebmastercentral.blogspot.com/2010/04/using-site-speed-in-web-search-ranking.html<br />
  14. 14.
  15. 15. Both<br />combine scripts<br />combine stylesheets<br />add an Expires header<br />gzip responses<br />put stylesheets at the top<br />put scripts at the bottom<br />avoid CSS expressions<br />make JS and CSS external<br />reduce DNS lookups<br />minify JS and CSS<br />avoid redirects<br />remove duplicate scripts<br />make Ajax cacheable<br />reduce cookie size<br />use cookie-free domains<br />don't scale images<br />YSlow<br />use CSS sprites<br />use a CDN<br />configure ETags<br />use GET for Ajax requests<br />reduce # of DOM elements<br />no 404s<br />avoid image filters<br />optimize favicon<br />Page Speed<br />defer loading JS<br />remove unused CSS<br />use efficient CSS selectors<br />optimize images<br />optimize order of CSS & JS<br />shard domains<br />leverage proxy caching<br />
  16. 16.
  17. 17.
  18. 18.
  19. 19.
  20. 20. Web<br />Performance<br />Optimization<br />WPO<br />drives traffic<br />improves UX<br />increases revenue<br />reduces costs<br />flickr.com/photos/pedromourapinheiro/3123885534/<br />
  21. 21. What makes sites feel slow?<br />http://www.flickr.com/photos/kevincollins/234678305/<br />
  22. 22. (lack of)<br />Progressive Rendering<br />[next page being loaded]<br />http://www.flickr.com/photos/kevincollins/234678305/<br />
  23. 23. Search<br />
  24. 24. Sports<br />
  25. 25. News<br />
  26. 26. Shopping<br />
  27. 27.
  28. 28.
  29. 29.
  30. 30.
  31. 31. Progressive Enhancement<br />deliver HTML<br />defer JS<br />avoid DOM<br />decorate later<br />
  32. 32. Progressive Enhancement<br /><br />Progressive Rendering<br />
  33. 33. <script src="A.js"> blocks parallel downloads and rendering<br />9 secs: IE 6-7, FF 3.0, Chr 1, Op 9-10, Saf 3<br />7 secs: IE 8, FF 3.5, Chr3, Saf 4<br />Why focus on JavaScript?<br />
  34. 34. 29% avg<br />229 K avg<br />initial payload and execution<br />
  35. 35. split the initial payload<br />split your JavaScript between what's needed to render the page and everything else<br />defer "everything else"<br />split manually (Page Speed), automatically (Microsoft Doloto)<br />load scripts without blocking<br />http://www.flickr.com/photos/devcentre/108032900/<br />
  36. 36. Loading Scripts Without Blocking<br />XHR Eval<br />XHR Injection<br />Script in Iframe<br />Script DOM Element<br />Script Defer<br />document.write Script Tag<br />
  37. 37. XHR Eval<br />varxhrObj = getXHRObject();<br />xhrObj.onreadystatechange = <br /> function() { <br /> if ( xhrObj.readyState != 4 ) return;<br />eval(xhrObj.responseText);<br /> };<br />xhrObj.open('GET', 'A.js', true);<br />xhrObj.send('');<br />script & page must be same domain<br />massage script?<br />
  38. 38. Script DOM Element<br />var se = document.createElement('script');<br />se.src = 'http://anydomain.com/A.js';<br />document.getElementsByTagName('head')<br />[0].appendChild(se); <br />script & page domains can differ<br />no need to massage JavaScript<br />may not preserve execution order<br />
  39. 39. GMail Mobile<br /><script type="text/javascript"><br />/*<br />var ... <br />*/<br /></script><br />get script DOM element's text<br />remove comments<br />eval() when invoked<br />inline or iframe<br />awesome for prefetching JS that might (not) be needed<br />
  40. 40.
  41. 41. window.setTimeout(<br />function(){<br />var a=document.createElement("script");<br /> a.src="/extern_js/f/CgJlbhz8US8_w.js";<br /> (document.getElementById("xjsd")||<br />document.body).appendChild(a);},<br />0);<br />Google Search<br />
  42. 42. Bootloader.setResourceMap(<br />{"CDYbm":<br /> {"name":"js/32kskxvl4c8w0848.pkg.js",<br /> "type":"js",<br /> "src":"http://.../1fakc64i.js"},...});<br />var c=a ? document.body : document.getElementsByTagName('head')[0];<br />var d=document.createElement('script');<br />d.type='text/javascript';<br />d.src=f;<br />c.appendChild(d);<br />Facebook<br />
  43. 43. YUI.presentation.lazyScriptList = <br /> ["http://l.yimg.com/a/combo?arc/yui/substitute_0.1.9.js&arc/yui/oop_0.1.10.js&[...58 more!...]"];<br />d = w.document; <br />h = d.getElementsByTagName("head")[0];<br />n = d.createElement("script"),<br />n.src = url;<br />h.appendChild(n);<br />Yahoo! FP<br />
  44. 44. <script src="http://bits.wikimedia.org/skins-1.5/common/wikibits.js?281c" type="text/javascript"></script><br /><script src="http://bits.wikimedia.org/skins-1.5/common/jquery.min.js?281c" type="text/javascript"></script><br /><script src="http://bits.wikimedia.org/skins-1.5/common/ajax.js?281c" type="text/javascript"></script><br /><script src="http://bits.wikimedia.org/skins-1.5/common/mwsuggest.js?281c" type="text/javascript"></script><br /><script src="http://bits.wikimedia.org/w/extensions/UsabilityInitiative/js/plugins.combined.min.js?281c" type="text/javascript"></script><br /><script src="http://bits.wikimedia.org/w/extensions/UsabilityInitiative/Vector/Vector.combined.min.js?281c" type="text/javascript"></script><br /><script src="http://upload.wikimedia.org/centralnotice/wikipedia/en/centralnotice.js?281c" type="text/javascript"></script><br /><script src="/w/index.php?title=-&amp;action=raw&amp;gen=js&amp;useskin=vector&amp;281c" type="text/javascript"></script><br /></head><br />Wikipedia<br />
  45. 45. <script src="/js/jquery-1.4.2.js"></script><br /></body><br /></html><br />subsequent page:<br /><script src="/js/jquery-1.4.2.js"></script><br /><script src="/js/toChecklist.js"></script><br /><script src="/js/tocs.js"></script><br /></body><br /></html><br />Craigslist<br />
  46. 46. <script src="http://include.ebaystatic.com/v4js/en_US/e673/SYS-RA_vjo_e67311309442_1_en_US.js"></script><br /><script src="http://include.ebaystatic.com/v4js/en_US/e673/GH-RA_ReskinEbay_e67311309442_1_en_US.js"></script><br /><script src="http://include.ebaystatic.com/v4js/en_US/e673/SYS-RA_vjo_e67311252543_opta_en_US.js"><br /><script src="http://include.ebaystatic.com/v4js/en_US/e673/CCHP_HomepageV4_SLDR_e67311252543_6_en_US.js"></script><br />eBay<br />
  47. 47. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js" type="text/javascript"></script><br /><script src="http://a3.twimg.com/a/1276018586/javascripts/twitter.js?1276019402" type="text/javascript"></script><br /><script src="http://a1.twimg.com/a/1276018586/javascripts/lib/jquery.tipsy.min.js?1276019402" type="text/javascript"></script><br /><script src='http://maps.google.com/maps/api/js?sensor=false' type="text/javascript"></script><br /><script src="http://a1.twimg.com/a/1276018586/javascripts/lib/gears_init.js?1276019402" type="text/javascript"></script><br /><script src="http://a3.twimg.com/a/1276018586/javascripts/geov1.js?1276019402" type="text/javascript"></script><br /><script src="http://a1.twimg.com/a/1276018586/javascripts/api.js?1276019402" type="text/javascript"></script><br /><script src="http://a2.twimg.com/a/1276018586/javascripts/lib/mustache.js?1276019402" type="text/javascript"></script><br /><script src="http://a3.twimg.com/a/1276018586/javascripts/dismissable.js?1276019402" type="text/javascript"></script><br /><script src="http://a1.twimg.com/a/1276018586/javascripts/api.js?1276019402" type="text/javascript"></script><br /><script src="http://a0.twimg.com/a/1276018586/javascripts/controls.js?1276019402" type="text/javascript"></script><br /><script src="http://a1.twimg.com/a/1276018586/javascripts/hover_cards.js?1276019402" type="text/javascript"></script><br /></body><br /></html><br />Twitter<br />
  48. 48. var a=_d.createElement("script");<br />a.type="text/javascript";<br />a.src=b;<br />_d.getElementsByTagName("head")[0].appendChild(a);<br />Bing<br />onload<br />
  49. 49.
  50. 50. Ray Morgan<br />Zappos.com<br />MakindeAdeagbo<br />Facebook<br />Jenn Lukas<br />Happy Cog<br />http://www.flickr.com/photos/waltzaround/4041024134/<br />
  51. 51.
  52. 52. speed matters<br />focus on the frontend<br />run Page Speed and YSlow<br />progressive enhancement  progressive rendering<br />takeaways<br />http://www.flickr.com/photos/34771728@N00/361526991/<br />
  53. 53. Steve Souders<br />@souders, souders@google.com<br />stevesouders.com/docs/atmedia-20100611.pptx<br />flickr.com/photos/nj_dodge/187190601/<br />

×