One of the most common issues that website owners encounter while optimizing the loading speed of their site is that of render-blocking resources.
The issue is highlighted by page speed testing tools like Google PageSpeed Insights.
It leaves the webmasters clueless about how to fix it.
Since you’re reading this guide, you too might have seen this issue in PageSpeed Insights or any other such tool.
Don’t worry — by the end of this guide, you’ll eliminate render-blocking WordPress resources from your site.
Let’s get started!
Frequently Asked Questions
What does “Eliminate Render-Blocking Resources” mean?
Render-blocking resources are CSS or JS files included in your page content that prevent the browser from rendering the rest of your web page until they’ve been loaded.
If these resources are near the top of your webpage (i.e. in the header or above-the-fold content), they can make your entire page quite slow to load.
How Do I Know If I Have Render Blocking Resources?
If you use Google’s PageSpeed Insights tool, it can easily tell you whether you have render-blocking resources on your page or not.
Then you can start the process of eliminating them.
What You’ll Need to Eliminate render-blocking WordPress
You’ll need any of the following plugins to eliminate render-blocking resources from your WordPress site:
- The WP Rocket plugin (paid option)
- Autoptimize plugin and Async JavaScript plugin (free options).
How to Eliminate Render-blocking WordPress: Step-by-Step Instructions
Method #1: Eliminate Render-Blocking Resources with WP Rocket plugin
Performance plugins such as WP Rocket offer an overall solution to boost the loading speed of your WordPress site.
Therefore, it’s not surprising that WP Rocket includes functionality to eliminate render-blocking WordPress resources too.
Here’s how to use it:
First of all, go to the official website of WP Rocket plugin and buy the plugin.
It’s available in three versions, with the cheapest version costing only $49.
Once you buy it, the plugin download link will be sent to your email from where you can download the WP Rocket plugin.
Now go to Plugins >> Add New and click on the “Upload Plugin” button.
Browse your files by clicking the “Choose File” button and select your downloaded .zip file of WP Rocket.
Click on “Install Now” to begin the installation of the plugin.
Once you’ve installed the plugin, you’ll receive a success message on the screen along with a link to activate the plugin.
Click that link to activate the plugin.
Now in your dashboard, select WP Rocket from the left panel in your WordPress dashboard.
Navigate to the “File Optimization” tab.
In this tab, turn on the “Optimize CSS Delivery” option.
Next, enable the “Load Javascript Deferred” option.
Click “Save Changes”.
Now test your site in the Google PageSpeed Insights tool. You won’t get the render-blocking error again.
Method #2: Eliminate Render Blocking Error Using Autoptimize Plugin
While WP Rocket is a perfect solution to fix the render-blocking error on WordPress, it’s a premium plugin.
We understand that some of you may not have the budget or the willingness to spend something on a plugin for this purpose.
So here’s another solution: using the Autoptimize plugin, you can eliminate the render-blocking resources for free.
Just follow the steps given below:
Navigate to Plugins >> Add New.
Search for “Autoptimize Async”, and install the following plugins from the search results.
Once both of them are installed, activate them by clicking their own respective “Activate” buttons.
Next, navigate to Settings >> Async Javascript and check the “Enable Async Javascript” checkbox on top.
Now choose between the “Apply Async” and “Apply Defer” options.
You should first try the Async option, but if it gives problems then you can try the Defer option.
And if you still get issues, you can also try the remaining two options, both of which enable Async or Defer modes with jQuery excluded.
Next, navigate to Settings >> Autoptimize and check the checkboxes for “Optimize Javascript Code” and “Optimize CSS Code” settings.
Finally, scroll down and hit the “Save Changes” button.
Now you can check your site in Google PageSpeed Insights.
The render-blocking error will be gone.
The catch with this method, as you saw, is that you need to install two separate plugins and work with a slightly more complex set of options than WP Rocket.
But again, you’re getting this functionality for free, so you can’t complain!
Similar Tutorials to Check Out
- How to Speed Up WordPress: Eliminating render-blocking resources is one part of speeding up your site. This tutorial covers other SEO best practices that you can follow to boost the loading speed of your WordPress site.
- How to Use Cloudflare With WordPress: This tutorial covers how can you use Cloudflare CDN service with your WordPress site to make it even faster and more secure.
- How to Combat Spam in WordPress: This last tutorial covers how can you combat spam on your WordPress website.
Wrapping Up
So that’s how you eliminate render-blocking resources from your WordPress site.
One of the methods is free, while the other requires a premium (but not too costly) plugin.
Now you can choose the method of your choice. Let us know in the comments which method you prefer and why.
And also, encourage us to produce more such helpful tutorials by sharing this one on social media.
