When a user browse your website, Then the user’s browser loads those JS and CSS files before making the rest of content (HTML, Images, Videos etc.) visible on your website. Since those JS and CSS’s in your website blocking other content rendering until load itself, It’s refereed as render blocking, that increase your website load time and bad user experience as well.
Google recommends webmasters and website owners to eliminate those render blocking JS and CSS’s in above the fold2Above the fold is the portion of webpage that appear first in a web browser without scrolling down and the rest of content that require scrolling referred as below the fold content to make their website load fast and improve user experience in addition to comply with Google page speed guidelines.
If you want to improve your website score on google page speed insight tool, You must have to eliminate those JS and CSS files that blocks above the fold content from being load prior loading those files. Though render blocking JS and CSS’s only take a fraction of second, But you know every millisecond counts on the web, In-addition fast loading website = Better SEO.
Below is the instructions for elimination render-blocking JS and CSS in WordPress. We have shown many ways of doing that and other recommended plugins that can help you to improve other speed optimization factor for your WordPress.
There’s over dozens of WordPress plugin available that claims to fix render blocking JS, CSS and other speed optimization factors to gain more score on website speed testing tools like Google Page Speed Insight, Pingdom, GTmetrix, YSlow etc.
We make test of some popular WordPress plugin for this manner to find out the best one, that can fix many speed optimization factor including render blocking scripts and CSS. We also run our test website through those website speed testing tool after installing and configuring those plugins.
Anyway, In my next blog post I’ll share my full report and comparison of those plugin, But here we will show you some plugins and it’s configuration that can fix render blocking JS and CSS.
1. Fix Render Blocking JS and CSS Using W3 Total Cache
There is no doubt that W3 Total cache is the most powerful WordPress optimization plugin with more than 1 million installation and average rating is 4.3 out of 5. There a chance that you already have W3 Total Cache installed on your WordPress.
If you are not using or installed W3 Total cache on your WordPress, Install it from WordPress plugin library.
Note: W3 Total cache is an advanced WordPress plugin with many options and features. It requires a little more configuration (Compared with others) to fix render blocking JS and CSS.
Upon installation and activation, W3 Total cache adds a new menu called performance to WordPress menu with sub-menu of 16 different pages of configurations. Anyway, in order to fix render blocking script and css we need to only configure minification settings.
The minify is disabled by default. You need to enable minify first from Performance >> General Settings page.
As minify is a advanced settings of W3 total cache, You will be asked for confirmation upon clicking on the enable checkbox. Click on I Understand the Risks button to disappear the message and enable minify.
Also make sure to select manual as minify mode like below the screenshot and save all setting:
Next, You need to add those render blocking JS and CSS files in W3 total cache minify. You can find those render blocking CSS and JS file in Google page speed insight report. Hold your mouse over those links and then copy using mouse.
Once you are done with JS and CSS, click on the save all settings and Purge Cache to apply your configuration in W3 Total Cache.
2. Eliminate Render Blocking JS and CSS Using Autoptimize
Once you are done with above, click on the “Save Changes and Empty Cache” button.
After that Autoptimize will concatenates all scripts and styles, minifies and compresses them, adds expires headers, caches them and more.
Now test your website using Google Page Speed insight and if you are still receiving render blocking JS and CSS warning, then you need to make some changes in Autoptimize’s advanced settings page. The advanced settings can be expanded by clicking on the “Show advanced settings” button at the top right side.
And for CSS warning, Scroll down to CSS Option and enable “Inline all CSS?”:
Once you are done, click on the “Save Changes and Empty Cache” button and then test your website again on Google Page Speed Insight.
Important: I’ve also tested above three WordPress plugin at a time with some advanced label of configuration and they work great as well.
Hope this tutorial help you fix render blocking JS and CSS in your WordPress too. If you encountered any issue, Please let us know using the comments below. I’ll be more than happy to assist you. Also If you found this tutorial useful, please do share on your social profile and join our newsletter for more tips and tutorials like this.
References [ + ]
|1.||↑||Google Page Speed Insight is a web based tool to measure website loading time and possible optimizations need to be done in order to comply with Google page speed guidelines. This tool is created by Google for webmasters to identify and analysis their website performance score|
|2.||↑||Above the fold is the portion of webpage that appear first in a web browser without scrolling down and the rest of content that require scrolling referred as below the fold|
|3.||↑||Async is a HTML script attribute that tells the web browser to download the resource without slowing down or blocking other HTML element. So the other element can be rendered without finishing downloading the resource|