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 achieve that in the following ways:
Using techniques used with images such as caching, parallel downloads, and using a CDN. Refer to Chapter 12,
Using GZIP compression refer to Chapter 10,
Combining or breaking up CSS files.
Minifying the CSS.
Removing...