How to optimize CSS delivery

What is CSS delivery?

CSS is responsible for making sure everything on your website looks nice. Without loading CSS your website would look like something from 1990s. The question is when do you want to start the loading for all of the CSS scripts.

In other words, before your browser starts to show the content it needs to process the information regarding your website’s layout and style. In result, this causes render blocking as your browser is waiting for all of the CSS scripts to load before starting to show the webpage.

Critical CSS and inlining

Any website can be divided into two parts:

The main idea behind optimizing CSS delivery is to divide your CSS script into two smaller and separate CSS scripts. One would be loaded first to show the top part of the web page and the other one would load later to show the rest of the website.

The part of your CSS script that is responsible for the top part of the website (above the fold content) is called the critical CSS as it most important that the visitors see a fully designed web page on their screen when it starts loading.

We have partially covered the topic of dividing your CSS scripts in my previous blog post called “How to combine CSS scripts”. It gives an overview of what is “inlining”, how you should do it and where the different CSS scripts should be pasted in your HTML code.

Injecting two CSS parts into the HTML code

To reduce the time it takes to load the main web page part at the top you should include the critical CSS directly into the <header> of your website’s HTML code. The rest of the CSS script can be injected at the bottom of the HTML code. This way your website loads a lot faster as now it only needs to load a small portion of your CSS script first to show the main part of the website and only loads the rest afterwords which cuts down loading time and retains the User Experience that your visitors require to stay on your site.