cs193h high performance web sites lecture 9 rule 5 put stylesheets at the top l.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
CS193H: High Performance Web Sites Lecture 9: Rule 5 – Put Stylesheets at the Top PowerPoint Presentation
Download Presentation
CS193H: High Performance Web Sites Lecture 9: Rule 5 – Put Stylesheets at the Top

Loading in 2 Seconds...

play fullscreen
1 / 11

CS193H: High Performance Web Sites Lecture 9: Rule 5 – Put Stylesheets at the Top - PowerPoint PPT Presentation


  • 355 Views
  • Uploaded on

CS193H: High Performance Web Sites Lecture 9: Rule 5 – Put Stylesheets at the Top. Steve Souders Google souders@cs.stanford.edu. Announcements. Vote for alternate final exam slots: default will be Dec 12, 12:15-3:15pm http://www.doodle.ch/participation.html?pollId=z2ty3gdem2ci9c6q

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

CS193H: High Performance Web Sites Lecture 9: Rule 5 – Put Stylesheets at the Top


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
cs193h high performance web sites lecture 9 rule 5 put stylesheets at the top

CS193H:High Performance Web SitesLecture 9: Rule 5 – Put Stylesheets at the Top

Steve Souders

Google

souders@cs.stanford.edu

announcements
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
progressive rendering
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

stylesheets in ie
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

ie fastest feels slowest
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

stylesheets in firefox
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

ff2 stylesheets block
FF2: Stylesheets block

stylesheets block downloads in Firefox 2

fixed in Firefox 3

ie 6 7 and mime filters
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

resource cgi
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

homework
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
questions
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?