Professional Documents
Culture Documents
Website Performance Analysis Presentation
Website Performance Analysis Presentation
http://stevesouders.com/docs/velocity-20090622.ppt
Disclaimer: This content does not necessarily reflect the opinions of my employer.
17%
83%
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
scripts block
<script src="A.js"> blocks parallel downloads and rendering
What's Cuzillion?
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
115K 183K 1088K 15K 17K 131K 297K 114K 321K 240K 252K avg
30% 44% 9% 45% 24% 31% 18% 32% 13% 18% 26% avg
XHR Injection
Script in Iframe Script DOM Element Script Defer document.write Script Tag
script and main page domains can differ no need to refactor JavaScript
http://stevesouders.com/cuzillion/?ex=10010
no IE,FF IE,FF
yes no no
yes no yes
IE,FF no no
IE,FF no no
Script in Iframe Script DOM Element Script Defer document.write Script Tag
IE,FF
IE,FF IE
no
yes yes
no
yes yes
IE,FF
FF IE,FF
no
FF IE
~50
~200 ~50
IE*
yes
yes
IE,FF
IE
~100
*Only
other document.write scripts are downloaded in parallel (in the same script block).
no order
preserve order
XHR Eval XHR Injection Script in iframe Script DOM Element (IE)
Script DOM Element (FF) Script Defer (IE) Managed XHR Eval Managed XHR Injection
no busy show busy
show busy
Script DOM Element (FF) Script Defer (IE) Managed XHR Eval Managed XHR Injection
<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
no IE,FF IE,FF
yes no no
yes no yes
IE,FF no no
IE,FF no no
Script in Iframe Script DOM Element Script Defer document.write Script Tag
IE,FF
IE,FF IE
no
yes yes
no
yes yes
IE,FF
FF IE,FF
no
~50
IE*
yes
yes
IE,FF
IE
~100
*Only
other document.write scripts are downloaded in parallel (in the same script block).
what about
inlined code
that depends on the script?
coupling techniques
hardcoded callback
window onload
timer
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>
best to move inline scripts above stylesheets or below other resources use Link, not @import
www.yahoo.com
news.google.com
http://news.google.com
HTTP/1.0
4 6 8 6 4 6 4
gotchas:
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 $| or FileHandle autoflush (Perl), flush (Python), ios.flush (Ruby)
other languages:
successful flushing
Google Search
google image image script image 204
http://www.google.com/images/nav_logo4.png
Avg Depth
13 14 17 8 12 11 9
Wikipedia
Yahoo! YouTube average
795
800 821 1033
1333
564 817 923
10
13 9 12
compare to:
A.class0007 * { ... }
DIV DIV DIV P A.class0007 { ... }
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/
X X
X
X
X
X X
X X
Top 10 Performance
YSlow Page Speed
AOL ?* yellow
eBay Facebook Google Search Live Search MSN.com MySpace Wikipedia Yahoo! YouTube
* YSlow wouldn't start.
82 68 95 93 72 84 66 96 77
Wikipedia
combine 6 scripts, 8 stylesheets
Yahoo!
shard l.yimg.com
2 3
1 4 4
4
4
www.ebay.com
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
.playgrnd * {}
6 7 8
AOL
shard portal.aolcdn.com
combine 8 scripts
simplify CSS selectors
Facebook
combine 13 scripts, 6 stylesheets
MSN.com
combine 13 scripts
YouTube
add Expires header (can't?)
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
impact on revenue
Google: +500 ms -20% traffic1
http://home.blarg.net/~glinden/StanfordDataMining.2006-11-29.ppt 2 http://www.slideshare.net/stoyan/yslow-20-presentation
1
cost savings
hardware reduced load
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
Steve Souders
souders@google.com
http://stevesouders.com/docs/velocity-20090622.ppt