Best Ways To Remove Render Blocking resources In WordPress And Improve Site Speed

If you’ve ever run a speed test on Google page insights, then you must have got a suggestion to eliminate render-blocking resources. Right?

But you don’t have any clue about what are render-blocking resources are and how to fix it? Don’t worry! In this article, I will show you what it is and how you can quickly fix it without any coding knowledge. So let’s dive in.

What Are Render-Blocking Resources?

Render Blocking resources are most commonly Javascript and CSS files that are located at the front end of your site that prevents downloading other resources of your site before loading these files.

In simple words: When you install a new theme or plugin on your website, it injects a JavaScript and CSS file into the front end of your site.

These files can prevent your web page to render smoothly and cause the render-blocking issue. And ultimately, it can harm your website loading speed.

So, if you don’t want to compromise on your loading speed and improve your Google page insights score, you have to eliminate those render-blocking files from your site.

Although JavaScript and CSS files are the most common render-blocking resources still other types of files on the section of your website can cause the issue as well, like fonts and HTML imports.

Why Render Blocking Resources Are Not Healthy For Your Site Performance?

The biggest reason is – Speed. Render-blocking resources are one of the biggest reasons behind slow loading sites. A lot of website owners neglect this part, and many of them even don’t know what it is. And because of that, most of them don’t even know the real cause behind their slow-loading sites.

If you eliminate those render-blocking resources from your site, it will minimize the critical rendering path of your site and eventually make your website load faster than before. We all know how important website speed is for user experience and search engines. So, it’s always a better option to improve your website speed.

How To Check If Your Website Has Render Blocking Resources?

Using Google page speed insights, you can easily find out if your website has render-blocking resources.

Go to Google page insights, enter your site’s link, and click on “Analyze.”

Once it finished analyzing your website, then scroll down to the opportunities section.

Here Google will give you all the possible suggestions to improve your website loading speed.

Under opportunity, if you see the suggestion “Eliminate render-blocking resources,” that means your website has this issue.

Note: We are getting this warning because of the font type that we use. If you use any Google-friendly font, then you will not be getting this issue.

However, if you don’t see the suggestion, congratulations, you don’t have to do anything because your website doesn’t have this issue.

Furthermore, if you click and expand the suggestion “Eliminate render-blocking resources,” it will show you the specific files causing the issue.

Overall, it’s probably the easiest and fastest way to find out if your website render-blocking issues. I’m sure you can also find out by running some technical tests, but if you’re not a techy geek like me, then it’s the best option for you.

3 Best Plugins You Can Use To Eliminate Render Blocking Resources From Your Site (Without Coding)

As a WordPress user, you have a big advantage. You can almost do anything on your WordPress site using a simple plugin.

Whether you want to change the design of your blog, add any particular widget, or improve the performance of your site, you can literally do anything using a plugin.

Similarly, for eliminating render-blocking resources, you don’t have to be a techy geek. You can do that simply by using a plugin. There are quite a few plugins on the market that helps to solve this issue, but not all of them are totally reliable.

But some eliminate render-blocking WordPress plugins work pretty well to solve this issue. Here are the best plugins among them:

• WP Rocket
• Autoptimize
• W3 Total Cache

Let me show in action how you can use each of these plugins to eliminate the render-blocking resources issue from your site.

1. WP Rocket

WP Rocket is one of the best premium cache and performance optimization plugin out there on the market, and it’s the best choice among these 3 plugins. Because it’s too easy to use this plugin and it’s the most reliable one as well.

To use this eliminate render blocking WordPress plugin, first of all, you have to install and activate it on your WordPress site. After that, go to Settings > WP Rocket and then click on “File optimization.”

Then on the file optimization tab, check the following boxes:

• Minify HTML
• Minify CSS files
• Combine CSS files
• Optimize CSS delivery
• Remove jQuery Migrate
• Minify JavaScript files
• Load JavaScript deferred

