How to Eliminate Render Blocking resources in WordPress

 

How to eliminate render blocking javascript on a WordPress website which is being shown on Page Speed Insights, GT Metrix, or pindom. There are several ways  to resolve this issue including  non-tech version by using a WordPress plugin and a developer version by adding a function in functions file of the theme which is for develoepers who want to handle it by themesleves.

The Page Speed insights states the error something like this: 

Eliminate render-blocking resources:
        Resources are blocking the first paint of your page. Consider delivering criticial JS/CSS inline and deferring all non-critical JS/Styles.

The methods will either solve all the issues or drastically reduced them to a single error or two. So the first method to resolve this issue is by using a plugin called WP Rocket. This plugin will not only resolve the render blocking issues but also some other optimizing issues related to WordPress as well. You can visit the wp rocket website over here. If this is something for you you can visit the website and follow the process which will give you a file which can be installed on the WordPress website. 

Once you've Received this file you can:

• goto Plugins > Add New and click on upload plugin.
• Click choose file and select the file you received from WP-Rocket website.
• Click Install

Once we've that installed and we can click Activate Plugin which will give us a new screen where we can click on settings which will redirect us to the dashboard. 

Once you're on the dashboard Click on the File optimization and scroll down to the bottom of the screen to the section where it says " JavaScript Files " and we will click on " Load Javascript deferred " and make sure your second check box " Safe Mode for jQuery (recommended) " is checked then  click save changes. Once it's complete it's done, you can log out of your website and refresh the website then rerun the speed test on either page speed or on your lightroom. 

Developer Mode:

If you're on developer mode make sure to test out the website after every change and make sure it's not broken and website is working properly as you're moving the javascript files. 

If you go to your theme functions.php file where you're calling the wp_enqueue_script and wp_enqueue_style you can clearly see it on the wp_enqueue_script  function's last parameter which is set to false it means it'll be placed in the header of the website which is causing the issue of render blocking. If you set this last parameter to true  then it'll place the scripts in the footer which will remove the render blocking issue of the website. 

All we have to do in this case is just change false to true. and this will change  the render blocking issue 

Now the problem comes on the scripts on which you don't have any control over like a third party js file coming from a plugin and you want to handle that request on your website.  It's not that you can't move the scripts around the website. In order to achieive this task you can create a function to handle this request. Once that function is called we can add the script-loader-tag filter to move around the requests. 

The script-loader-tag will return a "<script src="#"></script>" url. We don't want to break our website so we can add the checks if the file is not from core wp admin and if it's jquery then just return the url as it is if it's other than that we can add the attributes in the script tags. Here's the function to call on the website. 

function defer_parsing_of_js($url){

if(is_admin()) return $url;

if(flase === strpos($url,'.js')) return $url;

if(strpos($url,'jquery.js')) return $url;

return str_replace(' src',' defer src',$url);

}

add_filter('script_loader_tag','defer_parsing_of_js',10);

This will add defer to every javascript file other than jquery and admin script. We've now completely removed the render blocking for javascript. 

Thanks to WPCasts for this solution, here's the video from their channel: