Even Faster Web Sites Steve Souders soudersgoogle com

Even Faster Web Sites Steve Souders souders@google. com http: //stevesouders. com/docs/teched-20090512. ppt Disclaimer: This content does not necessarily reflect the opinions of my employer.

the importance of frontend performance 9% 17% 91% 83% i. Google, primed cache i. Google, empty cache

time spent on the frontend www. aol. com www. ebay. com www. facebook. com www. google. com/search. live. com/results www. msn. com www. myspace. com en. wikipedia. org/wiki www. yahoo. com www. youtube. com Empty Cache 97% 95% Primed Cache 97% 81% 47% 67% 98% 94% 97% 98% 0% 0% 94% 98% 91% 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

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

Sept 2007

June 2009

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 Java. Script. . . Nicholas Zakas Scaling with Comet. . . . . Dylan Schiemann Going beyond gzipping. . . . Tony Gentilcore Optimizing images. . . . . Stoyan Stefanov, Nicole Sullivan

Why focus on Java. Script? Yahoo! Wikipedia e. Bay AOL My. Space You. Tube 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?

initial payload and execution www. aol. com www. ebay. com www. facebook. com www. google. com/search. live. com/results www. msn. com www. myspace. com en. wikipedia. org/wiki www. yahoo. com www. youtube. com Java. Script 115 K 183 K Functions Executed before onload 30% 44% 1088 K 15 K 17 K 131 K 297 K 114 K 321 K 240 K 252 K avg 9% 45% 24% 31% 18% 32% 13% 18% 26% avg

Splitting the initial payload split your Java. Script 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. get. Elements. By. Tag. Name("HEAD")[0]; var c=g. create. Element("script"); c. type="text/javascript"; c. onreadystatechange=n; c. onerror=c. onload=k; c. src=e; p. append. Child(c)

Loading Scripts Without Blocking XHR Eval XHR Injection Script in Iframe Script DOM Element Script Defer document. write Script Tag

XHR Eval var xhr. Obj = get. XHRObject(); xhr. Obj. onreadystatechange = function() { if ( xhr. Obj. ready. State != 4 ) return; eval(xhr. Obj. response. Text); }; xhr. Obj. open('GET', 'A. js', true); xhr. Obj. send(''); script must have same domain as main page must refactor script http: //stevesouders. com/cuzillion/? ex=10009

XHR Injection var xhr. Obj = get. XHRObject(); xhr. Obj. onreadystatechange = function() { if ( xhr. Obj. ready. State != 4 ) return; var se=document. create. Element('script'); document. get. Elements. By. Tag. Name('head') [0]. append. Child(se); se. text = xhr. Obj. response. Text; }; xhr. Obj. open('GET', 'A. js', true); xhr. Obj. send(''); script must have same domain as main page http: //stevesouders. com/cuzillion/? ex=10015

Script in Iframe <iframe src='A. html' width=0 height=0 frameborder=0 id=frame 1></iframe> iframe must have same domain as main page must refactor script: // access iframe from main page window. frames[0]. create. New. Div(); // access main page from iframe parent. document. create. Element('div'); http: //stevesouders. com/cuzillion/? ex=10012

Script DOM Element var se = document. create. Element('script'); se. src = 'http: //anydomain. com/A. js'; document. get. Elements. By. Tag. Name('head') [0]. append. Child(se); script and main page domains can differ no need to refactor Java. Script http: //stevesouders. com/cuzillion/? ex=10010

Script Defer <script defer src='A. js'></script> only supported in IE (just landed in FF 3. 1) script and main page domains can differ no need to refactor Java. Script http: //stevesouders. com/cuzillion/? ex=10013

document. write Script Tag document. write("<script type='text/javascript' src='A. js'> </script>"); parallelization only works in IE parallel downloads for scripts, nothing else all document. writes must be in same script block http: //stevesouders. com/cuzillion/? ex=10014

browser busy indicators