And after that, click on “Save changes” and clear the cache of your site.

That’s it.

Now you can again run a test of your site on Google page insights, and you’ll see you’re no longer getting the suggestion “Eliminate render-blocking resources.”

Note: Using all of these file optimization options can break your site or affect some of your website elements. That’s why the safest option is, try each of these file optimization options one by one and see if it’s affecting your site. If you see any of these options breaking your site, then don’t use that particular option.

2. Autoptimize

Autoptimize is another amazing plugin that helps to solve this render-blocking issue. But the best part is it’s completely free to use. If you don’t have a budget for WP Rocket, then Autoptimize can be a great alternative to WP Rocket for you.

Like WP Rocket, it’s also a very handy and easy to use plugin. To use this plugin, first of all, you have to install it from the WordPress directory and activate it. Then go to Settings > Autoptimize.

Now first check “Optimize JavaScript Code” from the JavaScript Options and uncheck “Aggregate JS-files.”

Then scroll down a bit and again check “Optimize CSS Code” from the CSS Options and uncheck “Aggregate CSS-files.”

After that, click on “Save changes and empty cache.”

Now you can check if your website is getting the same error or not. In most cases, these settings are enough to solve this issue, but in case if it doesn’t work for your site, then you can also play around with other advanced settings as well.

3. W3 Total Cache

W3 Total Cache is one of the best and most popular caches and performance optimization plugins in this market. It has over 1 million+ active installs, and they have both free and paid versions available.

Overall it can be a very powerful tool for you to eliminate render-blocking resources from your site; for using the plugin at first, install and activate it. After that, go to Performance > General settings.

Scroll down to the minify section, check the minify box as enabled, change the minify mode to manual and click on “Save all settings.”

Then head back to Google page insights and find out the files that are causing the render-blocking issue. Then again, go performance > minify from your WordPress dashboard. Scroll down to the JS section and select the Beforeembed type as ‘Non-blocking using “defer.”’

Then on JS file management, choose your active theme, click on “Add a script,” copy-paste the JavaScript URLs from Google page insights, and click on “Save all settings.”

Again scroll down to the CSS section and choose your active theme on CSS file management.

After that, click on “Add a style sheet” and copy-paste CSS stylesheet URLs from Google page insights that are having render-blocking issues.

And click on the “Save settings & purge caches” button.

That’s it. You can quickly have a look into Google page insights and see if the issue is resolved or not.

FAQs Of Render-Blocking Resources

1. What is eliminate render-blocking resources?

When your website renders unnecessary resources at the top of your site and blocks the necessary important resources to load, it affects the loading speed of your site. That’s why Google page insights often suggest eliminating unnecessary render-blocking resources for improving the site speed.

2. How do I fix render-blocking CSS in WordPress?

You can easily fix render-blocking CSS in WordPress by using some plugins like WP Rocket, Autoptimize, and W3 Total Cache.

3. Where can I find render-blocking scripts?

You can find out the render-blocking scripts of your site using Google page insights.

4. Are images render-blocking?

No images are not render-blocking resources.

5. Does render-blocking resources affect website loading speed?

Definitely “Yes“! Render-blocking resources usually block the necessary scripts to load; thus, the browsers take a really long time to download the files and process it, and ultimately it affects the loading speed of your site.

Conclusion

Render blocking issue is not the biggest factor behind a slow loading site, but at the same time, it plays a significant role in the speed performance of any website.

In simple words:

If you want a faster website, it’s always a better option to eliminate render-blocking resources from your site. And the best part is you can solve this issue just by using a simple plugin.

If you don’t want to get into technical things, then WP Rocket or Autoptimize is the best option without any doubt. But if you have some technical knowledge, then you can also try out W3 Total cache (Although this plugin is a bit confusing).

I hope this article solved all your doubts and helped you to solve your issue. And if you loved this article and didn’t forget to share it with your friends and colleagues.