0
best<br />of<br />steve<br />http://stevesouders.com/docs/jsconfus-20100418.pptx<br />Disclaimer: This content does not ne...
http://www.flickr.com/photos/bekahstargazing/318930460/<br />
the importance of  frontend performance<br />9%<br />91%<br />17%<br />83%<br />iGoogle, primed cache<br />iGoogle, empty ...
Site speed in search rank<br />Screen shot of blog post<br />
Both<br />combine scripts<br />combine stylesheets<br />add an Expires header<br />gzip responses<br />put stylesheets at ...
P3PC<br />Performance of 3rd Party Content<br />Ads<br />Widgets<br />Analytics<br />http://www.flickr.com/photos/ntr23/72...
document.getElementsByTagName('head‘)[0] .appendChild(domscript); <br />document.documentElement.firstChild .appendChild(g...
if (q.insertBefore) {<br />var s = _get(q.insertBefore, id);<br />  if (s) {<br />s.parentNode.insertBefore(n, s);<br />  ...
head = document.getElementsByTagName ("head")[0] || document.documentElement;<br />// Use insertBefore instead of appendCh...
var f=document.getElementsByTagName("script");<br />var b=f[f.length-1];     // b is last script tag<br />if(b==null){ ret...
“Frag Tag”<br />Alex Russell<br />snippet<br /><FRAG><br /><script src=“snippet.js”></script><br /></FRAG><br />doesn’t bl...
browser wishlist<br />http://www.stevesouders.com/blog/2010/02/15/browser-performance-wishlist/<br />Frag tag<br />SPDY<br...
browser disk cache<br />default size too small<br /><ul><li>IE: 8-50M
Firefox: 50M
Chrome: < 80M</li></ul>eviction algorithm improvements<br /><ul><li>content-type: script > image
past impact: 1000 ms > 100 ms
preferred sites</li></ul>http://stevesouders.com/cache.php<br />http://www.flickr.com/photos/minami/2458184654/<br />
What makes sites feel slow?<br />http://www.flickr.com/photos/kevincollins/234678305/<br />
(lack of)<br />Progressive Rendering<br />[next page being loaded]<br />http://www.flickr.com/photos/kevincollins/23467830...
Search<br />
News<br />
Shopping<br />
Sports<br />
Progressive Enhancement<br />deliver HTML<br />defer JS<br />avoid DOM<br />decorate later<br />
Progressive Enhancement<br /><br />Progressive Rendering<br />
Yahoo!<br />Wikipedia<br />eBay<br />AOL<br />MySpace<br />YouTube<br />Facebook<br />Why focus on JavaScript?<br />
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...
26% avg<br />252K avg<br />initial payload and execution<br />
29% avg<br />229 K avg<br />initial payload and execution<br />
Upcoming SlideShare
Loading in...5
×

JSConf US 2010

8,985

Published on

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,985
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
157
Comments
0
Likes
23
Embeds 0
No embeds

No notes for slide
  • YtseJam Photography, &quot;Going nowhere fast&quot;, 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&amp;ival=500http://www.webpagetest.org/video/compare.php?tests=091019_2JHW,091019_2JHY,091019_2JHX,091019_2JJ0,091019_2JHZ&amp;ival=500google &amp; yahoo: http://www.webpagetest.org/video/view.php?id=091105_e6a07e497145cb5fc721e6f437e75a3cbing &amp; 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&amp;ival=1000
  • http://stevesouders.com/p3/index.php?sites=ebay,amazon,netflix,target,bestbuy,ikea&amp;ival=2000
  • http://stevesouders.com/p3/index.php?sites=ebay,amazon,netflix,target,bestbuy,ikea&amp;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 of "JSConf US 2010"

    1. 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. 2. http://www.flickr.com/photos/bekahstargazing/318930460/<br />
    3. 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. 4. Site speed in search rank<br />Screen shot of blog post<br />
    5. 5.
    6. 6. 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 />
    7. 7.
    8. 8.
    9. 9.
    10. 10.
    11. 11. P3PC<br />Performance of 3rd Party Content<br />Ads<br />Widgets<br />Analytics<br />http://www.flickr.com/photos/ntr23/729463293/<br />
    12. 12.
    13. 13. 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 />
    14. 14. 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 />
    15. 15. 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 />
    16. 16. 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 />
    17. 17. “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 />
    18. 18. 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 />
    19. 19. browser disk cache<br />default size too small<br /><ul><li>IE: 8-50M
    20. 20. Firefox: 50M
    21. 21. Chrome: < 80M</li></ul>eviction algorithm improvements<br /><ul><li>content-type: script > image
    22. 22. past impact: 1000 ms > 100 ms
    23. 23. preferred sites</li></ul>http://stevesouders.com/cache.php<br />http://www.flickr.com/photos/minami/2458184654/<br />
    24. 24. What makes sites feel slow?<br />http://www.flickr.com/photos/kevincollins/234678305/<br />
    25. 25. (lack of)<br />Progressive Rendering<br />[next page being loaded]<br />http://www.flickr.com/photos/kevincollins/234678305/<br />
    26. 26. Search<br />
    27. 27. News<br />
    28. 28. Shopping<br />
    29. 29. Sports<br />
    30. 30. Progressive Enhancement<br />deliver HTML<br />defer JS<br />avoid DOM<br />decorate later<br />
    31. 31. Progressive Enhancement<br /><br />Progressive Rendering<br />
    32. 32. Yahoo!<br />Wikipedia<br />eBay<br />AOL<br />MySpace<br />YouTube<br />Facebook<br />Why focus on JavaScript?<br />
    33. 33. 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 />
    34. 34. 26% avg<br />252K avg<br />initial payload and execution<br />
    35. 35. 29% avg<br />229 K avg<br />initial payload and execution<br />
    36. 36. 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 />
    37. 37. news<br />http://www.flickr.com/photos/motionblur/3049984012/<br />
    38. 38. Browserscope<br />
    39. 39. HTTP Archive Format<br />(HAR)<br />http://www.flickr.com/photos/duncanfawkes/2585929403/<br />
    40. 40.
    41. 41. 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 />
    42. 42. Steve Souders<br />souders@google.com<br />http://stevesouders.com/docs/jsconfus-20100418.pptx<br />http://flickr.com/photos/nj_dodge/187190601/<br />
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×