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 be familiar with the most common causes of poor page performance – uncompressed image files, inadequate hosting, and lack of caching, to name a few. However, there is another often overlooked culprit in the game: JavaScript, which is blocking rendering.

What is render-blocking JavaScript?

Render-blocking JavaScript is JavaScript code in your website files that prevents a page from loading quickly. Often times, this render blocking code does not need to run before the page is displayed in the browser and can be delayed until the website actually needs this script to run.

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.

How to remove render blocking JavaScript

  1. Identify the render blocking JavaScript code.
  2. Remove the identified JavaScript manually or with a plugin.
  3. Run a site scan again.
  4. Check your website for errors.

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 website 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 want to land at or above the top of this area.

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

the report from Google Pagespeed Insights

Image source

You will see a list of files 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 the file size by removing redundant or unnecessary code), and delaying the loading.

Remember to exercise caution with this plugin or any similar plugin as you will be modifying the backend of your website. 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.

the settings page in the plugin for automatic optimization

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.

the settings page in the w3 total cache plugin

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”.

the settings page in the w3 total cache plugin

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.

the settings page in the w3 total cache plugin

9. After adding all of the JavaScript resources reported by PageSpeed ​​Insights to block rendering, click 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 Tags instruct the browser to load and execute the script identified by the tag src (Source) attribute. The problem with this process is that loading and executing it delays the parsing of the webpage by the browser, which affects the overall loading time:

a visualization of the standard timeline for loading scripts

Image source

To fix this you can either add the asynchronous (asynchronous) or the move Attribute to the script tags for render-blocking resources. asynchronous and move are placed like this: