Your SlideShare is downloading. ×
0
JSConf US 2010
JSConf US 2010
JSConf US 2010
JSConf US 2010
JSConf US 2010
JSConf US 2010
JSConf US 2010
JSConf US 2010
JSConf US 2010
JSConf US 2010
JSConf US 2010
JSConf US 2010
JSConf US 2010
JSConf US 2010
JSConf US 2010
JSConf US 2010
JSConf US 2010
JSConf US 2010
JSConf US 2010
JSConf US 2010
JSConf US 2010
JSConf US 2010
JSConf US 2010
JSConf US 2010
JSConf US 2010
JSConf US 2010
JSConf US 2010
JSConf US 2010
JSConf US 2010
JSConf US 2010
JSConf US 2010
JSConf US 2010
JSConf US 2010
JSConf US 2010
JSConf US 2010
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

JSConf US 2010

8,971

Published on

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

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
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/
  • Transcript

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

    ×