How to Defer Parsing JavaScript Files in WordPress?

While checking your site speed at GTmetrix or on Google Page speed insight you may have come up with the Defer Parsing of Javascript issue, this is really a big problem for WordPress users, even plugins like w3 cache can’t totally resolve it, but here are some easy and most reliable methods to solve this issue for improved speed of your site.

Javascript files are placed in a head section of WordPress site if they are not properly deferred then they can cause a big delay in site rendering and user may leave your site before it even completely load, so to solve this problem we can defer JS files by telling browser not to load JS files at start, you can do this in several ways, some of these hacks are discussed below:

Use w3 Total Cache for Defer Parsing

w3cache plugin have built-in option to defer the JS files, you can do this in Minify section of the plugin, open Minify Page and then jump to JS section, here choose “Non-Blocking – Defer” in embed option as shown in image  and save the settings, clear all your caches and check your site again with Google Page speed or GTMetrix.

This option will work for most of the people, if not then try the next one.

Hard coding your Theme

Some themes have built in JS handlers so they can be used to defer JS parsing, you can simply do it by adding the following given code in active theme Function.php file before closing of PHP tag (?>)

function defer_parsing_of_js ( $url ) {
if ( FALSE === strpos( $url, '.js' ) ) return $url;
if ( strpos( $url, 'jquery.js' ) ) return $url;
return "$url' defer ";
}
add_filter( 'clean_url', 'defer_parsing_of_js', 11, 1 );

This will most probably solve your issue, if not try next.

Eliminating Render Blocking Scripts Manually

If you have some external scripts and they are causing the issue, then you can simply defer them by adding few tags to them, here’s how:

<script type="text/javascript" defer="defer" src="YOUR_SOURCE_HERE"></script>

Just add defer tag to your scripts as shown above and it will do the rest.

CloudFlare Solution

If nothing is going to help you then use CloudFlare to solve this issue, cloudflare Rocket loader which is available for all packages including free is best way to speed up your site and defer the parsing of Javascript, it may break functionality for few themes but for most of the site it will work fine, just go to cloudflare site Dashboard and then click on Speed from menu, here select Automatic in front of Rocket Loader and it will start working, check again your site, if its fine then your problem is solved.

Last solution

If everything fails for you then you need a developer to code your site manually, there are a lot of wordpress developers avilable on Fiverr at low cost, just hire any trusted seller from here or from freelancer and they will do it, if you got any other issue, feel free to ask, I am here to solve your problem.

Read: Best Free CDN for WordPress Blog