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.
We Offer Website Speed Optimization Service!
Feel your website needs Page Speed Optimization? Do not panic. We will fix it for you. A fast-loading website to boost your website traffic, sales, and revenue..
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?
Before you go, you may be wondering what those resources are that block rendering and why they interest Google so much. WordPress and any CMS you can find today work with CSS and JavaScript style sheets.
Our web browser can load these resources before the HTML itself or do it at the same time, being slower to load.
In addition, sometimes these JavaScript and CSS resources are not necessary for the proper functioning of the web since they are only used in certain cases, so the Google analyzer warns us of this situation.
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
1. Async JavaScript
Our first plugin to eliminate Render-blocking Resources is Async JavaScript.
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.
If you feel up to it, you can add these attributes to all the theme code you are using, or use a plugin like Async JavaScript to do all the hard work for you.
The Async JavaScript plugin is free and you can quickly find it in the WordPress plugin directory. It’s created by the same developers of the Autoptimize plugin, very popular for optimizing WordPress, so if you use it, the logo will sound familiar.
Once you’ve installed and activated, go to Settings → Async JavaScript and:
- Check the box to Enable Async JavaScript at the top.
- 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:
- Wizard
- Settings
- Status
- Help
- 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.
Also the web browsers the plugin works with and recommendations to also use its other Autoptimize plugin in combination with Async JavaScript for further optimization.
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.
- Load JavaScript deferred in the JavaScript files section.
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.
3. Autoptimize
Our Next perfect plugin to eliminate Render-blocking Resources is Autoptimize. We can easily eliminate render-blocking Resources (JavaScript and CSS).
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
Here you must check the option ‘Optimize JavaScript code’ and leave the option ‘Aggregate JS files’ unchecked.
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”.
Conclusion
While PageSpeed Insights is a very good web performance tool, you shouldn’t be obsessed with achieving a 100 score (on the example web I worked with for this article I achieved a 93). My recommendation is that you optimize your WordPress as much as possible within your means, and fixing the problems like Eliminate render-blocking Resources. You can also fix Eliminate render-blocking Resources (JavaScript + CSS) manually.
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.
I hope these Best Plugins to Eliminate render-blocking Resources (JavaScript + CSS) helped you to optimize your WordPress website. As always, if you have any questions or comments, we will be happy to read and respond to you.
