Enter your search term

Search by title or post keyword

How to Eliminate Render-Blocking WordPress Resources from Your Blog or Website

Level up your digital marketing skills with our free courses, expert insights, forums, and social groups!

Check it Out

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.

pasted image 0 30

Next, enable the “Load Javascript Deferred” option.

pasted image 0 29

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.

pasted image 0 31

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.

pasted image 0 32

Next, navigate to Settings >> Autoptimize and check the checkboxes for “Optimize Javascript Code” and “Optimize CSS Code” settings.

pasted image 0 33

Finally, scroll down and hit the “Save Changes” button.

pasted image 0 34

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

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.

Leave a Comment