CS193H: High Performance Web Sites Lecture 9: Rule 5

1
CS193HHigh Performance Web SitesLecture 9
Rule 5 Put Stylesheets at the Top

• Steve Souders
• Google
• souders_at_cs.stanford.edu

2
Announcements

• Vote for alternate final exam slots
• default will be Dec 12, 1215-315pm
• http//www.doodle.ch/participation.html?pollIdz2
  ty3gdem2ci9c6q
• 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.html005496

Jakob Nielson, http//www.useit.com/papers/respon
setime.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 gt 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 gt
feels slower
stylesheet at top content finishes downloading
later, but rendering starts sooner gt 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 gt 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
• ?typegifjscsshtmlswf
• sleepn number of seconds
• expires-101 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 1159pm
• 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, 1215-315pm
• http//www.doodle.ch/participation.html?pollIdz2
  ty3gdem2ci9c6q
• 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?