How to fix Render-Blocking JavaScript and CSS on WordPress

Fixing Render blocking Script Warning

We all know the importance of low load time for good SERP. Google has also confirmed that core web vitals will be part of Google’s algorithm starting in 2021. So, you should always try to improve the pages-red score of your web pages. You can also use Google’s PageSpeed Insights tool to check the score of your pages and get suggestions for optimization.

Whenever you check for a web page, the most common suggestions it shows “Eliminate render-blocking resources”.

Render blocking resources WordPress

No matter if you are using a free or paid theme. Most designers do not care for speed optimization. They just care for the looks of the theme. So, there are mostly several javascript, CSS, and font files causing render-blocking. If you also see the same suggestion for your website, you should try to eliminate render-blocking JavaScript and CSS to improve load time and Pagespeed score.

I have already posted a detailed guide on how to speed up WordPress. That article covers everything that you need to do for reducing the load time of your WordPress pages. But In this article, I will only focus on render blocking thing. In this detailed guide, I will tell you how you ca eliminate render-blocking JavaScript and CSS from your WordPress website.

What are render-blocking resources?

When a browser loads a web page, it also loads all the resources including JS, CSS, and images needed by the web page. From all these CSS is included on the header part and s loaded before the web browser starts rendering the web page. If a CSS file takes time in loading, it will take time in page rendering. The browser downloads all CSS resources for web page rendering. It is called render-blocking. The same goes for JS files. If a web page loads Javascript files in the header, it also causes render-blocking. All the resources that prevent web page rendering all called render-blocking resources.

Fixing Render-Blocking JavaScript and CSS on WordPress

If you are not a web developer who can fix things from the code level, you can use the Autoptimize plugin to fix the render-blocking javascript and CSS error.

Install this plugin and then Go to the Settings -> Autoptimize. Here you will see two check boxes Optimize JavaScript Code and Optimize CSS Code in the JS, CSS & HTML tab. Enable these checkboxes

Fixg Render-Blocking JavaScript and CSS on WordPress

This is a really cool plugin that you can use to optimize JavaScript and CSS code. It can also combine multiple CSS files into single CSS file and multiple JS files into single JavaScript files.

In JavaScript Options, enable “Optimize JavaScript Code?” and “Aggregate JS-files?”. In the CSS options, enable “Optimize CSS Code?,” “Aggregate CSS-files?” and “Also aggregate inline CSS?” You can also test other options to see If they are offering a positive impact.

It will surely reduce the render time and in best case remove the Render-Blocking Resources warning. If you are also using Google Adsense or other ads script on your web page, it is really hard to completely remove the render blocking scripts because Ads also load their script and CSS. This is the reasons scoring perfect 100 with Ads isn’t possible. But you need to try to improve as much as possible.

Website speed is now a critical factor in the website’s ranking in Google. So, you should always try your best to reduce the load time. CSS, JS, and images affect the load time most. I have written several articles on WordPress optimization. If you need help, read those articles.

Advertisement


Deepanker Verma is the founder of Techlomedia. He is a tech blogger, developer and gadget freak.


Similar Articles

0 Comments

Leave a comment

Comment policy: We love comments and appreciate the time that readers spend to share ideas and give feedback. However, all comments are manually moderated and those deemed to be spam or solely promotional will be deleted.

2020 UseThisTip | Part of Techlomedia Internet Pvt Ltd Developed By Deepanker