1 / 11

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

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

albert
Télécharger la présentation

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. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. CS193H:High Performance Web SitesLecture 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?

More Related