jsconf us 2010
DESCRIPTION
Slides from Steve Souders' presentation at JSConf US on April 18, 2010.TRANSCRIPT
![Page 1: JSConf US 2010](https://reader035.vdocuments.mx/reader035/viewer/2022081420/554a5353b4c90531228b4c21/html5/thumbnails/1.jpg)
best
of
stevehttp://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/
![Page 2: JSConf US 2010](https://reader035.vdocuments.mx/reader035/viewer/2022081420/554a5353b4c90531228b4c21/html5/thumbnails/2.jpg)
http://www.flickr.com/photos/bekahstargazing/318930460/
![Page 3: JSConf US 2010](https://reader035.vdocuments.mx/reader035/viewer/2022081420/554a5353b4c90531228b4c21/html5/thumbnails/3.jpg)
17% 83%
iGoogle, primed cache
the importance of frontend performance
9% 91%
iGoogle, empty cache
http://www.flickr.com/photos/minami/2458184654/
![Page 4: JSConf US 2010](https://reader035.vdocuments.mx/reader035/viewer/2022081420/554a5353b4c90531228b4c21/html5/thumbnails/4.jpg)
Site speed in search rank
Screen shot of blog post
![Page 5: JSConf US 2010](https://reader035.vdocuments.mx/reader035/viewer/2022081420/554a5353b4c90531228b4c21/html5/thumbnails/5.jpg)
![Page 6: JSConf US 2010](https://reader035.vdocuments.mx/reader035/viewer/2022081420/554a5353b4c90531228b4c21/html5/thumbnails/6.jpg)
Bothcombine 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
YSlowuse CSS sprites
use a CDN
configure ETags
use GET for Ajax requests
reduce # of DOM elements
no 404s
avoid image filters
optimize faviconPage Speeddefer loading JS
remove unused CSS
use efficient CSS selectors
optimize images
optimize order of CSS & JS
shard domains
leverage proxy caching
![Page 7: JSConf US 2010](https://reader035.vdocuments.mx/reader035/viewer/2022081420/554a5353b4c90531228b4c21/html5/thumbnails/7.jpg)
![Page 8: JSConf US 2010](https://reader035.vdocuments.mx/reader035/viewer/2022081420/554a5353b4c90531228b4c21/html5/thumbnails/8.jpg)
![Page 9: JSConf US 2010](https://reader035.vdocuments.mx/reader035/viewer/2022081420/554a5353b4c90531228b4c21/html5/thumbnails/9.jpg)
P3PCPerformance of 3rd Party
Content
AdsWidgetsAnalytics
http://www.flickr.com/photos/ntr23/729463293/
![Page 10: JSConf US 2010](https://reader035.vdocuments.mx/reader035/viewer/2022081420/554a5353b4c90531228b4c21/html5/thumbnails/10.jpg)
![Page 11: JSConf US 2010](https://reader035.vdocuments.mx/reader035/viewer/2022081420/554a5353b4c90531228b4c21/html5/thumbnails/11.jpg)
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?
- Google Analytics (Dec 2009)
- Souders (May 2008)
- Google Analytics (Feb 2010)
![Page 12: JSConf US 2010](https://reader035.vdocuments.mx/reader035/viewer/2022081420/554a5353b4c90531228b4c21/html5/thumbnails/12.jpg)
if (q.insertBefore) {
var s = _get(q.insertBefore, id);
if (s) {
s.parentNode.insertBefore(n, s);
}
} else {
h.appendChild(n);
}
http://www.flickr.com/photos/amodiovalerioverde/425333516/
appendChild or insertBefore?
- YUI Loader 2.6.0 (2008)
![Page 13: JSConf US 2010](https://reader035.vdocuments.mx/reader035/viewer/2022081420/554a5353b4c90531228b4c21/html5/thumbnails/13.jpg)
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);
http://www.flickr.com/photos/amodiovalerioverde/425333516/
appendChild or insertBefore?
- jQuery
![Page 14: JSConf US 2010](https://reader035.vdocuments.mx/reader035/viewer/2022081420/554a5353b4c90531228b4c21/html5/thumbnails/14.jpg)
var f=document.getElementsByTagName("script");var b=f[f.length-1]; // b is last script tagif(b==null){ return; }var i=document.createElement("script");i.language="javascript"; // i is a script elementi.setAttribute("type","text/javascript");var j=""; // j is a stringj+="document.write('<scr'+'ipt language=\"javascript\"
src=\""+c+"\"></scr'+'ipt>');";var g=document.createTextNode(j); // not usedb.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;}}
http://www.flickr.com/photos/amodiovalerioverde/425333516/
appendChild or insertBefore?
- Collective Media
![Page 15: JSConf US 2010](https://reader035.vdocuments.mx/reader035/viewer/2022081420/554a5353b4c90531228b4c21/html5/thumbnails/15.jpg)
“Frag Tag”<FRAG><script src=“snippet.js”></script></FRAG>
doesn’t block renderingasync document.writeJavaScript sandboxingjust a twinkle in my eye
Alex Russell
http://www.flickr.com/photos/bestrated1/2141687384/
snippet
frag tag
![Page 16: JSConf US 2010](https://reader035.vdocuments.mx/reader035/viewer/2022081420/554a5353b4c90531228b4c21/html5/thumbnails/16.jpg)
browser wishlistFrag tagSPDYnon-blocking scriptsSCRIPT attributesresource packagesborder-radiuscache redirectslink prefetchWeb Timing specremote JS debuggingweb sockets
http://www.flickr.com/photos/eole/380316678/
History
progressive XHR
anchor ping
stylesheet, inline js
inline script defer
@import
@font-face
stylesheets,iframes
paint events
missing schema
http://www.stevesouders.com/blog/2010/02/15/browser-performance-wishlist/
![Page 17: JSConf US 2010](https://reader035.vdocuments.mx/reader035/viewer/2022081420/554a5353b4c90531228b4c21/html5/thumbnails/17.jpg)
browser disk cache
default size too small• IE: 8-50M• Firefox: 50M• Chrome: < 80M
eviction algorithm improvements• content-type: script > image• past impact: 1000 ms > 100 ms• preferred sites
http://stevesouders.com/cache.php
http://www.flickr.com/photos/minami/2458184654/
![Page 18: JSConf US 2010](https://reader035.vdocuments.mx/reader035/viewer/2022081420/554a5353b4c90531228b4c21/html5/thumbnails/18.jpg)
What makes sites feel slow?
http://www.flickr.com/photos/kevincollins/
234678305/
![Page 19: JSConf US 2010](https://reader035.vdocuments.mx/reader035/viewer/2022081420/554a5353b4c90531228b4c21/html5/thumbnails/19.jpg)
[next page being loaded]
(lack of)
Progressive Rendering
http://www.flickr.com/photos/kevincollins/
234678305/
![Page 20: JSConf US 2010](https://reader035.vdocuments.mx/reader035/viewer/2022081420/554a5353b4c90531228b4c21/html5/thumbnails/20.jpg)
Search
![Page 22: JSConf US 2010](https://reader035.vdocuments.mx/reader035/viewer/2022081420/554a5353b4c90531228b4c21/html5/thumbnails/22.jpg)
Shopping
![Page 23: JSConf US 2010](https://reader035.vdocuments.mx/reader035/viewer/2022081420/554a5353b4c90531228b4c21/html5/thumbnails/23.jpg)
Sports
![Page 24: JSConf US 2010](https://reader035.vdocuments.mx/reader035/viewer/2022081420/554a5353b4c90531228b4c21/html5/thumbnails/24.jpg)
Progressive
Enhancementdeliver HTML
defer JS
avoid DOM
decorate later
![Page 25: JSConf US 2010](https://reader035.vdocuments.mx/reader035/viewer/2022081420/554a5353b4c90531228b4c21/html5/thumbnails/25.jpg)
Progressive
Enhancement
Progressive Rendering
![Page 26: JSConf US 2010](https://reader035.vdocuments.mx/reader035/viewer/2022081420/554a5353b4c90531228b4c21/html5/thumbnails/26.jpg)
AOLeBayFacebookMySpaceWikipediaYahoo!
Why focus on JavaScript?
YouTube
![Page 27: JSConf US 2010](https://reader035.vdocuments.mx/reader035/viewer/2022081420/554a5353b4c90531228b4c21/html5/thumbnails/27.jpg)
scripts block<script src="A.js"> blocks parallel downloads and rendering
7 secs: IE 8, FF 3.5, Chr 3, Saf 4
9 secs: IE 6-7, FF 3.0, Chr 1, Op 9-10, Saf 3
![Page 28: JSConf US 2010](https://reader035.vdocuments.mx/reader035/viewer/2022081420/554a5353b4c90531228b4c21/html5/thumbnails/28.jpg)
JavaScript
Functions Executed before onload
www.aol.com 324 K 30%
www.ebay.com 234 K 34%
www.facebook.com 553 K 7%
www.google.com/search
21 K ??%
www.bing.com/search 10 K 35%
www.msn.com 152 K 55%
www.myspace.com 248 K 29%
en.wikipedia.org/wiki 99 K 19%
www.yahoo.com 381 K 33%
www.youtube.com 274 K 16% 29% avg229 K avg
initial payload and execution
![Page 29: JSConf US 2010](https://reader035.vdocuments.mx/reader035/viewer/2022081420/554a5353b4c90531228b4c21/html5/thumbnails/29.jpg)
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/
![Page 30: JSConf US 2010](https://reader035.vdocuments.mx/reader035/viewer/2022081420/554a5353b4c90531228b4c21/html5/thumbnails/30.jpg)
news
http://www.flickr.com/photos/motionblur/3049984012/
![Page 31: JSConf US 2010](https://reader035.vdocuments.mx/reader035/viewer/2022081420/554a5353b4c90531228b4c21/html5/thumbnails/31.jpg)
Browserscope
![Page 32: JSConf US 2010](https://reader035.vdocuments.mx/reader035/viewer/2022081420/554a5353b4c90531228b4c21/html5/thumbnails/32.jpg)
HTTP Archive Format
(HAR)
http://www.flickr.com/photos/duncanfawkes/2585929403/
![Page 33: JSConf US 2010](https://reader035.vdocuments.mx/reader035/viewer/2022081420/554a5353b4c90531228b4c21/html5/thumbnails/33.jpg)
![Page 34: JSConf US 2010](https://reader035.vdocuments.mx/reader035/viewer/2022081420/554a5353b4c90531228b4c21/html5/thumbnails/34.jpg)
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/
![Page 35: JSConf US 2010](https://reader035.vdocuments.mx/reader035/viewer/2022081420/554a5353b4c90531228b4c21/html5/thumbnails/35.jpg)
Steve Souders
http://stevesouders.com/docs/jsconfus-20100418.pptx
http://flickr.com/photos/nj_dodge/187190601/