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.
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
- Identify the render blocking JavaScript code.
- Remove the identified JavaScript manually or with a plugin.
- Run a site scan again.
- 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 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 Tags in Ihren Website-Dateien für die Ressourcen, die in Ihrem PageSpeed Insights-Scan identifiziert wurden. Sie werden ungefähr so aussehen:
<script src="https://blog.hubspot.com/marketing/resource.js">
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: 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:
<script src="https://blog.hubspot.com/marketing/resource.js" async><script src="https://blog.hubspot.com/marketing/resource.js" defer>
While these attributes have similar effects on load times, they instruct the browser to take different actions.
The asynchronous The attribute signals the browser to load the JavaScript resource while the rest of the page is parsed and runs this script immediately after loading. Executing the script stops the HTML analysis:
Image source
Scripts with the move Attributes are also loaded while the page is being analyzed. However, these scripts are only loaded after the first rendering or after loading the more important parts:
Image source
The move and asynchronous Attributes should not be used together for the same resource, but one may be better suited to a particular resource than the other. Generally, when a non-essential script is based on a script to be run beforehand, use move. The move The attribute ensures that the script is executed after the previous required script. Otherwise use asynchronous.
3. Run a site scan again.
After making your changes, take a final scan of your website through PageSpeed Insights and see what impact your changes had on your score.
Hopefully there will be a noticeable improvement, but if not, don't worry. Many factors can affect page performance and are worth finding and eliminating.
4. Check your website for errors.
In addition to doing another scan, double-check your pages to make sure your website is working. Is the page loading correctly? Are all items displayed? If something is broken or won't load properly, roll back your changes and fix the problem.
When you've reached the point where you've repeatedly tried various measures with minimal speed gains, you should consider other ways to speed up your pages rather than risking damaging your website.
Optimize your site for users
Many factors contribute to the user experience on your website, but few are more important than loading time. Whenever you make large changes to the content or appearance of your WordPress site, you should always consider how such changes will affect performance.
Now that you've got rid of the render blocking JavaScript, it's time to further optimize your website's speed by analyzing other features that are known to affect performance. Try to include regular speed tests in your website maintenance plan. Keeping one step ahead of potential problems is critical to your success.