CS193H: High Performance Web Sites Lecture 11: Rule 7 – Avoid CSS Expressions Rule 9 – Reduce DNS Lookups Steve Souders Google

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

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. counter.php (IE only!) expression's JavaScript can slow down pages

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

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

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;

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" expressions.aspx but we'll still need to deal with IE6&7 for years to come

DNS Lookups typically take ms, sometimes > 500ms OS and browsers cache DNS resolutions

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

TTL < 30 minutes might not impact users TTL (Time to Live) minute minute minutes hour minutes minutes hour hour minute minutes March 2007

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

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

Homework read Chapter 8 & 9 of HPWS

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?