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/
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=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/
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/
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/
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