1. CS193H: High Performance Web Sites Lecture 11: Rule 7 – Avoid CSS Expressions Rule 9 – Reduce DNS Lookups Steve Souders Google souders@cs.stanford.edu

2. Announcements Aravind and I are grading Rules 1-3 of "Improving a Top Site" class project now people who turned in after 11:59pm Mon get 10 points off

3. CSS expressions used to set CSS properties dynamically in IE 5-7 fixes IE CSS 2.1 bugs and shortcomings, such as lack of support for min-width min-width: 600px; width: expression( document.body.clientWidth < 600 ? 600px : auto ); problem: expressions execute 1000s of times mouse move, key press, resize, scroll, etc. http://stevesouders.com/hpws/expression- counter.php (IE only!) expression's JavaScript can slow down pages

4. Alternatives to expressions expressions are evaluated all the time (mouse move, etc.), this is what makes them easy but slow alternatives are more work but reduce the amount of JavaScript code executed alternatives: one-time expressions event handlers

5. One-Time Expressions if an expression only needs to be calculated once, it can overwrite itself with the value #maindiv { min-width: 600px; width: expression(setW(this));} function setW(elem) { elem.style.runtimeStyle.width = ( document.body.clientWidth < 600 ? "600px" : "auto" ); } doesn't handle window resizing overwrite the expression

6. Event Handlers tie the code to the specific event(s) of interest #maindiv { min-width: 600px; width: expression(setW(this));} function setW() { elem=document.getElementById('maindiv'); elem.style.runtimeStyle.width = ( document.body.clientWidth < 600 ? "600px" : "auto" ); } window.onresize = setW;

7. Expressions in IE8 expressions are no longer supported in IE8 standards mode reasons: standards compliance – issues fixed in IE8 performance security – "reduce browser attack surface" http://blogs.msdn.com/ie/archive/2008/10/16/ending- expressions.aspx but we'll still need to deal with IE6&7 for years to come

8. DNS Lookups typically take 20-100ms, sometimes > 500ms OS and browsers cache DNS resolutions

9. Viewing DNS in Windows C:\>ipconfig /flushdns Windows IP Configuration Successfully flushed the DNS Resolver Cache. C:\>ipconfig /displaydns Windows IP Configuration www.google.com ---------------------------------------- Record Name..... : www.google.com Record Type..... : 5 Time To Live.... : 43 Data Length..... : 4 Section....... : Answer CNAME Record.... : www.l.google.com

10. TTL < 30 minutes might not impact users TTL (Time to Live) www.amazon.com1 minute www.aol.com1 minute www.cnn.com10 minutes www.ebay.com1 hour www.google.com5 minutes www.msn.com5 minutes www.myspace.com1 hour www.wikipedia.org1 hour www.yahoo.com1 minute www.youtube.com5 minutes March 2007

11. Browser DNS Cache IE 7 DnsCacheTimeout: 30 minutes KeepAliveTimeout: 1 minute ServerInfoTimeout: 2 minutes Firefox 2 network.dnsCacheExpiration: 1 minute network.dnsCacheEntries: 20 network.http.keep-alive.timeout: 5 minutes Fasterfox: 1 hour, 512 entries, 30 seconds

12. Reducing DNS Lookups use Keep-Alive adding DNS lookups vs. domain sharding identify dominant domain names, reduce non- dominant names for dominant domains – shard across 2-4 CNAMEs

13. Homework read Chapter 8 & 9 of HPWS

14. Questions How do CSS expressions affect performance? What are two workarounds to this problem with CSS expressions? How long does a DNS lookup typically take? What are three places where DNS resolutions are cached? What's a TTL? How do OSes and browsers (not) honor TTLs? What's the guideline for balancing reducing DNS lookups and domain sharding?