Optimize CSS Delivery

Even though the introduction of CSS was a major upgrade and has had almost no downsides it is important to take into consideration the effect the use of CSS scripts can have on page speed, especially when it comes to the rendering of a web page. When CSS is poorly delivered the browser has to wait to download and process the styling data before it can fully finish rendering (and thus display to your visitors) your web pages. This is why it’s important to optimize CSS delivery and to learn about the pitfalls that can slow down a web page.

Test your website

Try our multi-location page speed test to check how well your CSS is optimized.

Combine your CSS scripts

First combine all the CSS scripts that you are able to combine into one bigger CSS script. The reason that this is important is that the higher the number of external CSS files your web pages load, the slower your web pages can get. This is in part because loading multiple CSS files creates unnecessary additional requests for the browser to handle but even using one external CSS file can be considered bad practice when it comes to page speed. Using an external file to call a CSS script will block the rendering of your web page when it contains CSS rules that are used for the above-the-fold view of a page. Inlining these CSS rules will solve this problem. You should therefore always inline your CSS scripts unless they are larger in size.

Compress your new CSS script

After you have combined all your CSS scripts into one bigger script, you should compress this script to reduce the amount of data your visitors have to download when loading your web pages. For every extra KB your visitors have to download your web page loads a little slower. Use the CSS compressor to compress your CSS.

Prioritize CSS rules for the above-the-fold content

This is the most important factor when it comes to optimizing the CSS delivery. Follow these steps:

First determine whether your new combined CSS script is either large or small in size. When the script is smaller in size, you should inline it within the HTML head tag. Defer loading a smaller CSS script is usually not necessary since you won't get any benefit by doing this (page speed wise). Please continue with the next step when the script is larger.
Extract the critical above-the-fold CSS from your larger CSS script, meaning the CSS rules strictly necessary to display the above-the-fold content of your web page(s). A good way to do this is using Addy Osmani's Node.js Package which can perform this task for you automatically. This method requires SSH access, so this may not be a suitable solution for everyone. The other options are using one of the online critical CSS generators or simply doing it manually.
Now that you have the critical rendering path CSS script in your possession you should inline this script within the HTML head tag of your web page and defer load the remainder of your new large CSS script in the bottom of your page.

Avoid CSS @import

Using the CSS @import rule makes it possible to import an external CSS file in a CSS script. This is bad for web page speed because the @import function loads every imported external file separately instead of loading it parallel with all the other files needed to render the particular page it is used on. It also creates unnecessary HTTP requests. You can check whether your web pages use CSS @import with the CSS Delivery Tool or read more about why and how to avoid CSS @import.

Avoid using STYLE tags in the HTML body

You should remove all the CSS you use in the HTML body (example: <p style=”margin-left:10px;”></p>) and place these CSS codes inside the HTML head tag. Not doing this is bad for page speed because style tags placed inside the HTML body are render blocking and just a overall coding no-no. You can use this tool to check whether your web pages are guilty of using them.