Render-blocking CSS are CSS files that prevent a web page from loading (that is, rendering) quickly. That being said, it is worth noting that all CSS files slow down page speed, simply because it takes time for these files to be loaded and parsed (looked through) as external resources. Make sure you also check out our guide on how to fix render-blocking Javascript.
What is render-blocking CSS?
Render blocking CSS delays your webpage from being displayed in a timely manner. We have already talked about the importance of page load speed, and render-blocking CSS can be the death knell of a website. Faster-loading pages help sites to rank better with Google, are more appealing to users, and even appeal better to Adsense (adverts will be displayed quicker and longer). It is therefore worth your while minimising the amount of render-blocking CSS being used.
Your CSS files, also known as Cascading Style Sheets, describe how the HTML elements of a page are to be displayed on screen. It controls the layout of multiple web pages all at once, meaning that render-blocking CCS files will make every part of your website load slowly or fail to load at all. The more CSS files utilised on a single site, the slower it is likely to load. Reducing both the overall amount off CSS files, as well as the amount of css files in a critical path, can help to speed up the display of your website and enhance user experience.
Here we’ll go through some of the possible steps you can take to eliminate as much render-blocking CSS as possible.
Render-blocking CSS and critical paths
The critical (rendering) path is the list of steps a browser has to go through before it is able to display your webpage.
CSS that is separated across various files is quite common – for example, with WordPress you often have one main CSS file that is then accompanied by separate, smaller CSS files for widgets and plugins. Another issue that crops up is with websites that are put together using a framework like Bootstrap (or may even be a site using a WordPress theme put together with Bootstrap), which is helpful in terms of quickly putting together designs, but often results in CSS files that aren’t tailored to minimal render-blocking.
As mentioned above, the less CSS files there are (in this case referring to the physical CSS files, not the CSS code used within them), the less time is needed to call additional files, and thus the quicker your critical path will be.Because of this, it is best to condense as many of these as possible.
To reduce the number of CSS files you can either combine or inline them. To combine them you can copy and paste the CSS from all of your files into one, then remove the surplus CSS file calls (since there is no longer that external file needing to be called).
Alternatively, to inline, you need to copy the CSS from your CSS file and paste it into your HTML file, then remove the call for that CSS file from the HTML. When pasting, make sure to place your CSS into the head of the HTML document using style tags. If it’s not in the head, the content may get displayed unstyled. Another important thing to note is that inlining can only be done with smaller CSS files, otherwise the HTML files can become too large.
WordPress plugins for render-blocking CSS
There are various WordPress plugins that can help you in the process of removing render-blocking CSS, such as by helping you to defer or load asynchronously any CSS files that aren’t needed for above the fold content (a practice which is also handy when fixing render-blocking JavaScript). One of the more straightforward plugins to use is Autoptimize, but if you have a little more experience W3 Total Cache is also very popular. This article by WP Beginner gives a great step by step guide on how to use these two plugins, and also explains what is happening in the process.
Additionally, there are also WordPress plugins for specific render-blocking problems that can be useful to add on top. For example, the Google Fonts people choose to use on their websites are often added not within the HTML head, but as an additional CSS file that requires CSS @import (we detail the @import process in more detail in another article). As this slows down page speeds for the reasons mentioned above, it’s worth checking out plugins such as the Google WebFont Optimiser to try and improve this (or alternatively use a tool like Web Front Loader to defer the font loading using JavaScript, as explained by Lockedown Design).
The only thing to keep in mind, especially if you have mobile pages, is not to get too plugin happy and actually undo the optimisation work you’ve been trying to build up – we explain a bit more about this in our article on mobile pages and plugins.