How to 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
Check how well your web pages are optimized with the CSS Optimization Test. Does the CSS delivery of your website need optimizing? Follow the steps below to optimize it:
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 because the higher amount 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.
Optimize CSS Delivery for Wordpress
The methods for optimizing the CSS delivery for a Wordpress (or Drupal and Joomla for that matter) website are the same as for a non-Wordpress website. Follow the rules above.