We all know the importance of fast 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 PageSpeed score of your web pages. You can 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 suggestion shows “Eliminate render-blocking resources”.

Here’s a screenshot of PageSpeec score suggestions showing the error “Eliminate render-blocking resources.”

Render-blocking JavaScript and CSS scripts affect load time as they slow down web pages. If your website loads slowly, you end up losing several visitors. 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 the render-blocking thing. In this detailed guide, I will tell you how you can 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

To fix Render-Blocking JavaScript and CSS, you need to follow several things. Here’s a checklist of tasks you can do.

• ‘Minify’ your JavaScript and CSS.
• Concatenate your JavaScript and CSS
• Defer the loading of JavaScript.

Magnification of JS and CSS removes all extra whitespaces and unnecessary comments. This helps in reducing the size of JS and CSS files. Lesser the size, the faster the load time. If there are several JS and CSS files on your website, you need to combine all JS files into one and all CSS files into one. In the end, you can force JavaScript files to wait to load until everything else on the web page is ready. For this, use asynchronous loading of scripts.

If you are not a web developer who cannot fix things from the code level, you can use the Autoptimize plugin to fix the render-blocking javascript and CSS errors. First of all, install and activate the Autoptimize plugin. Then Go to 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

This is a really cool plugin that you can use to optimize JavaScript and CSS code. It can also combine multiple CSS files into a 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.

Now after the plugin combines all JS files into one and all CSS files into one, your website may still have a Render Blocking Resource issue if CSS and JS files are larger in size. In this case, you need to remove unused CSS codes from the CSS file. I have written a detailed article on how to remove unused CSS from the blog.

It will surely reduce the render time and in the 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 reason scoring a 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 on 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.