Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

JSConf US 2010


Published on

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

  • Be the first to comment

JSConf US 2010

  1. best<br />of<br />steve<br /><br />Disclaimer: This content does not necessarily reflect the opinions of my employer.<br /><br />
  2.<br />
  3. the importance of frontend performance<br />9%<br />91%<br />17%<br />83%<br />iGoogle, primed cache<br />iGoogle, empty cache<br /><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 /><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 /><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 /><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 /><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 /><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 /><br />
  12. browser wishlist<br /><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 /><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><br /><br />
  18. What makes sites feel slow?<br /><br />
  19. (lack of)<br />Progressive Rendering<br />[next page being loaded]<br /><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 /><br />
  31. news<br /><br />
  32. Browserscope<br />
  33. HTTP Archive Format<br />(HAR)<br /><br />
  34. speed matters<br />focus on the frontend<br />run Page Speed and YSlow<br />progressive enhancement  progressive rendering<br /><br />takeaways<br /><br />
  35. Steve Souders<br /><br /><br /><br />