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.
Try our multi-location page speed test to check how well your CSS is optimized.
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.
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.
This is the most important factor when it comes to optimizing the CSS delivery. Follow these steps:
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.
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.
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.