Chapter 7. Rule 5: Put Stylesheets at the Top
A team running a major portal at Yahoo! added several DHTML features
to their page while trying to ensure there was no adverse effect on
response times. One of the more complex DHTML features, a pop-up
DIV for sending email messages, was not part of
the actual rendering of the page—it was accessible only after the page had
loaded and the user clicked on the button to send the email message. Since
it wasn’t used to render the page, the frontend engineer put the CSS for
DIV in an external
stylesheet and added the corresponding
LINK tag at the bottom of the page with the
expectation that including it at the end would make the page load
The logic behind this made sense. Many other components (images, stylesheets, scripts, etc.) were required to render the page. Since components are (in general) downloaded in the order in which they appear in the document, putting the DHTML feature’s stylesheet last would allow the more critical components to be downloaded first, resulting in a faster-loading page.
Or would it?
In Internet Explorer (still the most popular browser) the resulting
page was noticeably slower than the old design. While trying to find ways
to speed up the page, we discovered that moving the DHTML feature’s
stylesheet to the top of the document, in the
HEAD, made the page load faster. This contradicted what we expected. How could putting the stylesheet first, thus delaying the critical components in the page, actually ...