Transcript High Performance Web Sites 14 rules for faster

Even Faster Web Sites
http://stevesouders.com/docs/wikipedia-20090812.ppt
Disclaimer: This content does not necessarily reflect the opinions of my employer.
the importance of frontend
performance
9%
17%
91%
83%
iGoogle, primed cache
iGoogle, empty cache
14 RULES
1. MAKE FEWER HTTP REQUESTS
2. USE A CDN
3. ADD AN EXPIRES HEADER
4. GZIP COMPONENTS
5. PUT STYLESHEETS AT THE TOP
6. PUT SCRIPTS AT THE BOTTOM
7. AVOID CSS EXPRESSIONS
8. MAKE JS AND CSS EXTERNAL
9. REDUCE DNS LOOKUPS
10.MINIFY JS
11.AVOID REDIRECTS
12.REMOVE DUPLICATE SCRIPTS
13.CONFIGURE ETAGS
14.MAKE AJAX CACHEABLE
Even Faster Web Sites
Splitting the initial payload
Loading scripts without blocking
Coupling asynchronous scripts
Positioning inline scripts
Sharding dominant domains
Flushing the document early
Using iframes sparingly
Simplifying CSS Selectors
Understanding Ajax performance..........Doug Crockford
Creating responsive web apps............Ben Galbraith, Dion Almaer
Writing efficient JavaScript.............Nicholas Zakas
Scaling with Comet.....................Dylan Schiemann
Going beyond gzipping...............Tony Gentilcore
Optimizing images...................Stoyan Stefanov, Nicole Sullivan
Why focus on JavaScript?
Yahoo!
Wikipedia
eBay
AOL
MySpace
YouTube
Facebook
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(?), Chr 2, Saf 4
initial payload and execution
JavaScript
Functions Executed
before onload
www.aol.com
www.ebay.com
www.facebook.com
www.google.com/search
115K
183K
1088K
15K
30%
44%
9%
45%
search.live.com/results
www.msn.com
www.myspace.com
en.wikipedia.org/wiki
17K
131K
297K
114K
24%
31%
18%
32%
www.yahoo.com
www.youtube.com
321K
240K 252K avg
13%
18% 26% avg
splitting the initial payload
split your JavaScript between what's needed
to render the page and everything else
load "everything else" after the page is
rendered
separate manually (Page Speed); tools
needed to automate this (Doloto)
load scripts without blocking – how?
MSN.com: parallel scripts
MSN
Scripts and other resources downloaded
in parallel! How? Secret sauce?!
var p=
g.getElementsByTagName("HEAD")[0];
var c=g.createElement("script");
c.type="text/javascript";
c.onreadystatechange=n;
c.onerror=c.onload=k;
c.src=e;
p.appendChild(c)
Loading Scripts Without Blocking
XHR Eval
XHR Injection
Script in Iframe
Script DOM Element
Script Defer
document.write Script Tag
browser busy indicators
Load Scripts Without Blocking
||
domains
existing browser ensures
downcan
scripts
busy
order
loads
differ
normal Script Src
XHR Eval
XHR Injection
Script in Iframe
Script DOM Element
Script Defer
document.write
Script Tag
*Only
size
(bytes)
no
yes
yes
IE,FF
IE,FF
~50
IE,FF
no
no
no
no
~500
IE,FF
no
yes
no
no
~500
IE,FF
no
no
IE,FF
no
~50
IE,FF
yes
yes
FF
FF
~200
IE
yes
yes
IE,FF
IE
~50
IE*
yes
yes
IE,FF
IE
~100
other document.write scripts are downloaded in parallel (in the same script block).
and the winner is...
XHR Eval
XHR Injection
Script in iframe
Script DOM Element
Script Defer
same domains
different domains
Script DOM Element
Script Defer
no order
no order
preserve order
XHR Eval
XHR Injection
Script in iframe
Script DOM Element (IE)
preserve order
Script DOM Element (FF)
Script Defer (IE)
Managed XHR Eval
Managed XHR Injection
Script DOM Element
no busy
Script DOM Element (FF)
Script Defer (IE)
Managed XHR Injection
Managed XHR Eval
no busy
XHR Injection
XHR Eval
Script DOM Element (IE)
show busy
Managed XHR Injection
Managed XHR Eval
Script DOM Element
show busy
Script DOM Element (FF)
Script Defer (IE)
Managed XHR Eval
Managed XHR Injection
Loading Scripts Without Blocking
don't let scripts block other downloads
you can still control execution order, busy
indicators, and onload event
What about inline scripts?
bad: stylesheet followed by
inline script
browsers download stylesheets in parallel
with other resources that follow...
...unless the stylesheet is followed by an
inline script
http://stevesouders.com/cuzillion/?ex=10021
best to move inline scripts above
stylesheets or below other resources
use Link, not @import
mispositioned inline scripts
MSN
Wikipedia
eBay
MySpace
going beyond gzipping
Tony Gentilcore, Chapter 9, Even Faster
Web Sites
Rule 4: Gzip Components from HPWS
HTTP/1.1
request: Accept-Encoding: gzip,deflate
response: Content-Encoding: gzip
Apache 2.x:
AddOutputFilterByType DEFLATE
text/html text/css application/xjavascript
benefits of gzipping
70% reduction in transfer size
not just for HTML!!
all text: JavaScript, CSS, XML, JSON
not binary: images, PDF, Flash
so what's the issue?
15% of users get uncompressed responses
surprize! why?
old browsers? no
Netscape Navigator 3 – 0.0%
Netscape Communicator 4 – 0.1%
Opera 3.5 – 0.0%
IE <3 – 0.01%
clue: most prevalent in the Middle East
who's stripping?
proxy, A-V software
Ad Muncher
CA Internet Security Suite
Accept-Encoding header
stripped
Accept-EncodXng: gzip, deflate
CEQURUX
stripped
Citrix Application Firewall
stripped
ISA 2006
stripped
McAfee Internet Security 6.0
XXXXXXXXXXXXXXX: +++++++++++++
Norton Internet Security 6.0
---------------: -------------
Novell iChain 2.3
stripped
Novell Client Firewall
stripped
WebWasher
stripped
ZoneAlarm Pro 5.5
XXXXXXXXXXXXXXX: XXXXXXXXXXXXX
proxies and anti-virus software disable
compression for easier response filtering
what to do
don't assume compression
go the extra mile to reduce response size
•
•
•
•
•
event delegation (-5%)*
relative URLs (-3%)
minify HTML, JavaScript, and CSS (-4%)
use CSS rules over inline styles (-1%)
alias long JavaScript symbol names (??)
Thanks, Tony!
see Tony's chapter in Even Faster Web Sites
* Results of applying each technique to the Alexa top ten
White Dwarf
http://en.wikipedia.org/wiki/White_dwarf
White Dwarf
combine stylesheets
remove unused CSS (50%)
http://en.wikipedia.org/wiki/White_dwarf
sprite 8 bg images
move inline script
add Expires to upload.w.o
don't use querystring: ?233yz
combine scripts
minify (36K, 36%)
move lower
load async
81% deferrable
combine stylesheets
remove unused CSS (50%)
move inline script
combine scripts
minify (44K, 35%)
move lower
load async
76% deferrable
add Expires to upload.w.o
don't use querystring: ?233yz
don't change URL: 233yz v 233zz
takeaways
focus on the frontend
run YSlow
(http://developer.yahoo.com/yslow)
and Page Speed!
(http://code.google.com/speed/page-speed/)
speed matters
impact on revenue
Bing: +2000 ms  -4.3% revenue/user1
Yahoo: +400 ms  -5-9% full-page traffic
2
Google: +400 ms  -0.59% searches/user1
AOL: fastest users  +50% page views3
Shopzilla: -5000 ms  +7-12% revenue4
1
2
3
4
http://en.oreilly.com/velocity2009/public/schedule/detail/8523
http://www.slideshare.net/stoyan/yslow-20-presentation
http://en.oreilly.com/velocity2009/public/schedule/detail/7579
http://en.oreilly.com/velocity2009/public/schedule/detail/7709
cost savings
hardware – reduced load
Shopzilla – 50% fewer servers
bandwidth – reduced response size
http://billwscott.com/share/presentations/2008/stanford/HPWP-RealWorld.pdf
if you want
better user experience
more revenue
reduced operating expenses
the strategy is clear
Even Faster Web Sites
Steve Souders
[email protected]
http://stevesouders.com/docs/wikipedia-20090812.ppt