JSConf US 2010


Published on

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

  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

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/
  • JSConf US 2010

    1. best<br />of<br />steve<br />http://stevesouders.com/docs/jsconfus-20100418.pptx<br />Disclaimer: This content does not necessarily reflect the opinions of my employer.<br />http://www.flickr.com/photos/lrargerich/3115367361/<br />
    2. http://www.flickr.com/photos/bekahstargazing/318930460/<br />
    3. the importance of frontend performance<br />9%<br />91%<br />17%<br />83%<br />iGoogle, primed cache<br />iGoogle, empty cache<br />http://www.flickr.com/photos/minami/2458184654/<br />
    4. Site speed in search rank<br />Screen shot of blog post<br />
    5. 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 />
    6. P3PC<br />Performance of 3rd Party Content<br />Ads<br />Widgets<br />Analytics<br />http://www.flickr.com/photos/ntr23/729463293/<br />
    7. document.getElementsByTagName('head‘)[0] .appendChild(domscript); <br />document.documentElement.firstChild .appendChild(ga);<br />s = document.getElementsByTagName ('script')[0]; <br />s.parentNode.insertBefore(ga, s);<br />http://www.flickr.com/photos/amodiovalerioverde/425333516/<br />appendChild or insertBefore?<br />- Souders (May 2008)<br />- Google Analytics (Dec 2009)<br />- Google Analytics (Feb 2010)<br />
    8. if (q.insertBefore) {<br />var s = _get(q.insertBefore, id);<br /> if (s) {<br />s.parentNode.insertBefore(n, s);<br /> }<br />} else {<br />h.appendChild(n);<br />}<br />- YUI Loader 2.6.0 (2008)<br />http://www.flickr.com/photos/amodiovalerioverde/425333516/<br />appendChild or insertBefore?<br />
    9. head = document.getElementsByTagName ("head")[0] || document.documentElement;<br />// Use insertBefore instead of appendChild to circumvent an IE6 bug.<br />// This arises when a base node is used (#2709 and #4378).<br />head.insertBefore(script, head.firstChild);<br />- jQuery<br />http://www.flickr.com/photos/amodiovalerioverde/425333516/<br />appendChild or insertBefore?<br />
    10. var f=document.getElementsByTagName("script");<br />var b=f[f.length-1]; // b is last script tag<br />if(b==null){ return; }<br />vari=document.createElement("script");<br />i.language="javascript"; // i is a script element<br />i.setAttribute("type","text/javascript");<br />var j=""; // j is a string<br />j+="document.write('<scr'+'ipt language="javascript" src=""+c+""></scr'+'ipt>');";<br />var g=document.createTextNode(j); // not used<br />b.parentNode.insertBefore(i,b);<br />appendChild(i,j);<br />function appendChild(a,b){<br /> if(null==a.canHaveChildren||a.canHaveChildren){<br />a.appendChild(document.createTextNode(b));<br /> }<br /> else{ a.text=b;}<br />}<br />- Collective Media<br />http://www.flickr.com/photos/amodiovalerioverde/425333516/<br />appendChild or insertBefore?<br />
    11. “Frag Tag”<br />Alex Russell<br />snippet<br /><FRAG><br /><script src=“snippet.js”></script><br /></FRAG><br />doesn’t block rendering<br />asyncdocument.write<br />JavaScript sandboxing<br />just a twinkle in my eye<br />frag tag<br />http://www.flickr.com/photos/bestrated1/2141687384/<br />
    12. browser wishlist<br />http://www.stevesouders.com/blog/2010/02/15/browser-performance-wishlist/<br />Frag tag<br />SPDY<br />non-blocking scripts<br />SCRIPT attributes<br />resource packages<br />border-radius<br />cache redirects<br />link prefetch<br />Web Timing spec<br />remote JS debugging<br />web sockets<br />History<br />progressive XHR<br />anchor ping<br />stylesheet, inline js<br />inline script defer<br />@import<br />@font-face<br />stylesheets,iframes<br />paint events<br />missing schema<br />http://www.flickr.com/photos/eole/380316678/<br />
    13. browser disk cache<br />default size too small<br /><ul><li>IE: 8-50M
    14. Firefox: 50M
    15. Chrome: < 80M</li></ul>eviction algorithm improvements<br /><ul><li>content-type: script > image
    16. past impact: 1000 ms > 100 ms
    17. preferred sites</li></ul>http://stevesouders.com/cache.php<br />http://www.flickr.com/photos/minami/2458184654/<br />
    18. What makes sites feel slow?<br />http://www.flickr.com/photos/kevincollins/234678305/<br />
    19. (lack of)<br />Progressive Rendering<br />[next page being loaded]<br />http://www.flickr.com/photos/kevincollins/234678305/<br />
    20. Search<br />
    21. News<br />
    22. Shopping<br />
    23. Sports<br />
    24. Progressive Enhancement<br />deliver HTML<br />defer JS<br />avoid DOM<br />decorate later<br />
    25. Progressive Enhancement<br /><br />Progressive Rendering<br />
    26. Yahoo!<br />Wikipedia<br />eBay<br />AOL<br />MySpace<br />YouTube<br />Facebook<br />Why focus on JavaScript?<br />
    27. scripts block<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: IE 8, FF 3.5, Chr3, Saf 4<br />
    28. 26% avg<br />252K avg<br />initial payload and execution<br />
    29. 29% avg<br />229 K avg<br />initial payload and execution<br />
    30. splitting 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 />
    31. news<br />http://www.flickr.com/photos/motionblur/3049984012/<br />
    32. Browserscope<br />
    33. HTTP Archive Format<br />(HAR)<br />http://www.flickr.com/photos/duncanfawkes/2585929403/<br />
    34. speed matters<br />focus on the frontend<br />run Page Speed and YSlow<br />progressive enhancement  progressive rendering<br />http://stevesouders.com/cache.php<br />takeaways<br />http://www.flickr.com/photos/34771728@N00/361526991/<br />
    35. Steve Souders<br />souders@google.com<br />http://stevesouders.com/docs/jsconfus-20100418.pptx<br />http://flickr.com/photos/nj_dodge/187190601/<br />