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
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.