HOW TO FIX RENDER BLOCKING JAVASCRIPT AND CSS IN WORDPRESS  

        HOW TO FIX RENDER BLOCKING JAVASCRIPT AND CSS IN WORDPRESS 

 

In this highly competitive, fast moving world it is imperative that your website should load fast, or else the potential visitors would shift to some other site. Also, a fast loading website gets better ranking in search results. Of the various reason that could be responsible for the slow loading of a website, render blocking Javascript and CSS is one of them. These are files that prevent a web page from being displayed before these files are loaded.These files get added to the front end of your WordPress website whenever you add a new theme or a plugin for WordPress template customization. To get a high score on Google’s Page Speed Insights, you have to get rid of these render blocking files, which are anyway irrelevant. 

 

Google Page Speed Insights 

It’s a tool developed by Google to test the speed of a website. Google has some guidelines with regard to the loading speed of websites. Though you are not required to strictly adhere to these guidelines, the more rules you comply with, the higher would be your score, and better ranking as your website loading speed would improve with higher score. The perfect score is 100 but, usually most websites have scores around 70. If your website contains these render blocking files, you will get a message to eliminate them when you test your website speed.

Discussed below are two most popular method of fixing this issue of render blocking.

 

WP Rocket

This is arguably the best WordPress cache plugin that is simple to use and can quickly fix the issue of render blocking files and thereby improve your website’s performance. You don’t need to hire a WordPress developer to use this plugin, just follow the steps and thetask will be accomplished.

WP Rocket is a versatile and efficient plugin. Once it is installed and activated, it turns on caching with optimal settings for your website. As JavaScript and CSS optimization can lead to some damage to your website’s appearance and settings, WP Rocket doesn’t do it automatically, but allows you the option to do the optimization yourself.

For this, you need to go to the Settings >> WP Rocket page and then to File Optimization Tab. You then have to move to CSS files section and go to Minify CSS, Combine CSS, and Optimize CSS Delivery. The WP Rocket will then try to minify and combine all CSS files. Only those files that are required for the visible portion of the website are loaded. As optimization can affect the appearance of the website, you will have to test it on different devices of different screen sizes before you make it up and running.Now, move on to JavaScript section and perform the same operations as you did with CSS files.

You can also direct WordPress not to load jQuery Migrate file, a script that gets loaded to make plugins and themes compatible. Most websites do not require this file, but you should thoroughly check the website to make sure it does not affect the website performance. Now moving on to box near ‘Load JavaScript Deferred’ you can delay the loading of unimportant scripts. The jQuery safe mode option is for themes that use it inline. If you are sure that your theme does not use it inline, there is no need to check this option. Once you are through with these steps, save the changes to store your settings. You can now test your site again to check the improvement in your score and whether your site’s performance has improved.

 

Auto Optimization

 

Another method to eliminate render blocking files of JavaScript and CSS is to use a special plugin made specifically for this purpose. Though this plugin solves the problem, it lacks many features of WP Rocket. 

Similar to what we did with WP Rocket, you have to first install and activate the plugin. Once activated, all you need to do is go to Settings>>Autoptimize page and check the boxes for Optimize JavaScript Code and Optimize CSS code. You need not check the aggregate JS and CSS file, which you will have to only if you need further optimization. Click on “Save Changes and Empty Cache” button to store your settings. This is all you need to do fix the render blocking issue. But how much improvement happens in your websites loading speed also depends on the plugins and themes you use. If you think there is need for further improvement, you can go to the Advanced Settings and follow the steps to get better result.  

Discussed above are two ways in which the issue of render blocking JavaScript and CSS, which occurs every time you use new plugins and themes for your WordPress template customization, can be fixed. 

Author Bio: 

Brandon Graves is a professional wordPress developer and IT consultant at HireWPGeeks, providing HTML to WordPress theme conversion services to global clients.

Leave a Comment

Your email address will not be published. Required fields are marked *