1. CS193H: High Performance Web Sites Lecture 24: Vol 2 – CSS Descendant Selectors, Forced Compression Steve Souders Google souders@cs.stanford.edu

2. announcements Final exam locations: Dec 9, 12:15-3:15 – Gates B03 Dec 12, 12:15-3:15 – Gates B01

3. CSS selectors ID selector #chapter1 { text-align: center } element whose ID attribute has the value "chapter1" class selector.pastoral { color: green } elements with class=pastoral type selector H1 { font-family: sans-serif } all H1 elements in the document tree http://www.w3.org/TR/CSS2/selector.html

4. (bad) CSS selectors descendant selector H1 EM { color: blue } all EM elements anywhere within an H1 child selector BODY > P { line-height: 1.3 } all P elements whose parent is BODY adjacent sibling selector H1 + DIV { margin-top: -5mm } a DIV that immediately follows an H1 universal selector * {} /* all elements */ [hidden="true"] {} all elements where the "hidden" attribute is "true" http://www.w3.org/TR/CSS2/selector.html

5. 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." H1 EM { color: blue } find every EM, traverse its ancestors until you find an H1 BODY > P { line-height: 1.3 } find every P, check if its parent is BODY H1 + DIV { margin-top: -5mm } find every DIV, check if its previous sibling is an H1 all rules are checked on every redraw (?)

6. 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

7. 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.w3.org/TR/CSS21/propidx.html https://developer.mozilla.org/en/Writing_Efficient_CSS by David Hyatt 4/21/2000

8. Testing CSS Performance 20K TD elements http://jon.sykes.me/152/testing-css-performance-pt-2

9. Testing CSS Performance 20K DIV > P > A elements no style: control tag: A {} class:.a00001 {}.a20000 {} descender: DIV DIV DIV P A.a00001 {} child: DIV > DIV > DIV > P > A.a00001 {} http://jon.sykes.me/153/more-css-performance-testing-pt-3

10. CSS3 selectors (bad) more David Hyatt: "The sad truth about CSS3 selectors is that they really shouldn’t be used at all if you care about page performance. Decorating your markup with classes and ids and matching purely on those while avoiding all uses of sibling, descendant and child selectors will actually make a page perform significantly better in all browsers." http://shauninman.com/archive/2008/05/05/css_qualified_selec tors#comment_3942

11. CSS performance links "Writing Efficient CSS" by David Hyatt: https://developer.mozilla.org/en/Writing_Efficient_CSS Hyatt's comment on Shaun Inman's "CSS Qualified Selectors" blog: http://shauninman.com/archive/2008/05/05/css_qualified_selectors#comment_3942 "Testing CSS Performance" by Jon Sykes: http://jon.sykes.me/151/testing-css-performance http://jon.sykes.me/152/testing-css-performance-pt-2 http://jon.sykes.me/153/more-css-performance-testing-pt-3 summarizes Sykes: http://www.downloadsquad.com/2008/06/11/tests-confirm-css-selectors-slow-load-times/

12. Where's Accept-Encoding? 5-25% of requests are missing Accept-Encoding most of these are from browsers that support compression Why is Accept-Encoding missing? proxies 11% of overall requests contain VIA header 38% of requests missing A-E contain VIA anti-virus software on client ACCEPT-ENCODING=gzip, deflate ACCEPT_ENCODXNG=gzip, deflate _______________=----- -------

13. total text (K_compressed) total text (K_uncompressed) binary (K) aol.com 188627228 ebay.com 89297145 facebook.com 291970344 google.com/search 227319 search.live.com/results 227324 msn.com 95317124 myspace.com 256627153 en.wikipedia.org/wiki 290298810 yahoo.com 118393131 youtube.com 122333423 average 149401240 Compressable content December 2008

14. Missed opportunity n = % requests missing A-E but support compression average page weight with missing A-E: w 1 = (149*(1-n) + 401*n) + 240 average page weight if they had A-E: w 2 = 149 + 240 potential savings: s = (w 1 - w 2 )/ w 1 ns 5% 10% 15%14% 20%18%

15. Solving the problem force compression if User-Agent is known to support compression, then return compressed content regardless of A-E work with vendors encourage proxy and anti-virus vendors to support compressed content

16. Questions List seven types of CSS selectors. What's the key thing to remember about how selectors are applied? What are some techniques for making selector matching faster?