How to Fix Render-Blocking JavaScript and CSS in WordPress

How to Fix Render-Blocking JavaScript and CSS in WordPress

Andy Holland

Those trying to achieve optimum load speed for their site should consider the scripts and stylesheets which go along with most WordPress themes and plugins. Whichever theme you’re running from, this will certainly be adding JavaScript and CSS files to the front-end, meaning these will have to load before the HTML does. That may only take a fraction of a second but for today’s internet user, faster is always better!

Striving for that Google PageSpeed score of 100 requires a more creative approach which includes the optimisation of those render blocking scripts and CSS. This can have a surprising impact on overall site speed, improving user experience which should keep visitors returning to your site. Here’s two quick and easy solutions to fix render-blocking JavaScript and CSS in WordPress. Choosing the most appropriate method depends on your website.

Utilising Autoptimize

As the easier of the two approaches, using the Autoptimize plugin is recommended for all those with little knowledge of web development. Once you’ve installed and activated this plugin, visit the ‘Settings’ followed by ‘Autoptimize’ page.

Start by checking the box for both JavaScript Options and CSS Options before hitting ‘Save’. Autoptimize collates all the Javascript and CSS before creating miniature files of these and serving cached copies to your website. Everything is automated which is great news as there’s very little setup involved.

Once you’ve hit ‘Save’ you can test your website using the PageSpeed tool to ensure there are no render blocking scripts. If this is still the case, go back into the ‘Advanced Settings’ and enable the plugin to include inline JS and remove any scripts which are excluded by default such as seal.js or jquery.js.

From here, go to the CSS option and allow the plugin to aggregate inline CSS. Finally, click on ‘Save changes and Empty Cache’ before checking once again with the PageSpeed tool.

Utilising W3 Total Cache

This approach is slightly more time consuming but more feasible for users of the W3 Total Cache plugin. Start by going to ‘Performance’ followed by ‘General Settings’ and finding the ‘Minify’ section.

Next to the Minify option, click ‘Enable’. For the ‘Minify Mode’, be sure to select the ‘Manual’ option and then hit ‘Save’. The next part requires you to add the scripts and CSS that you need to minify.

Firstly, find the JS section and under the ‘Operations in areas’ section, choose the embed type as ‘Non-blocking async’ for the </head> section. From here, click the ‘Add Script’ button which allows you to add the URLs of pages that are render blocking on your WordPress site. These can be found on the Google PageSpeed Insight tool. By clicking on the suggestion “Show how to fix” under the caption “Eliminate render-blocking JavaScript and CSS in above-the-fold content”, you’ll be shown a list of scripts and stylesheets.  Copy each URL and paste individually into the ‘Add Script’ box, repeating until you’ve included them all.

The same will have to be done for the style sheet URLs which can be done by scrolling to the CSS section before hitting ‘Add a stylesheet’. Again, these can be copied and pasted from the Google PageSpeed tool.

Finish by clicking on ‘Save settings and purge cache’ which will store any settings. Test your website thoroughly and check site speed which should now show a marked improvement on Google PageSpeed.