Cs193h high performance web sites lecture 9 rule 5 put stylesheets at the top
Download
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 [email protected] 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

PowerPoint Slideshow about 'CS193H: High Performance Web Sites Lecture 9: Rule 5 – Put Stylesheets at the Top' - albert


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 l.jpg

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

Steve Souders

Google

[email protected]


Announcements l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
FF2: Stylesheets block

stylesheets block downloads in Firefox 2

fixed in Firefox 3


Ie 6 7 and mime filters l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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?


ad