Your SlideShare is downloading. ×
0
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

15,443

Published on

Published in: Technology, Design
0 Comments
13 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
15,443
On Slideshare
0
From Embeds
0
Number of Embeds
32
Actions
Shares
0
Downloads
81
Comments
0
Likes
13
Embeds 0
No embeds

No notes for slide
  • 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
  • http://www.webpagetest.org/video/compare.php?tests=100608_e6e0257fd833ca1eb5669cd42e49570c%2C100608_7b873ad39b553f0dec08b2ec9fb14db0%2C100608_be6ad18d17fdcbd0ad4d5e5430db4815%2C100608_b8b544a8cf71bf02171a2bf473b56a03&amp;thumbSize=150&amp;ival=1000
  • http://www.webpagetest.org/video/compare.php?tests=100608_1F9%2C100608_1FA%2C100608_1FB%2C100608_1FC%2C100608_1FD&amp;thumbSize=150&amp;ival=1000
  • http://www.webpagetest.org/video/compare.php?tests=100608_1GG%2C100608_1GF%2C100608_1GD%2C100608_1GC%2C100608_1GB&amp;thumbSize=150&amp;ival=2000
  • http://www.webpagetest.org/video/view.php?id=100607_5f1b00006d82a016a64b37502ebb0d0ebc73df00
  • http://www.webpagetest.org/video/view.php?id=100608_9111958456564ddc3b2e49fbfda200112dee9fd2
  • http://www.webpagetest.org/video/view.php?id=100608_ab0ebdaa528ad2c480ff16fb4e59e50a52bdd71f
  • http://www.webpagetest.org/video/view.php?id=100608_ecbc76305fba361cafb31c0abd27d46617e65c24
  • Data source: Steve Souders, updated April 2010
  • All of these allow for parallel downloads, but none of them allow for parallel JS execution – that&apos;s not possible (currently, WebKit is doing some stuff on that).
  • GMail Mobile: http://googlecode.blogspot.com/2009/09/gmail-for-mobile-html5-series-reducing.htmlSproutCore: http://blog.sproutcore.com/post/225219087/faster-loading-through-eval
  • Transcript of "@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 />
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×