In this tutorial, we will learn how to easily fix render blocking JavaScript and CSS in WordPress to improve your Google PageSpeed score.
What is Render-Blocking JavaScript and CSS?
Every WordPress site has a theme and plugins that add JavaScript and CSSfiles to the front-end of your website. These scripts can increase your site’s page load time, and they can also block rendering of the page.
A user’s browser will have to load those scripts and CSS before loading rest of the HTML on the page. This means that users on a slower connection will have to wait a few milliseconds more to see the page.
These scripts and stylesheets are referred to as render-blocking JavaScript and CSS.
Website owners who are trying to achieve the Google PageSpeed score of 100 will need to fix this issue to attain that perfect score.
What is Google PageSpeed Score?
Google PageSpeed Insights is an online tool created by Google to help website owners optimize and test their websites. This tool tests your website against Google’s guidelines for speed and offers suggestions to improve your site’s page load time.
It shows you a score based on the number of rules that your site passes. Most websites get somewhere between 50-70. However, some website owners feel compelled to achieve 100 (the highest a page can score).
Do You Really Need the Perfect “100” Google PageSpeed Score?
The purpose of Google PageSpeed insights is to provide you guidelines to improve speed and performance of your website. You are not required to follow these rules strictly.
A better user experience requires a lot more than just speed. You also need to offer useful information, better user interface, and engaging content with text, images, and videos.
Your goal should be to create a fast website that offers great user experience.
We recently redesigned WPCademy, and we kept our focus on speed as well as improving user experience.
We recommend that you use Google Pagespeed rules as suggestions, and if you can implement them easily without ruining user experience, then that’s great. Otherwise, you should strive to do as much as you can and then don’t worry about the rest.
Having said that, let’s take a look at what you can do to fix render blocking JavaScript and CSS in WordPress.
We will cover two methods that will fix the render blocking JavaScript and CSS in WordPress. You can choose the one that works best for your website.
1. Fix Render Blocking Scripts and CSS with Autoptimize
This method is simpler and recommended for most users.
First thing you need to do is install and activate the Autoptimize plugin. For more details, see our step by step guide on how to install a WordPress plugin.
Upon activation, you need to visit the Settings » Autoptimize page to configure the plugin settings.
You can start by checking the box next to JavaScript Options and CSS Options and then click on the save changes button.
You can now test your website using PageSpeed tool. If there are still render blocking scripts, then you need to come back to the plugin’s settings page and click on ‘Show Advanced Settings’ button at the top.
Here you can allow plugin to include inline JS and remove scripts that are excluded by default like seal.js or jquery.js.
Next, scroll down to CSS option and allow plugin to aggregate inline CSS.
Click on the ‘Save changes and Empty Cache’ button to save your changes and empty plugin cache.
Once you are done, go ahead and check your website again with the PageSpeed tool.
Make sure that you thoroughly test your website to see that nothing is broken by optimizing your JavaScripts or CSS.
How does it work?
Autoptimize aggregates all enqueued JavaScript and CSS. After that, it creates minified CSS and JavaScripts files and serves cached copies to your website as async or deferred.
This allows you to fix the render blocking scripts and styles issue. However, please keep in mind that it can also affect the performance or appearance of your website.
2. Fix Render Blocking JavaScript using W3 Total Cache
This method requires a little more work and is recommended for users already using W3 Total Cache plugin on their website.
First you will need to install and activate the W3 Total Cache plugin. If you need help, then see our guide on how to install and setup W3 Total Cache for Beginners.
Next, you need to visit Performance » General Settings page and scroll down to Minify section.
First you need to check ‘Enable’ next to Minify option and then select ‘Manual’ for minify mode option.
Click on the save all settings button to store your settings.
Next, you need to add the scripts and CSS that you want to minify.
You can get the URLs of all the scripts and stylesheets that are render blocking from Google PageSpeed Insights tool.
Under the suggestions where it says: ‘Eliminate render-blocking JavaScript and CSS in above-the-fold content’, click on ‘Show how to fix’. It will show you the list of scripts and stylesheets.
Take your mouse over to a script and it will show you the full URL. You can select this URL and then use your keyboard’s CTRL+C (Command+C on Mac) keys to copy the URL.
Now head over to your WordPress admin area and go to Performance » Minify page.
First you need to add JavaScript files that you want to be minified. Scroll down to JS section and then under the ‘Operations in areas’ set the embed type to ‘Non-blocking async’ for the <head> section.
Next, you need to click on the ‘Add script’ button and then start adding script URLs that you copied from Google PageSpeed tool.
Once you are done, scroll down to CSS section and then click on the ‘Add a stylesheet’ button. Now start adding stylesheet URLs you copied from Google PageSpeed tool.
Now click on the ‘Save settings and purge cache’ button to store your settings.
Visit the Google PageSpeed tool and test your website again.
Make sure that you also test your website thoroughly to see that everything is working fine.
Troubleshooting
Depending on how the plugins and your WordPress themes uses JavaScript and CSS, it could be quite challenging to completely fix all render blocking JavaScript and CSS issues.
While the above tools can help, your plugins may need certain scripts at a different priority level to work properly. In that case, the above solutions can break your plugins or they could behave unexpectedly.
Google may still show you certain issues like optimizing CSS delivery for above the fold content. Autoptimize allows you to fix that by manually adding inline CSS required to display the above fold area of your theme.
However, it could be quite difficult to find out what CSS code you will need to display above the fold content.
That’s all, we hope this tutorial helped you learn how to fix render blocking JavaScript and CSS in WordPress.