Embed Size (px)
DESCRIPTION
Slides from Steve Souders' presentation at JSConf US on April 18, 2010.
Citation preview
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/
http://www.flickr.com/photos/bekahstargazing/318930460/
17% 83%
iGoogle, primed cache
the importance of frontend performance
9% 91%
iGoogle, empty cache
http://www.flickr.com/photos/minami/2458184654/
Site speed in search rank
Screen shot of blog post
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
P3PCPerformance of 3rd Party
Content
AdsWidgetsAnalytics
http://www.flickr.com/photos/ntr23/729463293/
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)
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)
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
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
“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
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/
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/
What makes sites feel slow?
http://www.flickr.com/photos/kevincollins/
234678305/
[next page being loaded]
(lack of)
Progressive Rendering
http://www.flickr.com/photos/kevincollins/
234678305/
Search
Shopping
Sports
Progressive
Enhancementdeliver HTML
defer JS
avoid DOM
decorate later
Progressive
Enhancement
Progressive Rendering
AOLeBayFacebookMySpaceWikipediaYahoo!
Why focus on JavaScript?
YouTube
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
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
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/
news
http://www.flickr.com/photos/motionblur/3049984012/
Browserscope
HTTP Archive Format
(HAR)
http://www.flickr.com/photos/duncanfawkes/2585929403/
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/
Steve Souders
http://stevesouders.com/docs/jsconfus-20100418.pptx
http://flickr.com/photos/nj_dodge/187190601/
