When you check your website with Google PageSpeed tool , you can see javascript and css render-blocking problem like below:
In this article, I will show you how to fix this error
Read more : Tips to speed up WordPress
What is render-blocking javascript and css?
Themes and plugins in WordPress usually call Javascript and CSS files. Loading such files will affect the page load speed.
Worse, the browser will have to load those files before loading the entire HMTL code to display the web page content. This means that users visiting your website will have to wait for the website to load all the css and javascript files.
The javascript and css files that prevent the browser from serving the user viewing the page are called render-blocking javascript and css.
Now let’s see how to fix this error to improve the score in Google PageSpeed
Using Autoptimize plugin to fix render blocking scripts and css errors
As in this post , I mentioned the Autoptimize plugin which is the most popular plugin currently dealing with javascript and css file problems.
First, you install and activate the plugin.
Then you go to Settings -> Autoptimize to configure the plugin.
To fix the rendering blocking javascript and css issue, you need to click on the Show Advanced Settings button at the top. You will now see more advanced options. You choose the option as below:
I explain more options as follows:
HTML Options section : you check this option to optimize the HTML code to make your page lighter.
Javascript Options : select the option Optimize Javascript Code. Then select the option Also aggregate inlinde JS . Selecting this option will put the javascript in the HTML so the browser won’t have to load the entire JS before loading the HTML.
Remove all default script files like seal.js or query.js in the exclude scripts from Autoptimize section.
The CSS Options section :
Select the optimize CSS Code option.
Select the Also aggreagete inline CSS option to act as the Javascript section.
Select the inline all CSS option.
Now go back to Google PageSpeed to see if it works!
There is a reason you need to know:
These types of fixes can break the interface or the interface of your website does not work properly. If you are unlucky enough to fall into such a situation you can see which plugins are affected.
If the plugin is not important you can not use it or switch to another plugin.
You also should not be too obsessed with the score on Google PageSpeed. It’s just a guide to help you improve your website.
Real experience is important.
That is all. You have learned how to fix the rendering blocking javascript and css issue in WordPress.
Have you had experience fixing this problem? I would be happy if you share how to do it in the comments section below.
