Table of Contents
When testing your WordPress site’s performance with PageSpeed Insights, it’s pretty usual to come across one of the most common recommendations: Eliminate the render-blocking resources.
As you’ll find out, render-blocking resources – JS and CSS files – can hugely affect your site’s performance. In practical terms, your WordPress site will load slower. Render-blocking resources will affect critical metrics such as the Largest Contentful Paint and the First Input Delay — two of the Core Web Vitals metrics.
In this article, you’ll learn what render-blocking resources are, what their impact on your WordPress site is, and how you can identify and remove them.
You can first watch our video, or just keep reading!
What are Render-Blocking Resources?
Render-blocking resources can be CSS and JavaScript files. They’re named render-blocking resources because they slow down the rendering of the page. At the same time, they’re non-critical for loading the page.
In short: the immediate need to use the resource will determine if the resource is render-blocking or not. Tracking codes, such as Google Analytics code and Facebook pixels, are render-blocking resources.
Let’s go over an example to explain the impact of the render-blocking resources in plain English.
When you load a page, the browser analyzes (or parses) the HTML of the page — it’s a required step to render the page and show you the content displayed above the fold.
If the browser encounters CSS and JS files, it has to download and parse them, too. As a result, the page takes longer to load.
Without parsing these resources — that are not needed to display the page’s content — the browser would render the main content’s page faster. Users would enjoy a better user experience, and performance metrics would be good, too.
In short, the CSS and JS render-blocking resources delay the rendering of the page for no valid reason.
Why you Should Eliminate JS and CSS Render-Blocking Resources on WordPress
As we explained, the overall reason why you should get rid of the render-blocking resources is that your WordPress site’s performance will get affected.
For one, some crucial performance metrics will get worse. As a result, your Google PageSpeed Insights performance score won’t be good either. Here’s why.
The PageSpeed Insights score is based on Lighthouse and its six metrics. Three metrics get affected by render-blocking resources:
- Largest Contentful Paint – it accounts for 25% of the overall score
- Total Blocking Time (replacing First Input Delay) – it accounts for 30% of the overall score
- First Contentful Paint – it accounts for 10% of the overall score.
From the weight of each metric involved, you can easily see how important it is to remove the render-blocking resources if you want to get a 90+ PageSpeed score.
Don’t forget that the loading time itself will also get affected. It’s not only about the PSI score and the Core Web Vitals’ and SEO performance. Overall, it’s about providing an excellent user experience.
| 🚀 Want to know more about the Lighthouse performance audit? Read our article and learn how to improve your Lighthouse performance score! |
How to Find Render-blocking Resources
The easiest way to find the render-blocking resources is to analyze the PageSpeed Insights report. Alongside the recommendation “Eliminate render-blocking resources”, you’ll find a list of files you should take care of. You can see an example below:
As you can see from this example, it’s common to have CSS and JS render-blocking resources such as trackers and style sheets needed to paint elements below the fold.
A more advanced way to identify the render-blocking resources is to take advantage of the Coverage tab in Chrome DevTools. You can read a dedicated article. Please note that this page is about unused JS and CSS files, which is another way to name all the resources that, for one reason or another, are not needed for rendering the page.
How to Fix “Eliminate the Render-blocking Resources” on WordPress (With and Without a Plugin)
After identifying the render-blocking resources, you’re ready to fix the PageSpeed Insights recommendation and eliminate the CSS and JS files needed from you WordPress website.
There are two main ways to do it:
- Defer option: the CSS and JS files will be only downloaded while the browser parses the HTML code. The browser will parse them only after the HTML parsing is finished.
Please note that the browser will execute the files in the exact order they appear in the code. - Async option: once again, the CSS and JS files will be only downloaded while the browser parses the HTML code. This time, the browser will start parsing them only after downloading all the resources. It means that the HTML parsing could still be going on.
Unlike the defer option, the files won’t necessarily be executed in the order they appear in the code.
Overall, the Defer and the Async option accomplish the same goal, even though they execute it slightly differently.
The most important aspect to keep in mind is that the async option may cause problems when parsing files that rely on previous ones that have not been executed yet. That’s why your site may get broken.
The Defer option is the safest choice when you have files that are interdependent. In any other case, you can use the async option as an alternative.
How to Eliminate Render-blocking CSS
If you want to eliminate the CSS render-blocking files manually, these are the steps you should follow:
- Extract and inline the Critical Path CSS (CPCSS) using a CSS generator tool such as this one.
- Load the rest of the classes in async by applying the following pattern.
If you prefer not to use the Critical Path CSS, or if it gives you some issues like FOUC (flash of unstyled content), you have another option.
You can split the CSS files by adding media queries to each stylesheet, as explained in this Google resource. It’s recommended because when media queries are added inside CSS files, the whole file has to be parsed and fully downloaded to pick what is needed from there. As a result, performance gets worse.
An easier alternative is to use WP Rocket. You can easily eliminate render-blocking CSS in the File optimization tab thanks to the Remove Unused CSS (RUCSS) option. This feature will first remove all stylesheets and inline CSS from the HTML. Then, it will add the Used CSS as an inline CSS element:
How to Eliminate Render-blocking JavaScript
As you read, you can use both async and defer options to tackle the JS render-blocking resources.
Once you identified these JavaScript files, you can include the async or defer attribute in the code:
Here’s an example of the defer attribute:
<script defer src="/example-js-script"></script>And here’s an example of the async attribute:
<script async src="/example-js-script"></script>When choosing which attribute to implement, please keep in mind the recommendations we shared in the previous section.
WP Rocket can also help you with deferring the loading of your JS files in the simplest way. The Load Javascript Deferred feature allows you to defer the JS render-blocking resource with no sweat!
What’s more, you can also exclude any JS file from being deferred if you need it.
Go to the File Optimization tab and choose the Load JavaScript deferred option. Simple as that.
Eliminate Render-blocking Resources with a Plugin: Before & After results
If you want to easily fix the “Eliminate Render-Blocking Resources” with a plugin, WP Rocket is the best option you have.
You may be asking what’s the real difference in the PageSpeed Insights score performance when using WP Rocket and its default features, plus the Optimize CSS delivery and Load JavaScript deferred options described above.
We ran a test by installing the Astra theme and importing an eCommerce site with Gutenberg.
Here’s the performance score without using WP Rocket. It’s not super bad. However, the site doesn’t achieve the 90 grade, leading to a green score and a better user experience. What’s more, LCP and CLS are above the threshold required by Google:
The scenario changes after activating WP Rocket. Remember: we kept all the default features and only activated the two options described in the article. With no effort at all, we got a 90+ score and green LCP and CLS:
You can see how powerful these features are and how simple it is to improve your site performance!
At this point, you may be wondering why Time to Interactive is not excellent, too. The truth is, just by activating the WP Rocket lazy load feature, the TTI grade will dramatically improve as well:
🚀 In short: there’s nothing to hold you back from optimizing your performance score in a few minutes with WP Rocket!
If you’re still a bit skeptical, read the case study on how to score 100% on PageSpeed Insights!
Start Eliminating the Render-blocking resources Right Now
Eliminating the render-blocking resources is crucial for optimizing your WordPress site performance and improving Core Web Vitals grades.
You’re in luck: WP Rocket makes it easy to manage both CSS and JS files.
Not a WP Rocket customer yet? Save yourself time and let WP Rocket do the job for you. WP Rocket is the easiest way to improve your PageSpeed Insights score.
You don’t even have to touch any settings! WP Rocket will automatically apply 80% of web performance best practices. You’ll see an instant improvement to the naked eye in your Core Web Vitals scores right away.
What’s more, you’ll stop managing multiple web performance plugins. You will only need WP Rocket to boost your performance — no technical knowledge required, we promise!
