Your SlideShare is downloading. ×
Web Directions South - Even Faster Web Sites
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Web Directions South - Even Faster Web Sites

6,926

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
6,926
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
87
Comments
1
Likes
15
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
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&thumbSize=150&ival=1000
  • http://www.webpagetest.org/video/compare.php?tests=100608_1F9%2C100608_1FA%2C100608_1FB%2C100608_1FC%2C100608_1FD&thumbSize=150&ival=1000
  • http://www.webpagetest.org/video/compare.php?tests=100608_1GG%2C100608_1GF%2C100608_1GD%2C100608_1GC%2C100608_1GB&thumbSize=150&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'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&v=1&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

    • 1. Even Faster Web Sites
      stevesouders.com/docs/wdx-20101014.pptx
      Disclaimer: This content does not necessarily reflect the
      opinions of my employer.
      flickr.com/photos/ddfic/722634166/
    • 2. how exciting is web dev?
      flickr.com/photos/joshme17/1557627176/
    • 3. darn exciting!
      flickr.com/photos/dougbrown47/4468708942//
    • 4. flickr.com/photos/halans/5079721630/
    • 5. darn exciting!
      flickr.com/photos/dougbrown47/4468708942//
    • 6. flickr.com/photos/bekahstargazing/318930460/
    • 7. 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.”
    • 8. en.oreilly.com/velocity2009/public/schedule/detail/8523
    • 9. en.oreilly.com/velocity2009/public/schedule/detail/8523
    • 10. Yahoo!
      0.4 sec slower
      traffic  5-9%
      slideshare.net/stoyan/dont-make-me-wait-or-building-highperformance-web-applications
      slideshare.net/stoyan/yslow-20-presentation
    • 11. blog.mozilla.com/metrics/category/website-optimization/
      …shaved 2.2 seconds off the average page load time and increased download conversions by 15.4%!
    • 12. en.oreilly.com/velocity2009/public/schedule/detail/7709
      blog.mozilla.com/metrics/category/website-optimization/
      …shaved 2.2 seconds off the average page load time and increased download conversions by 15.4%!
    • 13. en.oreilly.com/velocity2008/public/schedule/detail/3632
    • 14. Site speed in search rank
      Screen 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
    • 15.
    • 16. Both
      combine scripts
      combine stylesheets
      add an Expires header
      gzip responses
      put stylesheets at the top
      put scripts at the bottom
      avoid CSS expressions
      make JS and CSS external
      reduce DNS lookups
      minify JS and CSS
      avoid redirects
      remove duplicate scripts
      make Ajax cacheable
      reduce cookie size
      use cookie-free domains
      don't scale images
      YSlow
      use CSS sprites
      use a CDN
      configure ETags
      use GET for Ajax requests
      reduce # of DOM elements
      no 404s
      avoid image filters
      optimize favicon
      Page Speed
      defer loading JS
      remove unused CSS
      use efficient CSS selectors
      optimize images
      optimize order of CSS & JS
      shard domains
      leverage proxy caching
    • 17.
    • 18.
    • 19. Web
      Performance
      Optimization
      WPO
      drives traffic
      improves UX
      increases revenue
      reduces costs
      flickr.com/photos/pedromourapinheiro/3123885534/
    • 20. What makes sites feel slow?
      flickr.com/photos/kevincollins/234678305/
    • 21. (lack of)
      Progressive Rendering
      [next page being loaded]
      flickr.com/photos/kevincollins/234678305/
    • 22.
    • 23.
    • 24.
    • 25. Search
    • 26. Sports
    • 27. News
    • 28. Shopping
    • 29. Progressive Enhancement
      deliver HTML
      defer JS
      avoid DOM
      decorate later
    • 30. Progressive Enhancement

      Progressive Rendering
    • 31. <script src="A.js"> blocks parallel downloads and rendering
      9 secs: IE 6-7, FF 3.0, Chr 1, Op 9-10, Saf 3
      7 secs: IE 8-9, FF 3.6, Chr6, Saf 4
      Why focus on JavaScript?
    • 32. 29% avg
      229 K avg
      initial payload and execution
    • 33. split the initial payload
      split your JavaScript between what's needed to render the page and everything else
      defer "everything else"
      split manually (Page Speed), automatically (Microsoft Doloto)
      load scripts without blocking
      http://www.flickr.com/photos/devcentre/108032900/
    • 34. Loading Scripts Without Blocking
      XHR Eval
      XHR Injection
      Script in Iframe
      Script DOM Element
      Script Defer
      document.write Script Tag
    • 35. XHR Eval
      varxhrObj = 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
    • 36. Script DOM Element
      var se = document.createElement('script');
      se.src = 'http://anydomain.com/A.js';
      document.getElementsByTagName('head')
      [0].appendChild(se);
      script & page domains can differ
      may not preserve execution order
    • 37. MeeboIframed JS
      var iframe = document.createElement('iframe');
      document.body.appendChild(iframe);
      var doc = iframe.contentWindow.document;
      doc.open().write('<body onload="insertJS()">');
      doc.close();
      loads asynchronously
      delays parent’s load event: FF, Chr, Saf
      great for 3rd party scripts
      better for sandboxing & security
      avoids iframe src roundtrip
    • 38. GMail Mobile
      <script type="text/javascript">
      /*
      var ...
      */
      </script>
      get script DOM element's text
      remove comments
      eval() when invoked
      inline or iframe
      awesome for prefetching JS that might (not) be needed
    • 39.
    • 40. 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
    • 41. 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
    • 42. 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
    • 43. <head>
      ...
      <script src="http://s.ytimg.com/yt/jsbin/www-core-vfl1I8mph.jsA"></script>
      ...
      </head>
      YouTube
    • 44. <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
    • 45. <script src="/js/jquery-1.4.2.js"></script>
      </body>
      </html>
      subsequent page:
      <script src="/js/jquery-1.4.2.js"></script>
      <script src="/js/toChecklist.js"></script>
      <script src="/js/tocs.js"></script>
      </body>
      </html>
      Craigslist
      prefetching?
    • 46. <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
    • 47. $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)Twitter
      http://labjs.com/
    • 48. vara=_d.createElement("script");
      a.type="text/javascript";
      a.src=b;
      _d.getElementsByTagName("head")[0].appendChild(a);
      Bing
      onload
    • 49. <script src="http://bits.wikimedia.org/skins-1.5/common/wikibits.js?281c" type="text/javascript"></script>
      <script src="http://bits.wikimedia.org/skins-1.5/common/jquery.min.js?281c" type="text/javascript"></script>
      <script src="http://bits.wikimedia.org/skins-1.5/common/ajax.js?281c" type="text/javascript"></script>
      <script src="http://bits.wikimedia.org/skins-1.5/common/mwsuggest.js?281c" type="text/javascript"></script>
      <script src="http://bits.wikimedia.org/w/extensions/UsabilityInitiative/js/plugins.combined.min.js?281c" type="text/javascript"></script>
      <script src="http://bits.wikimedia.org/w/extensions/UsabilityInitiative/Vector/Vector.combined.min.js?281c" type="text/javascript"></script>
      <script src="http://upload.wikimedia.org/centralnotice/wikipedia/en/centralnotice.js?281c" type="text/javascript"></script>
      <script src="/w/index.php?title=-&amp;action=raw&amp;gen=js&amp;useskin=vector&amp;281c" type="text/javascript"></script>
      </head>
      Wikipedia
    • 50. frontend SPOF
      8.2secs
      http://en.wikipedia.org/wiki/Flowers (from NZ)
    • 51.
    • 52. Ray Morgan
      Zappos.com
      MakindeAdeagbo
      Facebook
      Jenn Lukas
      Happy Cog
      flickr.com/photos/waltzaround/4041024134/
    • 53. new stuff
    • 54. mobile waterfalls (!)
    • 55.
    • 56. mobile waterfalls (!)
    • 57. carrier transcoding
      wifi
      OPTUS
      ?!
    • 58. http://2.2.2.2/irscripts/imgreload.js
      function FN_ImageReload(){
      var FN_IR_TIMEOUT=2000;
      var FN_IR_SUFFIX="_hyuncompressed";
      var FN_IR_ALT="please wait 2 seconds for an uncompressed image, or press Ctrl+F5 for original quality page";
      varFN_IR_register=function() {
      ...
      vardocAll=document.getElementsByTagName("*");
      for(i=0;i<docAll.length;i++) {
      varcurrEl=docAll[i];
      }
    • 59. WebP image format
      googlecode.blogspot.com/2010/09/webp-new-image-format-for-web.html
      39% size reduction
      based on VP8 codec
      loss of quality?
      http://englishhard.com/2010/10/01/real-world-analysis-of-googles-webp-versus-jpg/
    • 60. W3C Web Timing Spec
      window.[webkit|moz|ms]Performance
      test.w3.org/webperf/specs/NavigationTiming/
    • 61. speed matters
      focus on the frontend
      run Page Speed and YSlow
      progressive enhancement  progressive rendering
      be excited!
      takeaways
      flickr.com/photos/34771728@N00/361526991/
    • 62. Steve Souders
      @souders, souders@google.com
      stevesouders.com/docs/wdx-20101014.pptx
      flickr.com/photos/nj_dodge/187190601/

    ×