0
Even Faster Web Sites<br />stevesouders.com/docs/wdx-20101014.pptx<br />Disclaimer: This content does not necessarily refl...
how exciting is web dev?<br />flickr.com/photos/joshme17/1557627176/<br />
darn exciting!<br />flickr.com/photos/dougbrown47/4468708942//<br />
flickr.com/photos/halans/5079721630/<br />
darn exciting!<br />flickr.com/photos/dougbrown47/4468708942//<br />
flickr.com/photos/bekahstargazing/318930460/<br />
 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 />flickr.com/photos/kevincollins/234678305/<br />
(lack of)<br />Progressive Rendering<br />[next page being loaded]<br />flickr.com/photos/kevincollins/234678305/<br />
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...
MeeboIframed JS<br />var iframe = document.createElement('iframe');<br />document.body.appendChild(iframe);<br />var doc =...
GMail Mobile<br /><script type="text/javascript"><br />/*<br />var ... <br />*/<br /></script><br />get script DOM element...
window.setTimeout(<br />function(){<br />vara=document.createElement("script");<br /> a.src="/extern_js/f/CgJlbhz8US8_w.js...
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&[.....
<head><br />...<br /><script src="http://s.ytimg.com/yt/jsbin/www-core-vfl1I8mph.jsA"></script><br />...<br /></head><br /...
<body><br /><div><br /><table><br />[~40%]<br /><script src="http://z-ecx.images-amazon.com/images/G/01/browser-scripts/us...
<script src="/js/jquery-1.4.2.js"></script><br /></body><br /></html><br />subsequent page:<br /><script src="/js/jquery-1...
<body><br /><script src="http://include.ebaystatic.com/v4js/en_US/e673/SYS-RA_vjo_e67311309442_1_en_US.js"></script><br />...
$LAB <br />  .wait(function() {<br />    $LAB<br />      .script("http://a1.twimg.com/a/1286563368/javascripts/phoenix.bun...
vara=_d.createElement("script");<br />a.type="text/javascript";<br />a.src=b;<br />_d.getElementsByTagName("head")[0].appe...
<script src="http://bits.wikimedia.org/skins-1.5/common/wikibits.js?281c" type="text/javascript"></script><br /><script sr...
frontend SPOF<br />8.2secs<br />http://en.wikipedia.org/wiki/Flowers (from NZ)<br />
Ray Morgan<br />Zappos.com<br />MakindeAdeagbo<br />Facebook<br />Jenn Lukas<br />Happy Cog<br />flickr.com/photos/waltzar...
new stuff<br />
mobile waterfalls (!)<br />
mobile waterfalls (!)<br />
Upcoming SlideShare
Loading in...5
×

Web Directions South - Even Faster Web Sites

7,031

Published on

1 Comment
15 Likes
Statistics
Notes
  • The            setup            in            the            video            no            longer            works.           
    And            all            other            links            in            comment            are            fake            too.           
    But            luckily,            we            found            a            working            one            here (copy paste link in browser) :            www.goo.gl/i7K0s4
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
7,031
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
88
Comments
1
Likes
15
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/view.php?id=100630_734a5096ca2b97a217b756b277520c0a68e911d5.slow
  • http://www.webpagetest.org/video/view.php?id=100608_ecbc76305fba361cafb31c0abd27d46617e65c24
  • http://www.webpagetest.org/video/view.php?id=100608_ab0ebdaa528ad2c480ff16fb4e59e50a52bdd71f
  • 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
  • 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
  • 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
  • http://www.webpagetest.org/result/100708_13X0/1/details/
  • http://www.browserscope.org/?category=network&amp;v=1&amp;ua=Android%202,Blackberry%206,Blackberry%208330,Blackberry%209700,Chrome%206,Firefox%203,IE%208,IE%20Mobile%208,iPad%204,iPhone%204,Nokia%2097,Opera%20Mini%204,Opera%20Mobile%2010,Palm%20Pre%201,Safari%204
  • Transcript of "Web Directions South - Even Faster Web Sites"

    1. 1. Even Faster Web Sites<br />stevesouders.com/docs/wdx-20101014.pptx<br />Disclaimer: This content does not necessarily reflect the <br /> opinions of my employer.<br />flickr.com/photos/ddfic/722634166/<br />
    2. 2. how exciting is web dev?<br />flickr.com/photos/joshme17/1557627176/<br />
    3. 3. darn exciting!<br />flickr.com/photos/dougbrown47/4468708942//<br />
    4. 4. flickr.com/photos/halans/5079721630/<br />
    5. 5. darn exciting!<br />flickr.com/photos/dougbrown47/4468708942//<br />
    6. 6. flickr.com/photos/bekahstargazing/318930460/<br />
    7. 7. 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 />
    8. 8. en.oreilly.com/velocity2009/public/schedule/detail/8523<br />
    9. 9. en.oreilly.com/velocity2009/public/schedule/detail/8523<br />
    10. 10. 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 />
    11. 11. 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/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 />
    13. 13. en.oreilly.com/velocity2008/public/schedule/detail/3632<br />
    14. 14. 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 />
    15. 15.
    16. 16. 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 />
    17. 17.
    18. 18.
    19. 19. 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 />
    20. 20. What makes sites feel slow?<br />flickr.com/photos/kevincollins/234678305/<br />
    21. 21. (lack of)<br />Progressive Rendering<br />[next page being loaded]<br />flickr.com/photos/kevincollins/234678305/<br />
    22. 22.
    23. 23.
    24. 24.
    25. 25. Search<br />
    26. 26. Sports<br />
    27. 27. News<br />
    28. 28. Shopping<br />
    29. 29. Progressive Enhancement<br />deliver HTML<br />defer JS<br />avoid DOM<br />decorate later<br />
    30. 30. Progressive Enhancement<br /><br />Progressive Rendering<br />
    31. 31. <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-9, FF 3.6, Chr6, Saf 4<br />Why focus on JavaScript?<br />
    32. 32. 29% avg<br />229 K avg<br />initial payload and execution<br />
    33. 33. 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 />
    34. 34. 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 />
    35. 35. 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 />
    36. 36. 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 />may not preserve execution order<br />
    37. 37. MeeboIframed JS<br />var iframe = document.createElement('iframe');<br />document.body.appendChild(iframe);<br />var doc = iframe.contentWindow.document;<br />doc.open().write('<body onload="insertJS()">');<br />doc.close();<br />loads asynchronously<br />delays parent’s load event: FF, Chr, Saf<br />great for 3rd party scripts<br />better for sandboxing & security<br />avoids iframe src roundtrip<br />
    38. 38. 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 />
    39. 39.
    40. 40. window.setTimeout(<br />function(){<br />vara=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 />
    41. 41. 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 />vard=document.createElement('script');<br />d.type='text/javascript';<br />d.src=f;<br />c.appendChild(d);<br />Facebook<br />
    42. 42. 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 />
    43. 43. <head><br />...<br /><script src="http://s.ytimg.com/yt/jsbin/www-core-vfl1I8mph.jsA"></script><br />...<br /></head><br />YouTube<br />
    44. 44. <body><br /><div><br /><table><br />[~40%]<br /><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> <br />Amazon<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 />prefetching?<br />
    46. 46. <body><br /><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 />...<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 /></body><br />eBay<br />
    47. 47. $LAB <br /> .wait(function() {<br /> $LAB<br /> .script("http://a1.twimg.com/a/1286563368/javascripts/phoenix.bundle.js")<br /> .wait(function() {<br /> ...<br /> });<br /> $LAB<br /> .script("http://a1.twimg.com/a/1286563368/javascripts/api.bundle.js")<br /> .wait(function() {<br /> ...<br /> });<br /> });<br />(new)Twitter<br />http://labjs.com/<br />
    48. 48. vara=_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. <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 />
    50. 50. frontend SPOF<br />8.2secs<br />http://en.wikipedia.org/wiki/Flowers (from NZ)<br />
    51. 51.
    52. 52. Ray Morgan<br />Zappos.com<br />MakindeAdeagbo<br />Facebook<br />Jenn Lukas<br />Happy Cog<br />flickr.com/photos/waltzaround/4041024134/<br />
    53. 53. new stuff<br />
    54. 54. mobile waterfalls (!)<br />
    55. 55.
    56. 56. mobile waterfalls (!)<br />
    57. 57. carrier transcoding<br />wifi<br />OPTUS<br />?!<br />
    58. 58. http://2.2.2.2/irscripts/imgreload.js<br />function FN_ImageReload(){<br />var FN_IR_TIMEOUT=2000;<br />var FN_IR_SUFFIX="_hyuncompressed";<br />var FN_IR_ALT="please wait 2 seconds for an uncompressed image, or press Ctrl+F5 for original quality page"; <br />varFN_IR_register=function() {<br /> ...<br />vardocAll=document.getElementsByTagName("*");<br /> for(i=0;i<docAll.length;i++) {<br />varcurrEl=docAll[i];<br /> }<br />
    59. 59. WebP image format<br />googlecode.blogspot.com/2010/09/webp-new-image-format-for-web.html<br />39% size reduction<br />based on VP8 codec<br />loss of quality?<br />http://englishhard.com/2010/10/01/real-world-analysis-of-googles-webp-versus-jpg/<br />
    60. 60. W3C Web Timing Spec<br />window.[webkit|moz|ms]Performance<br />test.w3.org/webperf/specs/NavigationTiming/<br />
    61. 61. speed matters<br />focus on the frontend<br />run Page Speed and YSlow<br />progressive enhancement  progressive rendering<br />be excited!<br />takeaways<br />flickr.com/photos/34771728@N00/361526991/<br />
    62. 62. Steve Souders<br />@souders, souders@google.com<br />stevesouders.com/docs/wdx-20101014.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.

    ×