1. CS193H: High Performance Web Sites Lecture 9: Rule 5 – Put Stylesheets at the Top Steve Souders Google souders@cs.stanford.edu

2. Announcements Vote for alternate final exam slots: default will be Dec 12, 12:15-3:15pm http://www.doodle.ch/participation.html?pollId=z2ty3gdem2ci9c6q vote for all that work for you

3. Progressive Rendering progress indicators: * reassure the system is working convey how much time is left provide something to look at the web page is the progress indicator progressive rendering – draw content as soon as it's available stylesheets block progressive rendering in IE, and cause "flash" in Firefox David Hyatt talks about how browsers work: http://weblogs.mozillazine.org/hyatt/archives/2004_05.html#005496 * Jakob Nielson, http://www.useit.com/papers/responsetime.html

4. Stylesheets in IE in IE, nothing in the page is drawn until all stylesheets are done downloading reasoning: parse all rules before drawing any element, avoids having to redraw when stylesheets are at the bottom, there is no progressive rendering => after a long delay the entire page blasts onto the screen http://stevesouders.com/examples/css-fouc.php

5. IE: Fastest feels slowest......and slowest feels fastest stylesheet at bottom: content finishes downloading sooner, but rendering starts later => feels slower stylesheet at top: content finishes downloading later, but rendering starts sooner => feels faster true in IE 6, 7, 8

6. Stylesheets in Firefox in Firefox, elements are drawn even if stylesheets aren't all downloaded reasoning: progressive rendering makes the page feel faster (most developers will follow the spec and put their stylesheets in HEAD ?) when stylesheets are at the bottom and they change style of rendered elements, elements have to be redrawn => flash of unstyled content http://stevesouders.com/examples/css-fouc.php

7. FF2: Stylesheets block stylesheets block downloads in Firefox 2 fixed in Firefox 3

8. IE 6,7 and mime filters mime filter plug-ins alter behavior for specific mime types in IE 6,7 mime filters can affect performance

9. resource.cgi formerly sleep.cgi http://stevesouders.com/bin/resource.cgi ?type=[gif|js|css|html|swf] &sleep=n – number of seconds &expires=[-1|0|1] – sets Expires header in the past (-1), future (1), or none (0) useful in exaggerating load times to make it possible to observe browser behavior

10. Homework "Improving Top Site" class project: improvements for Rules 1-3 due Mon 11:59pm Rule 4 – waiting for Stanford IT to turn on gzip read Chapter 6 of HPWS Vote for alternate final exam slots: default will be Dec 12, 12:15-3:15pm http://www.doodle.ch/participation.html?pollId=z2ty3gdem2ci9c6q vote for all that work for you

11. Questions What is progressive rendering? How do stylesheets affect progressive rendering in IE? in Firefox? Why do they take different approaches? What's the best way to avoid these problems?