How to Fix Render Blocking Javascript from a Website

  • by
  • SEO
Fix Render Blocking JavaScript

In this tutorial, you will learn how to fix render-blocking JavaScript for a website without using any plugin and other external tools.

As like as render-blocking CSS, JavaScript and jQuery also create some difficulties in loading a web page faster. And the modern web page interface is not going smoothly without JavaScript. So it is essential to fixing JavaScript or.js files to make a web page faster than before and too many JavaScript files are not suitable for small devices.

So, what is the solution?

So, if you want to avoid this problem, there are many ways to do this. But according to Google documentation, the easiest way is deferring the JavaScript file’s in the footer area, so it can’t create any conflict while rendering the web page in the browser.

How to Defer JavaScript or .js files:

Try to keep you all JavaScript code’s in only one file if possible. And then use the HTML async attributes while calling it to your main template. The script will look like:

<script async src="something.js">

If you have too many JavaScript files and they are also too big to make one file using them (The file name implements some JavaScript files in different templates, so be careful while handling with it.) you can defer them all from functions.php

You can find a lot of magic codes available on the internet to doing this stuff, but I just want to share the best one that works for me.

/* Function for defer parsing of javascripts, for loading the website 
faster */

function defer_parsing_of_js ( $url ) 
{
   if ( FALSE === strpos( $url, '.js' ) ) 
   return $url;
   if ( strpos( $url, 'jquery.js' ) ) 
   return $url;
   if ( strpos( $url, 'wp-custom-countdown' ) )
   return $url;
   return "$url' defer ";
}

add_filter( 'clean_url', 'defer_parsing_of_js', 11, 1 );

The piece of code is short, but it just gives an amazing result. And after using this code, I found that all render-blocking JavaScripts are getting fixed from Google Page Speed Insight.

How this code work:

Actually, this code rewrites the URL which contains .js  at the end of it with HTML5 defer Attribute. So all of.js files are loading in the footer area.

My story to find this code:

However, I already fixed up all JavaScript files using HTML async and inline Methods, but still, I can’t able to fix up the WordPress core JavaScript file’s that must necessary to display WordPress menus. Before applying these codes, these JavaScript files are executed before the <head> tag automatically, and I have no control over it (because it is risky to edit WordPress core files). And then, at last, I found this solution to fix it. And after applying it to the functions.php, I discover that the possible errors are disappeared.

Note: Don’t apply it directly to your code. You can make a plugin for it and try only off-working times if creates any conflict with your WordPress environment. You can run it to fix render-blocking Javascript while you are not actively working on your website.

Need any help to fix your website’s critical render-blocking JavaScript files? Feel free to contact us and we definitely give you a hand to fix these errors. By the way, have a great coding journey. Good luck!

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.