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

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

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

11. P3PC Performance of 3rd Party Content Ads Widgets Analytics http://www.flickr.com/photos/ntr23/729463293/

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=quot;javascriptquot; src=quot;"+c+"quot;></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/

20. Firefox: 50M

22. past impact: 1000 ms > 100 ms

23. preferred siteshttp://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/

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/