JSConf US 2010

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/

http://www.flickr.com/photos/bekahstargazing/318930460/

the importance of frontend performance
9%
91%
17%
83%
iGoogle, primed cache
iGoogle, empty cache
http://www.flickr.com/photos/minami/2458184654/

Site speed in search rank
Screen shot of blog post

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

P3PC
Performance of 3rd Party Content
Ads
Widgets
Analytics
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?
- Souders (May 2008)
- Google Analytics (Dec 2009)
- Google Analytics (Feb 2010)

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)

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

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

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/

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/

(lack of)
Progressive Rendering
[next page being loaded]
http://www.flickr.com/photos/kevincollins/234678305/

Search

Shopping

Sports

Progressive Enhancement
deliver HTML
defer JS
avoid DOM
decorate later

Progressive Enhancement

Progressive Rendering

Yahoo!
Wikipedia
eBay
AOL
MySpace
YouTube
Facebook
Why focus on JavaScript?

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

26% avg
252K avg
initial payload and execution

29% avg
229 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
souders@google.com
http://stevesouders.com/docs/jsconfus-20100418.pptx
http://flickr.com/photos/nj_dodge/187190601/

JSConf US 2010

by Steve Souders

Accessibility

Upload Details

Usage Rights

2 Embeds 62

Statistics

JSConf US 2010 Presentation Transcript

http://www.slideshare.net	58
http://www.techgig.com	4