Pricing
Written by Editorial Team on July 22, 2020

How to Eliminate Render-Blocking Resources on WordPress?

Render-blocking resources slow down the perceived page load times of your WordPress site by forcing visitors' browsers to delay rendering above-the-fold content while the browser downloads files that aren't needed right away. In this article, we are going to show you exactly how you can eliminate render-blocking resources on WordPress sites quickly and efficiently.

Why is render-blocking bad for WordPress?

What is render blocking in WordPress
~What is render blocking in WordPress?

Render means loading, so if something is render-blocking, it means that it is keeping the page from loading as quickly as it could. Your WordPress site might be taking a toll with slow loading speed if you have too many render-blocking scripts.

When your website takes a long time to load, it will be less favorable to search engines and website visitors.

A fast loading website typically takes under 2 seconds to load (and that should be your ultimate target) when it comes to speeding up your website.

How to quickly remove render-blocking JS files on WordPress?

Lucky for you, there are some quick steps you can take to remove render-blocking codes and snippet from WordPress. The task usually involves either one of these:

  • Remove the JS files completely
  • Minify JS files or put them in the footer area
  • Delay loading the render-blocking JS files

Option 1: Remove the JS files completely

If you don't know coding, the easiest way is to use the Asset Cleanup plugin. This plugin allows you to enable, disable any files from loading on your page.

Asset CleanUp Plugin
~Asset CleanUp Plugin

In other words, you can control what's being loaded and the lesser files being loaded, the faster your website will load. Using this plugin, you can easily enable or disable the files in just a few clicks/toggle.

Asset CleanUp Plugin features
~Asset CleanUp Plugin features

Asset CleanUp plugin allows you to perform multiple tasks, including controlling how a file or code snippet would perform either globally (whole site) or just a specific page. If you find Asset CleanUp plugin useful, there is a paid version that offers even more control.

Option 2: Minify and optimize JS files

If you want a faster WordPress site, you need to minify and optimize the JS files. One of the easiest way is to use cache plugin — most cache plugin allows you to minify JS files easily and quickly.

At WP Maven, we are a huge fan of WP Rocket and Autoptimize. With used correctly, large files could easily be configured and minimized to reduce the size of it. All in all, making your WordPress site loads faster.

WP Rocket file optimization feature
Autoptimize javascript optimization

An important step to remember is that WP Rocket and Autoptimize does about the same thing. Therefore, enable optimization in either one of the plugins and not both.

Option 3: Delay loading render-blocking scripts

The next step is to use delay loading render-blocking scripts. This can be done quickly with plugins such as Flying Scripts. This particular plugin handles only JS files and could easily delay the loading of the script by seconds.

Flying Scripts by WP Speed Matters
~Flying Scripts by WP Speed Matters

After installing the plugin, you need to specify the keywords for the plugin to work correctly. For example, specifying the keyword "gtag" or "ga" would allow the plugin to delay loading any scripts with these keywords in it.

You can easily delay the loading between 1 to 10 seconds. Personally, we find delaying 2 to 5 seconds is a nice golden range.

Other great options to speed up WordPress site

WordPress visual builders are great but they often add countless bloatload into your site. For example, Oxygen Builder and Beaver Builder are known for super clean codes while Divi and Elementor are known for adding files and weight into your WordPress site.

We know a lot of websites that use Gutenberg nowadays. One of the best ways to make Gutenberg to full use is to install Gutenberg addons. There are many Gutenberg addons but it is also important to remember that these addons are known to add more files and make your website loads slower.

Having just one or two addons installed is a great way to make sure your website load fasts while having lesser JS filed installed and triggered. If you are looking for a good Gutenberg addon to use, we can't help to recommend Genesis Pro (by WP Engine) which is one of the most intutive in the market.

Integrating your WordPress site with Cloudflare is an excellent choice especially in making sure your website loads fast. Cloudflare comes with inbuilt minification and optimization, so it is important to enable just Cloudflare or your cache plugin.

Also, the basic Cloudflare plan (free version) doesn't offer much speed optimization but performs decently enough for smaller websites.

Summary: How to eliminate render-blocking JS scripts in WordPress?

There are many ways you can eliminate render-blocking JS scripts in WordPress. While all of these methods work, deciding on one or two methods is often sufficient to speed up your website.

Article written by Editorial Team

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Related Posts

crossmenu