Improving CSS Loading

Just as JavaScript files, CSS files also block rendering of the page. This way, the visitor isn't confronted by the page in its unstyled form.

You can see this behavior by running the website in folder CssBlocksRendering in the downloaded code bundle. This test has a single page that loads a single CSS file. Generation of the CSS file on the server is delayed by five seconds, using the HTTP Module DelayModule in its App_Code folder. When you open the page, you'll find that the window stays blank for five seconds.

CSS files also block the execution of JavaScript files. This is because the JavaScript may refer to definitions in the CSS files.

One way to reduce this issue is to load your CSS files as quickly as possible. You can ...

Get ASP.NET Site Performance Secrets now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.