This is part 13 of a multiple part series on web performance improvements. The first Introductory blog can be found here. In previous part we discussed the performance benefit of Gzipping java-script and style sheets. In this part we will discuss the importance of putting style-sheets on top of the HTML document.

Consider a situation where a page has lots of data to load. While the data is loaded the page will look blank because the page data is still not downloaded from server. This will confuse the user as nothing is happening on the page. He may feel that the page is not responding and may close the browser/tab. But in reality the page is not hanged its just downloading the required data. This is classic case where we need to make user aware of the happening by rendering page progressively.

The importance of giving users visual feedback has been well researched and documented. When we talk about performance we need to make sure the page load progressively. In other words browser to display whatever contents it has as soon as possible. This is especially important for pages with a lot of content and for users on slower Internet connections. Progress indicators have three main advantages:

• It reassures the user that the system has not crashed and is working on the request.
• It indicates approximately how long the user is expected to wait, thus allowing the user to do other activities during long waits.
• It provides something for the user to look at, thus making the wait less painful. This latter advantage should not be underestimated and is one reason for recommending a graphic progress bar instead of just stating the expected remaining time in numbers.

In our case the HTML page is the progress indicator. When the browser loads the page progressively, the header, the navigation bar, the logo at the top, etc. all serve as visual feedback for the user who is waiting for the page. This improves the overall user experience.

The problem with putting style-sheets near the bottom of the document is that it prohibits progressive rendering in many browsers. Browsers block rendering to avoid having to redraw elements of the page if their styles change. This rule has less to do with the actual time to load the page’s components and more to do with how the browser reacts to the order of those components. In fact, the page that feels slower is ironically the page that loads the visible components faster. The browser delays showing any visible components while it and the user wait for the style-sheet at the bottom.

CSS at the Bottom

Putting style-sheets near the end of the document can delay page loading. The page is completely blank until all the content blasts onto the screen at once. Progressive rendering has been thwarted. This is a bad user experience because there is no visual feedback to reassure the user that her request is being handled correctly. Instead, the user is left to wonder whether anything is happening. That’s the moment when a user abandons your web site and navigates to your competitor.

CSS at the Top

To avoid the blank white screen, move the style-sheet to the top in the document’s HEAD. If we do this, no matter how the page is loaded—whether in a new window, as a reload, or as a home page—the page renders progressively.

There are two ways you can include a style-sheet in your document: the LINK tag and the @import rule.

• LINK tag
• @import rule

@import url(“styles2.css”);

A STYLE block can contain multiple @import rules, but @import rules must precede all other rules. If this is overlooked, the style-sheet isn’t loaded from an @import rule. Using the @import rule causes an unexpected ordering in how the components are downloaded. Below figure shows the HTTP traffic for all three examples. Each page contains 8 HTTP requests:

• 5 Images
• 1 HTML
• 2 style-sheets

fig1: Page with CSS at bottom

fig2: Page with CSS at Top using Link

fig3: Page with CSS at Top using @Import

The components in page in fig1 and fig2 are downloaded in the order in which they appear in the document. However, even though the page in fig3 has the style-sheet at the top in the document HEAD, the style-sheet is downloaded last because it uses @import. As a result, it has the blank white screen problem, just like the page in fig1.

For this reason, using the LINK tag is more preferred way. Beyond the easier syntax, there are also performance benefits to using LINK instead of @import. The @import rule causes the blank white screen phenomenon, even if used in the document HEAD.