browser busy indicators normal Script Src XHR Eval XHR Injection Script in Iframe Script DOM Element Script Defer document. write Script Tag status bar progress bar logo cursor block render block onload FF IE, FF no no no IE, FF FF no IE, FF FF FF no FF FF FF IE, FF IE, FF good to show busy indicators when the user needs feedback bad when downloading in the background

Loading Scripts Without Blocking || domains existing browser ensures downcan scripts busy order loads differ normal Script Src size (bytes) no yes IE, FF ~50 XHR Eval XHR Injection Script in Iframe Script DOM Element IE, FF no no ~500 IE, FF no yes no no ~500 IE, FF no no IE, FF no ~50 IE, FF yes FF FF ~200 Script Defer document. write Script Tag IE yes IE, FF IE ~50 IE* yes IE, FF IE ~100 *Only 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 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) no busy XHR Injection XHR Eval Script DOM Element (IE) Managed XHR Injection Managed XHR Eval 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. create. Element('script'); domscript. src = "menu. js"; document. get. Elements. By. Tag. Name('head')[0]. append. Child(domscri pt); var a. Examples = [ ['couple-normal. php', 'Normal Script Src'], ['couple-xhr-eval. php', 'XHR Eval'], . . . ['managed-xhr. php', 'Managed XHR'] ]; function init() { EFWS. Menu. create. Menu('examplesbtn', a. Examples); } init(); </script>

before after

Loading Scripts Without Blocking || domains existing browser ensures downcan scripts busy order loads differ normal Script Src size (bytes) no yes IE, FF ~50 XHR Eval XHR Injection Script in Iframe Script DOM Element IE, FF no no ~500 IE, FF no yes no no ~500 IE, FF no no IE, FF no ~50 IE, FF yes FF FF !IE ~200 Script Defer document. write Script Tag IE yes IE, FF IE ~50 IE* 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 degrading script tags script onload

