Transcript High Performance Web Sites 14 rules for faster

Even Faster Web Sites
http://stevesouders.com/docs/velocity-20090622.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
time spent on the frontend
www.aol.com
www.ebay.com
www.facebook.com
www.google.com/search
search.live.com/results
www.msn.com
www.myspace.com
en.wikipedia.org/wiki
www.yahoo.com
www.youtube.com
Empty Cache
97%
Primed Cache
97%
95%
95%
47%
81%
81%
0%
67%
98%
98%
94%
0%
94%
98%
91%
97%
98%
96%
97%
April 2008
The Performance Golden Rule
80-90% of the end-user response time is
spent on the frontend. Start there.
greater potential for improvement
simpler
proven to work
Sept 2007
June 2009
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
http://stevesouders.com/cuzillion/?ex=10008
What's Cuzillion?
Splitting the Initial Payload
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 (Firebug); tools needed
to automate this (Doloto from Microsoft)
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
Script DOM Element
var se = document.createElement('script');
se.src = 'http://anydomain.com/A.js';
document.getElementsByTagName('head')
[0].appendChild(se);
script and main page domains can differ
no need to refactor JavaScript
http://stevesouders.com/cuzillion/?ex=10010
browser busy indicators
Loading 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
asynchronous JS example: menu.js
script DOM element approach
<script type="text/javascript">
var domscript = document.createElement('script');
domscript.src = "menu.js";
document.getElementsByTagName('head')[0].appendChild(domscri
pt);
var aExamples =
[
['couple-normal.php', 'Normal Script Src'],
['couple-xhr-eval.php', 'XHR Eval'],
...
['managed-xhr.php', 'Managed XHR']
];
function init() {
EFWS.Menu.createMenu('examplesbtn', aExamples);
}
init();
</script>
before
after
Loading 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
IE
yes
yes
IE,FF
FF !IE ~200
IE
~50
IE*
yes
yes
IE,FF
IE
other document.write scripts are downloaded in parallel (in the same script block).
~100
what about
inlined code
that depends on the script?
coupling techniques
hardcoded callback
window onload
timer
degrading script tags
script onload
technique 5: script onload
<script type="text/javascript">
var aExamples = [['couple-normal.php', 'Normal Script Src'], ...];
function init() {
EFWS.Menu.createMenu('examplesbtn', aExamples);
}
var domscript = document.createElement('script');
domscript.src = "menu.js";
domscript.onloadDone = false;
domscript.onload = function() {
if ( ! domscript.onloadDone ) { init(); }
domscript.onloadDone = true;
};
domscript.onreadystatechange = function() {
if ( "loaded" === domscript.readyState ) {
if ( ! domscript.onloadDone ) { init(); }
domscript.onloadDone = true;
}
}
document.getElementsByTagName('head')[0].appendChild(domscript);
</script>
pretty nice, medium complexity
asynchronous loading & coupling
async technique: Script DOM Element
easy, cross-browser
doesn't ensure script order
coupling technique: script onload
fairly easy, cross-browser
ensures execution order for external script
and inlined code
multiple interdependent external and
inline scripts:
much more complex (see hidden slides)
concatenate your external scripts into one!
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
Positioning Inline Scripts
MSN
Wikipedia
eBay
MySpace
Sharding Dominant Domains
but Rule 9 says "Reduce DNS lookups"?!
remove DNS lookups that aren't heavily used
split domains that are on the critical path
how find "critical path"?
www.yahoo.com
news.google.com
http://news.google.com
connections per server by browser
HTTP/1.1
HTTP/1.0
IE 6,7
2
4
IE 8
6
6
Firefox 1.5, 2
2
8
Firefox 3
6
6
Safari 3,4
4
4
Chrome
6
6
Opera 9
4
4
newer browsers open more connections*
best to shard across 2-4 domains**
* http://www.stevesouders.com/blog/2008/03/20/roundup-on-parallel-connections/
** http://yuiblog.com/blog/2007/04/11/performance-research-part-4/
flushing the document early
html
image
image
script
gotchas:
html
image
image
script
call PHP's flush()
PHP output_buffering – ob_flush()
Transfer-Encoding: chunked
gzip – Apache's DeflateBufferSize before 2.2.8
proxies and anti-virus software
browsers – Safari (1K), Chrome (2K)
HTML document blocks resources
other languages:
$| or FileHandle autoflush (Perl), flush
(Python), ios.flush (Ruby)
successful flushing
Google Search
google
image
image
script
image
204
http://www.google.com/images/nav_logo4.png
external resource downloaded early
content visible to the user
Using Iframes Sparingly
most expensive DOM element
blocks parent's onload
workaround: set iframe src via
setTimeout
<iframe id=if1 src=""></iframe>
<script type="text/javascript">
function setSrc() {
document.getElementById('if1').src="url";
}
setTimeout(setSrc, 0);
</script>
types of CSS selectors
ID selectors: #toc {}
class selectors: .chapter {}
type selectors: A {}
adjacent sibling selectors: H1 + #toc {}
child selectors: #toc > LI {}
descendant selectors: #toc A {}
universal selectors: * {}
attribute selectors: href="#index"] {}
psuedo classes and elements: A:hover {}
writing efficient CSS
https://developer.mozilla.org/en/Writing_Efficient_CSS
"The style system matches a rule by starting with the
rightmost selector and moving to the left through the
rule's selectors. As long as your little subtree continues
to check out, the style system will continue moving to
the left until it either matches the rule or bails out
because of a mismatch."
#toc > LI { font-weight: bold; }
find every LI whose parent is id="toc"
#toc A { color: #444; }
find every A and climb its ancestors until id="toc" or
DOM root (!) is found
real world levels of CSS
# Rules # elements
Avg Depth
AOL
2289
1628
13
eBay
305
588
14
2882
1966
17
92
552
8
376
449
12
MSN.com
1038
886
11
MySpace
932
444
9
Wikipedia
795
1333
10
Yahoo!
800
564
13
YouTube
821
817
9
1033
923
12
Facebook
Google Search
Live Search
average
testing typical CSS
1K rules (vs. 20K)
same amount of CSS in
all test pages
30 ms avg delta
"costly"selectors aren't always costly (at
typical levels)
are these selectors "costly"?
DIV DIV DIV P A.class0007 { ... }
http://www.stevesouders.com/blog/2009/03/10/performance-impact-of-css-selectors/
testing expensive selectors
1K rules (vs. 20K)
same amount of CSS in
all test pages
2126 ms avg delta!
truly expensive selector
A.class0007 * { ... }
compare to:
DIV DIV DIV P A.class0007 { ... }
the key is the key selector – the rightmost
argument
Simplifying CSS Selectors
efficient CSS comes at a cost – page weight
focus optimization on selectors where the
key selector matches many elements
reduce the number of selectors
Performance Tools
HttpWatch http://www.httpwatch.com/
Firebug http://getfirebug.com/
Page Speed http://code.google.com/speed/page-speed/
YSlow http://developer.yahoo.com/yslow/
Smush.it http://smush.it/
CSS Sprite Generator http://spritegen.websiteperformance.org/
SpriteMe http://spriteme.org/ (in progress)
Hammerhead http://stevesouders.com/hammerhead/
Cuzillion http://cuzillion.com/
Performance Analyzers: HPWS rules
combine JS & CSS
use CSS sprites
use a CDN
set Expires in the future
gzip text responses
put CSS at the top
put JS at the bottom
avoid CSS expressions
make JS & CSS external
reduce DNS lookups
minify JS
avoid redirects
remove dupe scripts
remove ETags
YSlow Page Speed Pagetest
X
X
X
X
X
X
X
X
X
X
X
X
X
X
X
X
X
X
X
X
X
X
X
X
X
VRTA neXpert
X
X
X
X
X
X
X
X
X
X
Performance Analyzers: EFWS rules
YSlow Page Speed Pagetest
don't block UI thread
split JS payload
load scripts async
inline JS b4 stylesheet
write efficient JS
min. uncompressed size
optimize images
shard domains
flush the document
avoid iframes
simplify CSS selectors
VRTA neXpert
X
X
X
X
X
X
X
X
X
Performance Analyzers: other rules
YSlow Page Speed Pagetest
use persistent conns
reduce cookies
avoid net congestion
increase MTU, TCP win
avoid server congestion
remove unused CSS
specify image dims
use GET for Ajax
reduce DOM elements
avoid 404 errors
avoid Alpha filters
don't scale images
optimize favicon
2.0
X
X
X
VRTA neXpert
X
X
X
X
X
X
X
X
2.0
2.0
2.0
2.0
2.0
2.0
X
Top 10 Performance
YSlow Page Speed
AOL
eBay
?*
82
yellow
yellow
Facebook
Google Search
Live Search
MSN.com
68
95
93
72
red
green
green
yellow
MySpace
Wikipedia
84
66
yellow
yellow
Yahoo!
96
yellow
YouTube
77
yellow
* YSlow wouldn't start.
Wikipedia
combine 6 scripts, 8 stylesheets
add Expires header
minify JavaScript, save 39K (36%)
avoid inline script after stylesheet
31K (41%) unused CSS
remove ETags
Yahoo!
shard l.yimg.com
46K (49%) unused CSS
~90 very inefficient CSS selectors
2 3
1
4
4
4
5
www.ebay.com
4
1. long HTML doc response
2. flush (good)
3. inline script blocks .js
var pageName='HomePagePortal';
4. scripts block
5. ads .js non-blocking (good)
6. 26 bg images – no sprites
7. sharded domains – pics & rtm (good)
8. compress images by 20%
9. thumbs load slowly – HTTP/1.0?
10. remove ETags (?)
11. ~40 inefficient CSS selectors
6 7 8
.playgrnd * {}
9
AOL
shard portal.aolcdn.com
combine 8 scripts
simplify CSS selectors
avoid inline script after stylesheet
jQueryEnabled = true;
remove 97K (49%) unused CSS
Facebook
combine 13 scripts, 6 stylesheets
sprite 31 background images
reduce images by 106K (44%)
put stylesheets above scripts
remove 102K (50%) unused CSS
MSN.com
combine 13 scripts
sprite 26 background images
put stylesheets above scripts
avoid inline script after stylesheet
YouTube
add Expires header (can't?)
minify JavaScript, save ~29K (14%
CNet Performance Analysis
cool
flushed document
HTTP/1.0 downgrade
requests: 107
load time: 3.7 secs
xfer size: 436K
YSlow: F (48)
opportunities
load oreo.moo.rb.combined.js async
split i.i.com.com across two domains
concatenate 10 scripts
sprite 25 CSS background images
30 resources with short Expires
62% (62K) of CSS not used
http://www.shopping.com
• slow spots:
• top – shard CSS and JS, flush
• middle – shard images
• bottom – scripts (async?)
• use CSS sprites (42 bg images)
• add future Expires header
• optimize images (50K, 20%)
• remove ETags
takeaways
focus on the frontend
run Page Speed and YSlow
speed matters
impact on revenue
Google: +500 ms  -20% traffic1
Yahoo: +400 ms  -5-9% full-page traffic
Amazon: +100 ms  -1% sales1
http://home.blarg.net/~glinden/StanfordDataMining.2006-11-29.ppt
2 http://www.slideshare.net/stoyan/yslow-20-presentation
1
2
cost savings
hardware – reduced load
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/velocity-20090622.ppt