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

@media - Even Faster Web Sites

15,079

Published on

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

No Downloads
Views
Total Views
15,079
On Slideshare
0
From Embeds
0
Number of Embeds
32
Actions
Shares
0
Downloads
80
Comments
0
Likes
13
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/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
  • 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'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

    • 1. Even Faster Web Sites
      stevesouders.com/docs/atmedia-20100611.pptx
      Disclaimer: This content does not necessarily reflect the opinions of my employer.
      flickr.com/photos/ddfic/722634166/
    • 2. flickr.com/photos/bekahstargazing/318930460/
    • 3. the importance of frontend performance
      9%
      91%
      17%
      83%
      iGoogle, primed cache
      iGoogle, empty cache
      http://www.flickr.com/photos/minami/2458184654/
    • 4. Make fewer HTTP requests
      Use a CDN
      Add an Expires header
      Gzip components
      Put stylesheets at the top
      Put scripts at the bottom
      Avoid CSS expressions
      Make JS and CSS external
      Reduce DNS lookups
      Minify JS
      Avoid redirects
      Remove duplicate scripts
      Configure ETags
      Make AJAX cacheable
      14 Rules
    • 5. Even Faster Web Sites
      Splitting the initial payload
      Loading scripts without blocking
      Coupling asynchronous scripts
      Positioning inline scripts
      Sharding dominant domains
      Flushing the document early
      Using iframes sparingly
      Simplifying CSS Selectors
      Understanding Ajax performance..........Doug Crockford
      Creating responsive web apps............Ben Galbraith, Dion Almaer
      Writing efficient JavaScript.............Nicholas Zakas
      Scaling with Comet.....................Dylan Schiemann
      Going beyond gzipping...............Tony Gentilcore
      Optimizing images...................Stoyan Stefanov, Nicole Sullivan
      flickr.com/photos/motionblur/3049984012/
    • 6. 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.”
    • 7. en.oreilly.com/velocity2009/public/schedule/detail/8523
    • 8. en.oreilly.com/velocity2009/public/schedule/detail/8523
    • 9. 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
    • 10. blog.mozilla.com/metrics/category/website-optimization/
      …shaved 2.2 seconds off the average page load time and increased download conversions by 15.4%!
    • 11. 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%!
    • 12. en.oreilly.com/velocity2008/public/schedule/detail/3632
    • 13. 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
    • 14.
    • 15. 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
    • 16.
    • 17.
    • 18.
    • 19.
    • 20. Web
      Performance
      Optimization
      WPO
      drives traffic
      improves UX
      increases revenue
      reduces costs
      flickr.com/photos/pedromourapinheiro/3123885534/
    • 21. What makes sites feel slow?
      http://www.flickr.com/photos/kevincollins/234678305/
    • 22. (lack of)
      Progressive Rendering
      [next page being loaded]
      http://www.flickr.com/photos/kevincollins/234678305/
    • 23. Search
    • 24. Sports
    • 25. News
    • 26. Shopping
    • 27.
    • 28.
    • 29.
    • 30.
    • 31. Progressive Enhancement
      deliver HTML
      defer JS
      avoid DOM
      decorate later
    • 32. Progressive Enhancement

      Progressive Rendering
    • 33. <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, FF 3.5, Chr3, Saf 4
      Why focus on JavaScript?
    • 34. 29% avg
      229 K avg
      initial payload and execution
    • 35. 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/
    • 36. Loading Scripts Without Blocking
      XHR Eval
      XHR Injection
      Script in Iframe
      Script DOM Element
      Script Defer
      document.write Script Tag
    • 37. 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
      massage script?
    • 38. 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
      no need to massage JavaScript
      may not preserve execution order
    • 39. 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
    • 40.
    • 41. 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
    • 42. 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
    • 43. 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
    • 44. <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
    • 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
    • 46. <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>
      eBay
    • 47. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js" type="text/javascript"></script>
      <script src="http://a3.twimg.com/a/1276018586/javascripts/twitter.js?1276019402" type="text/javascript"></script>
      <script src="http://a1.twimg.com/a/1276018586/javascripts/lib/jquery.tipsy.min.js?1276019402" type="text/javascript"></script>
      <script src='http://maps.google.com/maps/api/js?sensor=false' type="text/javascript"></script>
      <script src="http://a1.twimg.com/a/1276018586/javascripts/lib/gears_init.js?1276019402" type="text/javascript"></script>
      <script src="http://a3.twimg.com/a/1276018586/javascripts/geov1.js?1276019402" type="text/javascript"></script>
      <script src="http://a1.twimg.com/a/1276018586/javascripts/api.js?1276019402" type="text/javascript"></script>
      <script src="http://a2.twimg.com/a/1276018586/javascripts/lib/mustache.js?1276019402" type="text/javascript"></script>
      <script src="http://a3.twimg.com/a/1276018586/javascripts/dismissable.js?1276019402" type="text/javascript"></script>
      <script src="http://a1.twimg.com/a/1276018586/javascripts/api.js?1276019402" type="text/javascript"></script>
      <script src="http://a0.twimg.com/a/1276018586/javascripts/controls.js?1276019402" type="text/javascript"></script>
      <script src="http://a1.twimg.com/a/1276018586/javascripts/hover_cards.js?1276019402" type="text/javascript"></script>
      </body>
      </html>
      Twitter
    • 48. var a=_d.createElement("script");
      a.type="text/javascript";
      a.src=b;
      _d.getElementsByTagName("head")[0].appendChild(a);
      Bing
      onload
    • 49.
    • 50. Ray Morgan
      Zappos.com
      MakindeAdeagbo
      Facebook
      Jenn Lukas
      Happy Cog
      http://www.flickr.com/photos/waltzaround/4041024134/
    • 51.
    • 52. speed matters
      focus on the frontend
      run Page Speed and YSlow
      progressive enhancement  progressive rendering
      takeaways
      http://www.flickr.com/photos/34771728@N00/361526991/
    • 53. Steve Souders
      @souders, souders@google.com
      stevesouders.com/docs/atmedia-20100611.pptx
      flickr.com/photos/nj_dodge/187190601/

    ×