If you have ever used Google PageSpeed Insights, you might have seen a suggestion – “Eliminate Render Blocking Resources” as their speed impact is HUGE!! Just eliminating render-blocking resources, can save you four to five seconds.
That is a big value from the aspect of website speed where every ‘millisecond’ counts and as we all know, speed is a big factor for ranking at a good position in the SERPs (Search Engine Result Pages) and it is very important for SEO on WordPress too…
Now, you might be wondering, “What is this render blocking resource?” and “How do I fix it??”. And this is what we shall cover in our today’s guide on HOW TO FIX RENDER BLOCKING RESOURCES AND INCREASE YOUR PAGESPEED SCORE.
I have made a video on this too, which you can check out :
If you did not like the video or want text instructions, read forward :
What are render blocking resources
Before we go deep into fixing the issue, we must understand what actually render blocking resources are…….
When this CSS and JS blocks the rendering (loading) of your webpage, it is referred to as ‘Render Blocking CSS and JS’.
Now this definition might get technical for some users so let me tell it to you in a story way….
Imagine you are a browser bot. When a visitor lands on your site, you (the browser) has to read the whole code of your site before it can show your site to the visitors.
When the browser encounters a JS or CSS file it has to download and process it and this can take a whole second.
During this one second, your visitor sees a completely blank page and thus leaves your site. Your visitor left because of one thing – “Because the CSS and JS slowed the loading of your webpage”.
Now, I hope that it is clear as to what is render blocking CSS and JS.
Is it compulsory to get 100 in Page Speed Insights?
No, it is not compulsory and if you are looking to achieve 100 in Google PageSpeed Insights then you must stop thinking so. Speed is a big factor in SEO but speed is not everything.
Google just gives you suggestions, these are not school rules which you must follow forcibly. You must keep in mind that you must not ruin the user experience in your attempt to score a perfect 100 in Google’s tool.
Also, you must not fully sacrifice speed for the sake of the user experience. You must maintain a balance between the two. A good site has a robust user experience and a good speed. I have seen many people who just go mad after scoring 100 and completely ruin their site.
Therefore, optimize your site without damaging it. Instead of using Google PageSpeed Insights too much, use tools like GTMetrix or Pingdom. They shall tell you your HTTP request, loading time and you can even check website speed in different locations of the world.
Let us take the example of our site, Xplorers of Fun. We have a good score of 83 and 87 in Page Speed Insights and a good user experience too (this is what our readers say).
Having said so, let us now move forward. Today we shall be showing you three free options as to how you can eliminate render blocking resources in your WordPress site.
As we all know that diagnosis comes before cure, so first let us explore how to know if your site really has a large amount of render blocking resources or its just a small amount which can be overlooked….
How to find render blocking resources on your site
Head over to PageSpeed Insights and type in the URL of your site. Let the results load. After you see your score, scroll down a bit until you come to this section –
Now you shall get to know that you actually have render blocking resources on your site. Now, take a note of this thing. If render blocking CSS and JS are effecting your site speed by more than 1 or 2 seconds then you must fix it but if your site has less than 0.7 seconds impact due to render blocking resources, then leave it as it is.
I say so because that can cause damage to your site. I have experienced it too. My site had less than 0.3 seconds of render blocking resources. I tried to fix that but in that attempt my site broke.
Over the years, I have gained experience as to what is enough in speed and what needs improvement. So now lets move to the most important section, fixing it…….
There are three free ways to fix this problem and I shall break them down to you one by one.
In the settings tab, checkbox on Async JavaAcript? Below that, choose on ‘Apply Async’. If it does not work for you, then try the other options although it shall work for most.
In the third setting, choose Async or Defer according to what you chose above. In the last setting, you must test which option works for you. If one doesn’t work then choose the other.
Once Async is done setting up, head over to Settings>>Autoptimze.
Below that select, Also Aggregate Inline CSS. Leave everything else unchecked as that could break your site down.
Now, scroll down to the Misc Options in Autoptimze.
Check all the four options present here. This is it. Now most of the render blocking CSS and JS would have been eliminated. Wait for five minutes.
If you test your site without waiting, then Google PageSpeed Insights shall show you your old cached score and you might end up deleting very useful plugins.
Now, run a speed test on your website and you shall see the results…. We checked our site and see the results –
Using W3 Total Cache
This is an all-in-one plugin for caching and minification. Let us now know how to set this up.
- Go to Performance > General Settings
- Head over to the Minify heading on the settings page…
- Checkbox the Enable box in Minify Heading
- Select the minify mode to ‘manual’
- Last but not the least, Save all settings…..
Now, go back to PageSpeed Insights and take a note of all the render blocking scripts. Either write them down on paper or copy-paste them in notepad.
Now, head over to Performance >> Minify in the W3 Total Cache settings…..
In the operations in areas section, choose non-blocking defer before </head>
Moving on, In the next section (JS File Management), Choose your active theme and click on add script. Next, copy/paste all those JS scripts over here which you found in Google Pagespeed Insights…..
Now, scroll down to the CSS section. Choose your theme and click on add a style sheet. Then enter all render-blocking CSS from page speed insights and then paste it there. Lastly, Save your settings.
Using Speed Booster Pack
Speed Booster Pack is another amazing plugin to eliminate render blocking resources in WordPress. With the help of this plugin, we completely removed render blocking CSS and JS which was not possible in Autoptimize as it added its own CSS. So let us now set up this plugin:
Install and activate this plugin. Find its settings in your wp-admin sidebar. Then, go to Speed Booster >> Assets. You shall be greeted with a page like this –
Note- This plugin keeps on changing its interface and settings, but we shall try our best to keep on updating this post with the newest screenshots and fixes
Now its time to start the fix-
First of all enable assets and minify HTML. Also checkbox Optimize Google Fonts. Next scroll down a bit and you shall come to this section –
Here select the following settings –
- Inline all CSS
- Minify all in-lined CSS
Now, save these settings. First visit your site and check if its completely fine and not broken. Then, go to PageSpeed Insights and test your site.
We tested our site and the render blocking resources were fully eliminated.
Our list of 3 free plugins to fix this issue comes to an end. There is also a paid plugin – WP Rocket which is an all in one optimization plugin.
If you are looking to invest money in your blog, then you can choose to buy it as it can give you a heavy boost. That is why it is the #1 caching plugin for WordPress.
Lastly, I have two questions for you –
- Which plugin will you try first, Autoptimize, W3 Total Cache or Speed Booster Pack?
- Did you eliminate render blocking resources on your site after using any of the above methods?
If you liked this tutorial, subscribe to our YouTube channel and like our Facebook Page. Also, don’t forget to share this post, because – “Sharing is Caring”….