How to Remove Render-Blocking JavaScript From Your WordPress Website

Have you ever finished a WordPress website and loved everything about it? Then immediately started hating it after realizing it took forever to load?

Not only are slow loading speeds a nuisance to you and your visitors, but they can also cost you significantly when it comes to SEO. Since 2010, Google algorithms have taken the loading speed into account when making ranking decisions, so that slow pages appear lower on the results pages.

You may know the most common causes of poor page performance – uncompressed image files, inadequate hosting, and lack of caching, to name a few. But there’s another often overlooked culprit in the game: JavaScript, which is blocking rendering.

Don’t get confused – JavaScript is fantastic. It helps to add dynamic, interactive and engaging elements that improve the functionality and usability of your website. But too much of it can be a huge time waster.

Here’s why: when a web browser first loads a web page, it parses all of the page’s HTML before showing it to a visitor on the screen. If the browser encounters a link to a JavaScript file or an inline script (i.e. JavaScript code written in the HTML document itself) while parsing, the HTML parsing will stop while fetching and executing this JavaScript code, which slows everything down.

If you’ve tweaked your pages in WordPress and you’re still having issues, JavaScript may be the culprit. Sometimes it is important to run this code on the first load, but most of the time it can be removed or delayed until the load queue ends.

In this post, we are going to show you how to remove that annoying code from your WordPress website and improve your performance.

1. Identify the render blocking JavaScript code.

Before making any changes, you must first find the faulty JavaScript. The best way to do this is by using Google’s PageSpeed ​​Insights tool. Just enter your site’s url and click Analyze.

When the scan is complete, Google will assign your website an overall speed value from 0 (slowest) to 100 (fastest). A score in the 50 to 80 range is average, so you should land in the upper part of this range or above.

Scroll down to identify render-blocking JavaScript files that are slowing down your page opportunities, then open the Eliminate render-blocking resources Accordion.

Image source

You will see a list of files that are slowing down the “first painting” of your page. In other words, these files affect the loading time of any content that appears when the page is first loaded in the browser. This is also known as “over-the-fold” content.

Be aware of any files that end with the .js extension as this is what you want to focus on.

2. Remove the identified JavaScript manually or with a plugin.

After identifying the problem, there are two ways to fix it in WordPress: manually or with a plugin. We’ll cover the plugin solution first.

Several WordPress plugins can reduce the effect of rendering JavaScript on WordPress websites. Let’s discuss two popular solutions, Autoptimize and W3 Total Cache.

How to remove render blocking JavaScript with the Autoptimize plugin

Autoptimize is a free plugin that will modify your website files to serve faster pages. Auto-optimization works by aggregating JavaScript files (and inline JavaScript code if you wish), minimizing the JavaScript (i.e. reducing file size by removing redundant or unnecessary code), and delaying loading.

Since you are changing the backend of your site, you should exercise caution with this plugin or a similar plugin. To remove render-blocking JavaScript using Autoptimize:

1. Install and activate the Autoptimize plugin.

2. In your WordPress dashboard, select: Settings> Optimize automatically.

3. Under the JS, CSS & HTML Check the box next to Optimize JavaScript code?.

4th When the box next to Aggregate JS files? is enabled, disable it.

5. Click at the bottom of the page Save changes and empty cache.

6th Rescan your website with PageSpeed ​​Insights and look for improvements.

7th If PageSpeed ​​Insights continues to report render-blocking JavaScript files, return to Settings> Optimize automatically and check the box next to Aggregate JS files?.

8th. click Save changes and empty cache.

How to remove render blocking JavaScript with the W3 Total Cache plugin

W3 Total Cache is another widely used caching plug-in that can be used to fix delayed code. If you are already using the solution, it is easy to implement this additional feature. To remove render blocking JavaScript using W3 Total Cache:

1. Install and activate the W3 Total Cache plugin.

2. A new performance The option will be added to your WordPress dashboard menu. Choose Performance> General Settings.

3. By doing Minimize Check the box next to Minimize, then adjust Minimize mode to Manual.

4th click Save all settings at the end of this section.

5. From the Dashboard menu, select Performance> Minimize.

6th By doing JS Section next to Minimize JS settings, Make sure, that Activate Check box is activated. Then under Operations in areas, open the first one Embed type Dropdown and choose Non-blocking with “postponing”.

7th Under JS file managementSelect your active topic from the theme Drop down list.

8th. Read the results of your PageSpeed ​​Insights from your previous scan. For each item under Eliminate render-blocking resources Click on “.js” Add a script by doing Minimize JS settings Area. Then copy and paste the full URL of the JavaScript resource from PageSpeed ​​Insights into the File URI Field.

9. Click when you have inserted all of the render blocking JavaScript resources reported by PageSpeed ​​Insights Save settings and clear caches at the end of this page area.

10. Rescan your website with PageSpeed ​​Insights and look for improvements.

How to remove render blocking JavaScript manually

Plugins can do the backend work for you. On the other hand, plugins themselves are just files added to your web server. If you want to limit these additional files or if you prefer to do the programming yourself, you can manually address the render blocking code.

To do this, find the