Even though all CSS files are in some way slowing down the rendering process, it is still true that the bigger the files, and the more of them you have, the longer it takes for a page to load. As 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 thus worth your while minimising the amount of render-blocking CSS being used.
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.