Learn how to remove Render blocking CSS from a website to improve pagespeed. In this article, we’ll talk about render-blocking CSS, its effect on pagespeed, and methods to remove it.
What is render blocking CSS?
- Render blocking CSS delays a webpage from being visible in a timely manner.
- Every one of your CSS files delays your page from rendering.
- The bigger your CSS, the longer the page takes to load.
- The more CSS files you have, the longer the page takes to load
Why is render blocking CSS bad?
Render blocking css makes your website slow.
No matter how you make money from your website, faster means more money.
- Adsense supported sites make more money if the ads are visible quicker and longer.
- Commerce sites make more money by less cart abandonment and providing a better and less frustrating user experience.
How to Eliminate Render Blocking CSS?
- Properly call your CSS files
- Lessen the number of CSS files in the critical path
- Use less CSS overall
This article will go really in-depth into each of these options and include the methods of doing this yourself, handy tips to instruct your designers or webmasters to do it for you and illustrate the issues enough where you understand each solution.
We will start with the easiest part of the solution – Properly calling your CSS files as recommended by Google. 1
#1 How to Properly call CSS
CSS can be called in many ways from your webpage, and some of the ways are flat out wrong to do in our modern, fast and mobile world.
Here are two things to look for in the way you call your css.
- Do not use @import to call css files
- Properly label conditional css
Using @import and improperly labeled CSS are render-blocking issues, and they are each easily solvable, let’s look at them closer.
Do not use @import to call CSS
Problem: This method of calling CSS is bad because it adds to the time that it takes to load your css before your page can load.
Solution: Locate the @ import calls and replace them.
Detection: Use the pagespeed tool. In the left-hand column, one of the items is “Avoid @ CSS import”. If you have a green checkmark, no @imports were found. If found, there will be a red “x”.
Details: CSS imports look like this and will usually be near the top of the file.
@import url("style.css")Rather than call that CSS file using the import method it is better to just keep that additional CSS in just one file (copy and paste the imported CSS into the original css file). If you can not do that for some reason, include those CSS files from the Html file using the following code:
<link rel="stylesheet" href="style.css">Make sure to replace “style.css” with the location and name of your CSS file.
Properly label Conditional CSS
Problem: When CSS is not labeled correctly, the browser defaults to loading all CSS before rendering the webpage.
Solution: Properly label CSS files being called so the browser knows that not all CSS is required to begin rendering.
Detection: Examine your html and see how your CSS is labeled (described below).
Details: A typical CSS file is called as shown below:
<link href="style.css" rel="stylesheet">In the code above, it is just saying “here is a link” and “the link is for my css”.
Any CSS called in the manner above will always be loaded by the browser prior to rendering anything at all on your webpage.
Now let’s look at an example of a CSS file that that does not have to be loaded before rendering the page, namely the CSS instructions for printing:
<link href="print.css" rel="stylesheet" media="print">The above code is saying “here is a link”, “the link is for my css” and it is also saying “the css is only for printing”.
Since the CSS was labeled as media=”print”, modern browsers know that css file is not required to render the page. As a result, the browser will place a lower priority to that CSS file. It will still download it, but it will do so in a manner that does not block rendering.
Let’s look at another conditional situation, here we have a CSS file that is used when a page is a certain width:
<link href="other.css" rel="stylesheet" media="(min-width: 40em)">Modern browsers can understand that this CSS is used in some situations and not used in others, so the browser can choose not to load this css file prior to rendering if it is not needed.
#2 Use fewer CSS files in the Critical Path
The critical rendering path is just another way to say “the things a browser has to do before showing your web page”.
If you have properly labeled your CSS as we discussed above, you have already begun to remove CSS files from the critical path. There is however a lot more that we can do.
Just to be clear, we are talking about CSS files here as in “main.css” and “page.css”, etc. we are specifically talking about the actual files that your CSS is in, rather than the css code found inside those files.
Each physical file you can remove will make your page load faster.
There are basically two ways to use less CSS files
- Combine CSS
- Inline CSS
Combine css files
Problem: Each CSS file your page uses adds additional time to your webpage loading by requiring an additional file to be called.
Solution: Combine CSS files into one file (or two depending on how large your css actually is).
Details: A webpage typically has one large CSS file and several “supporting” CSS files. This occurs for many reasons an example might be a WordPress site that has your web design CSS in one big CSS file, but the widgets and plugins you add may have small CSS files associated with them that are loaded separately from your main CSS.
This also occurs in static websites because many web designers thought that it was good to have separate CSS files to work with for clarity and ease of work. This unfortunately has caused a large web performance problem across the web.
Splitted CSS files are an Opportunity
The good news though is that because it is so common to have several separate CSS files, it is possible to have a great speed advantage over your competitors by paying attention to this issue. The difference between loading two CSS files instead of several CSS files can often shave a second or more off your page load time.
Even more important than the second you save, is the fact that by reducing the complexity of your CSS allows for other things to load much quicker. If you make money from Adsense, your ads will show up quicker (since they do not have to compete with CSS files being loaded). If you want the best fastest experience for users on your eCommerce store, again, fewer CSS files will allow a much quicker, crisper experience for your users.
In other words, when you think of making your pagespeed quicker, every complexity removed allows for not only “x” amount of time saved, it also allows other elements of your pages to perform extremely well.
How to combine CSS
To combine CSS, you must copy the CSS from one CSS file and paste it into another. Once you do that, you must remove the call for that CSS file.
In the image above we took the contents of the “other.css” file and the “third.css” file and placed them inside the “main.css” file. By doing this, we went from a webpage that required three CSS files to load to a webpage that only requires one CSS file to load.
Inline CSS files
Problem: Each css file your page uses adds additional time to your webpage loading by requiring an additional file to be called.
Solution: Remove one css file by placing it in the html itself.
Details: Using html style tags, css instructions can reside within the html file rather than an external css file.
How to inline CSS
To inline CSS, you must copy the CSS from one CSS file and properly paste it into your html file (this can only be done with small CSS files or your Html file will become too large). Once you do that, you must remove the call for that CSS file.
In the image above we took the contents of the “small.css” file and placed them inside the HTML file. By doing this, we went from a webpage that required two css files to load to a webpage that only requires one css file to load.
Inlined css is placed in the head of the html document using style tags:
<style>
.... your css instructions here .....
</style>#3 Use less CSS overall
It is simple to say “use less css” but it is very difficult to do.
There are several reasons why there is so much unused css is loaded on most websites.
- WordPress themes that are customizable have massive additional css that is not required
- Frameworks like foundation or bootstrap are used, but the css is not tailored to the resulting website
- In general, the amount of css was not worried about in the past, so designers make their jobs easier by using more css than is required
Whatever the reason your CSS is massive, you still need to figure out how to make it smaller and smarter.
The reality
If you wrote the CSS or are the one in control of it, you can take the time to only include the CSS that is needed.
It is more likely however that you have bought a theme or design from someone else, and in this case, the only real solution is to speak with the designer who created the CSS and request a slimmer version.
If you are considering a new design or theme, you can save yourself time and money by making optimized CSS delivery a requirement of the project.
Tools
I have created a CSS delivery tool to help people examine how their CSS is being used on a page:
There is also the pagespeed tool which identifies many common css issues.
Dig deeper
If you want to learn more about how and why CSS affects your page load speed you may want to look at the CSS Object model.