Surely when you have done a speed test on Pagespeed Insights of your website you have come across this problem “Eliminate render-blocking resources”. As you know, the render-blocking resources significantly affect the Website Speed and User experience. If Your website speed is not good, your site is not compatible with Core Web Vitals. As you know, Core Web Vitals (CWV) is Google’s ranking factor, so you should optimize your website for CWV.
Fixing the “Eliminate render-blocking Resources” problem manually can be hard and time-consuming. With some Plugins, your job will be easy, you can easily eliminate render-blocking Resources from your website.
So in this article, we will learn about the best WordPress plugins to eliminate Render-blocking Resources.
But first, learn..
What is Render Blocking Resources?
Our web browser can load these resources before the HTML itself or do it at the same time, being slower to load.
Normally, the theme that we are using is responsible for this and sometimes we will not be able to solve it because they will be resources necessary for the correct functioning of the website.
But if we can try or at least make the “expendable” resources do not disturb the loading of the website.
Best Plugins to Eliminate render-blocking Resources
To avoid the “eliminate Render-blocking Resources” error you can use two attributes called “async” and “defer”. These two attributes make the script load when you play, although with some differences.
Async downloads the script in the background without interfering with the HTML loading when it is completely downloaded, and once downloaded is when it is executed, this way it interferes much less in the loading of the HTML while it is being downloaded.
Defer acts differently. The script will stop downloading until the HTML is fully downloaded.
- Choose any between Apply Async and Apply Defer in the Quick Settings box.
Let’s learn more about Async options:
If we access the menu, you will see that you have five tabs:
- Optimize More!
The Wizard is quite messy and needs an API key from the GTmetrix service to work, so it doesn’t seem like a very interesting option.
The Status tab will show us the current configuration, as well as the possibility of carrying out a test in GTmetrix, although we also need the API, so we are in the same case in the Wizard.
The Help section does show us interesting things. It explains the different combinations that we can select and how the plugin works if we select async or defer.
As well as a small configuration guide, functional on most websites, for the joint use of the two plugins.
The Optimize More! It only shows us other plugins that we can install on our website, so you can skip them.
The Settings tab is from where we will be able to configure the plugin and all the parameters that interest us.
2. WP Rocket
The second plugin that we are going to recommend, and among the best known in the community, is WP Rocket, an extension that not only helps you fix the render-blocking resources problem, but can also measure the performance and caching of your website.
With that in mind, this time the installation of WP Rocket is the same as the previous step, you just have to go to WordPress and search, Download, and then activate.
Once you have it, look for the “File Optimization” section and check or enable the following boxes:
- Optimize CSS delivery in the CSS files tab.
With this last option, you can also try disabling jQuery, but if you see that with the plugin you have problems with loading, then it is best to reconnect the safe mode of jQuery. This way you can know if he is the culprit or not of the problems.
Now returning to the topic again, if you have already checked the boxes, the blog should go through the first stage of PageSpeed Insights, which means that you already have the option to eliminate Render-blocking Resources.
In this case, it will help us with the free version of the plugin. Although, logically, we will not have the potential performance improvement that WP Rocket brings us.
The first step, install and activate Autoptimize.
With the plugin already activated, go to Settings-> Autoptimize
Next, go down to the CSS section and check the option ‘Optimize CSS code’ and also, leave the option ‘Aggregate CSS files’ unchecked as in the following image.
And Click on “Save changes”.
If you need help to fix this or other errors on your website, do not hesitate to contact us. Our professional developers’ team will fix CWV (Core Web Vitals) errors significantly for our clients for the maximum Website Speed and Performance. So Check Our Affordable Pricing, so we can start fixing errors immediately.