JSConf US 2010
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

JSConf US 2010

on

  • 11,147 views

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

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

Statistics

Views

Total Views
11,147
Views on SlideShare
11,084
Embed Views
63

Actions

Likes
22
Downloads
154
Comments
0

2 Embeds 63

http://www.slideshare.net 58
http://www.techgig.com 5

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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/

JSConf US 2010 Presentation 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
    • IE: 8-50M
    • 20. Firefox: 50M
    • 21. Chrome: < 80M
    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/