technique 5: script onload <script type="text/javascript"> var a. Examples = [['couple-normal. php', 'Normal Script Src'], . . . ]; function init() { EFWS. Menu. create. Menu('examplesbtn', a. Examples); } var domscript = document. create. Element('script'); domscript. src = "menu. js"; domscript. onload. Done = false; domscript. onload = function() { if ( ! domscript. onload. Done ) { init(); } domscript. onload. Done = true; }; domscript. onreadystatechange = function() { if ( "loaded" === domscript. ready. State ) { if ( ! domscript. onload. Done ) { init(); } domscript. onload. Done = true; } } document. get. Elements. By. Tag. Name('head')[0]. append. Child(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!

Simplifying CSS Selectors rule selector #toc > LI { font-weight: bold; } simple selectors combinator declaration block

types of CSS selectors ID selectors #toc { margin-left: 20 px; } element whose ID attribute has the value "toc" class selectors. chapter { font-weight: bold; } elements with class=chapter type selectors A { text-decoration: none; } all A elements in the document tree http: //www. w 3. org/TR/CSS 2/selector. html

types of CSS selectors adjacent sibling selectors H 1 + #toc { margin-top: 40 px; } an element with ID=toc that immediately follows an H 1 child selectors #toc > LI { font-weight: bold; } all LI elements whose parent has id="toc" descendant selectors #toc A { color: #444; } all A elements that have id="toc" as an ancestor

types of CSS selectors universal selectors * { font-family: Arial; } all elements attribute selectors [href="#index"] { font-style: italic; } all elements where the href attribute is "#index" psuedo classes and elements A: hover { text-decoration: underline; } non-DOM behavior others: : visited, : link, : active, : focus, : first-child, : before, : after

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

writing efficient CSS 1. avoid universal selectors 2. don't qualify ID selectors bad: DIV #navbar {} good: #navbar {} 3. don't qualify class selectors bad: LI. tight {} good: . li-tight {} 4. make rules as specific as possible bad: #navbar A {} good: . a-navbar {} https: //developer. mozilla. org/en/Writing_Efficient_CSS

writing efficient CSS 5. avoid descendant selectors bad: UL LI A {} better: UL > LI > A {} 6. avoid tag-child selectors bad: UL > LI > A {} best: . li-anchor {} 7. be wary of child selectors 8. rely on inheritance http: //www. w 3. org/TR/CSS 21/propidx. html https: //developer. mozilla. org/en/Writing_Efficient_CSS David Hyatt 4/21/2000

testing massive CSS 20 K A elements no style: control tag: A {} class: . a 00001 {}. a 20000 {} descender: DIV DIV P A. a 00001 {} child: DIV > P > A. a 00001 {} http: //jon. sykes. me/153/more-css-performance-testing-pt-3

CSS performance isn't linear IE 7 "cliff" at 18 K rules

real world levels of CSS # Rules # elements Avg Depth AOL 2289 1628 13 e. Bay 305 588 14 2882 1966 17 92 552 8 376 449 12 MSN. com 1038 886 11 My. Space 932 444 9 Wikipedia 795 1333 10 Yahoo! 800 564 13 You. Tube 821 817 9 1033 923 12 Facebook Google Search Live Search average

testing typical CSS 1 K rules (vs. 20 K) 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 P A. class 0007 {. . . } http: //www. stevesouders. com/blog/2009/03/10/performance-impact-of-css-selectors/

testing expensive selectors 1 K rules (vs. 20 K) same amount of CSS in all test pages 2126 ms avg delta! truly expensive selector A. class 0007 * {. . . } compare to: DIV DIV P A. class 0007 {. . . } the key is the key selector – the rightmost argument

selectors to avoid A. class 0007 DIV {. . . } #id 0007 > A {. . . }. class 0007 [href] {. . . } DIV: first-child {. . . }

reflow time vs. load time reflow – time to apply CSS, re-layout elements, and repaint triggered by DHTML: elem. class. Name = "newclass"; elem. style. css. Text = "color: red"; elem. style. padding = "8 px"; elem. style. display = ""; reflow can happen multiple times for longlasting Web 2. 0 apps

reflow time by browser DHTML action Chr 1 Chr 2 FF 3 IE 6, 7 IE 8 Op Saf 3 Saf 4 1 x 1 x 1 x - - - - display default 1 x 1 x 1 x 2 x 1 x 1 x - 1 x 1 x visibility hidden 1 x 1 x 1 x - 1 x 1 x visibility visible 1 x 1 x 1 x - 1 x 1 x padding - - 1 x 2 x 4 x 4 x - - - width length - - 1 x 2 x 1 x 1 x - width percent - - 1 x 2 x 1 x 1 x - width default 1 x - 1 x 2 x 1 x 1 x - - - 1 x 1 x 1 x 2 x 1 x 1 x - 1 x 1 x class. Name display none background font-size reflow performance varies by browser and action "1 x" is 1 -6 seconds depending on browser (1 K rules)

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

takeaways focus on the frontend run YSlow: http: //developer. yahoo. com/yslow speed matters

impact on revenue Google: +500 ms -20% traffic 1 Yahoo: +400 ms -5 -9% full-page traffic Amazon: +100 ms -1% sales 1 1 2 http: //home. blarg. net/~glinden/Stanford. Data. Mining. 2006 -11 -29. ppt http: //www. slideshare. net/stoyan/yslow-20 -presentation 2

cost savings hardware – reduced load bandwidth – reduced response size http: //billwscott. com/share/presentations/2008/stanford/HPWP-Real. World. pdf

if you want better user experience more revenue reduced operating expenses the strategy is clear Even Faster Web Sites

Steve Souders souders@google. com http: //stevesouders. com/docs/teched-20090512. ppt

question & answer

Resources www. microsoft. com/teched www. microsoft. com/learning http: //microsoft. com/technet http: //microsoft. com/msdn Resources for IT Professionals Resources for Developers Sessions On-Demand & Community Microsoft Certification & Training Resources www. microsoft. com/learning Microsoft Certification and Training Resources

Complete an evaluation on Comm. Net and enter to win!

© 2009 Microsoft Corporation. All rights reserved. Microsoft, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U. S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.