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

JSConf US 2010

8,889

Published on

Slides from Steve Souders' presentation at JSConf US on April 18, 2010.

Slides from Steve Souders' presentation at JSConf US on April 18, 2010.

0 Comments
23 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
8,889
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
156
Comments
0
Likes
23
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
  • YtseJam Photography, "Going nowhere fast", http://www.flickr.com/photos/thatguyfromcchs08/2300190277/
  • Time measurements from real users.
  • http://stevesouders.com/p3/index.php?sites=google-search,yahoo-search,bing,ask,aol-search&ival=500http://www.webpagetest.org/video/compare.php?tests=091019_2JHW,091019_2JHY,091019_2JHX,091019_2JJ0,091019_2JHZ&ival=500google & yahoo: http://www.webpagetest.org/video/view.php?id=091105_e6a07e497145cb5fc721e6f437e75a3cbing & yahoo: http://www.webpagetest.org/video/view.php?id=091105_c5cca3a0bd59ca54fb1ba6f591228acfalso: http://www.webpagetest.org/video/view.php?id=091105_a005f5803aa983f897a94d52094d297f4b2e0e65.slow
  • http://stevesouders.com/p3/index.php?sites=yahoo-news,cnn,cnet,google-news,nytimes,msnbc,foxnews&ival=1000
  • http://stevesouders.com/p3/index.php?sites=ebay,amazon,netflix,target,bestbuy,ikea&ival=2000
  • http://stevesouders.com/p3/index.php?sites=ebay,amazon,netflix,target,bestbuy,ikea&ival=2000
  • Data Source: Steve Soudersaol 76%ebay 45%facebook 41%google 42%live search 9%msn 37%myspace 37%yahoo 45%youtube 60%wikipedia 26%average 42%
  • Data source: Steve Souders
  • Data source: Steve Souders
  • http://www.stevesouders.com/blog/2009/10/19/http-archive-specification-firebug-and-httpwatch/
  • Transcript

    • 1. best
      of
      steve
      http://stevesouders.com/docs/jsconfus-20100418.pptx
      Disclaimer: This content does not necessarily reflect the opinions of my employer.
      http://www.flickr.com/photos/lrargerich/3115367361/
    • 2. http://www.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. Site speed in search rank
      Screen shot of blog post
    • 5.
    • 6. 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
    • 7.
    • 8.
    • 9.
    • 10.
    • 11. P3PC
      Performance of 3rd Party Content
      Ads
      Widgets
      Analytics
      http://www.flickr.com/photos/ntr23/729463293/
    • 12.
    • 13. document.getElementsByTagName('head‘)[0] .appendChild(domscript);
      document.documentElement.firstChild .appendChild(ga);
      s = document.getElementsByTagName ('script')[0];
      s.parentNode.insertBefore(ga, s);
      http://www.flickr.com/photos/amodiovalerioverde/425333516/
      appendChild or insertBefore?
      - Souders (May 2008)
      - Google Analytics (Dec 2009)
      - Google Analytics (Feb 2010)
    • 14. if (q.insertBefore) {
      var s = _get(q.insertBefore, id);
      if (s) {
      s.parentNode.insertBefore(n, s);
      }
      } else {
      h.appendChild(n);
      }
      - YUI Loader 2.6.0 (2008)
      http://www.flickr.com/photos/amodiovalerioverde/425333516/
      appendChild or insertBefore?
    • 15. head = document.getElementsByTagName ("head")[0] || document.documentElement;
      // Use insertBefore instead of appendChild to circumvent an IE6 bug.
      // This arises when a base node is used (#2709 and #4378).
      head.insertBefore(script, head.firstChild);
      - jQuery
      http://www.flickr.com/photos/amodiovalerioverde/425333516/
      appendChild or insertBefore?
    • 16. var f=document.getElementsByTagName("script");
      var b=f[f.length-1]; // b is last script tag
      if(b==null){ return; }
      vari=document.createElement("script");
      i.language="javascript"; // i is a script element
      i.setAttribute("type","text/javascript");
      var j=""; // j is a string
      j+="document.write('<scr'+'ipt language="javascript" src=""+c+""></scr'+'ipt>');";
      var g=document.createTextNode(j); // not used
      b.parentNode.insertBefore(i,b);
      appendChild(i,j);
      function appendChild(a,b){
      if(null==a.canHaveChildren||a.canHaveChildren){
      a.appendChild(document.createTextNode(b));
      }
      else{ a.text=b;}
      }
      - Collective Media
      http://www.flickr.com/photos/amodiovalerioverde/425333516/
      appendChild or insertBefore?
    • 17. “Frag Tag”
      Alex Russell
      snippet
      <FRAG>
      <script src=“snippet.js”></script>
      </FRAG>
      doesn’t block rendering
      asyncdocument.write
      JavaScript sandboxing
      just a twinkle in my eye
      frag tag
      http://www.flickr.com/photos/bestrated1/2141687384/
    • 18. browser wishlist
      http://www.stevesouders.com/blog/2010/02/15/browser-performance-wishlist/
      Frag tag
      SPDY
      non-blocking scripts
      SCRIPT attributes
      resource packages
      border-radius
      cache redirects
      link prefetch
      Web Timing spec
      remote JS debugging
      web sockets
      History
      progressive XHR
      anchor ping
      stylesheet, inline js
      inline script defer
      @import
      @font-face
      stylesheets,iframes
      paint events
      missing schema
      http://www.flickr.com/photos/eole/380316678/
    • 19. browser disk cache
      default size too small
      eviction algorithm improvements
      • content-type: script > image
      • 22. past impact: 1000 ms > 100 ms
      • 23. preferred sites
      http://stevesouders.com/cache.php
      http://www.flickr.com/photos/minami/2458184654/
    • 24. What makes sites feel slow?
      http://www.flickr.com/photos/kevincollins/234678305/
    • 25. (lack of)
      Progressive Rendering
      [next page being loaded]
      http://www.flickr.com/photos/kevincollins/234678305/
    • 26. Search
    • 27. News
    • 28. Shopping
    • 29. Sports
    • 30. Progressive Enhancement
      deliver HTML
      defer JS
      avoid DOM
      decorate later
    • 31. Progressive Enhancement

      Progressive Rendering
    • 32. Yahoo!
      Wikipedia
      eBay
      AOL
      MySpace
      YouTube
      Facebook
      Why focus on JavaScript?
    • 33. scripts block
      <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
    • 34. 26% avg
      252K avg
      initial payload and execution
    • 35. 29% avg
      229 K avg
      initial payload and execution
    • 36. splitting 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/
    • 37. news
      http://www.flickr.com/photos/motionblur/3049984012/
    • 38. Browserscope
    • 39. HTTP Archive Format
      (HAR)
      http://www.flickr.com/photos/duncanfawkes/2585929403/
    • 40.
    • 41. speed matters
      focus on the frontend
      run Page Speed and YSlow
      progressive enhancement  progressive rendering
      http://stevesouders.com/cache.php
      takeaways
      http://www.flickr.com/photos/34771728@N00/361526991/
    • 42. Steve Souders
      souders@google.com
      http://stevesouders.com/docs/jsconfus-20100418.pptx
      http://flickr.com/photos/nj_dodge/187190601/

    ×