How to Eliminate render-blocking Resources (JavaScript & CSS) in WordPress

Eliminate Render Blocking Resources - CSS and JavaScript

Website loading speed is the most important factor to attract and collect visitors. If the website’s performance is no problem, it will attract more users.

Core Web Vitals are becomes ranking factors for search results form May 2021. So search engines consider Site Speed and User Experience to rank a Website in search results. So, if you want to compete in terms of SEO, then prioritize the speed of your site.

Measuring website speed may not necessarily run smoothly. Many reasons might affect how you check the speed of your website, from internet connection speed to geographic location.

This is where you can take advantage of Google’s PageSpeed ​​Insights. This service is provided free of charge to determine a website’s score based on its loading speed.

When using PageSpeed ​​Insights, of course you want to get the highest score possible. However, it turned out to be not as easy as one thought.

Many things need to be improved, one of which is Eliminate render-blocking JavaScript and CSS.

Here are some explanations of what Eliminate render-blocking JavaScript and CSS are and how to work around them.

What does Eliminate render-blocking JavaScript and CSS mean?

Render-blocking means loading. So, if Javascript is blocking, it means that Javascript is holding the page from loading. Google itself recommends removing Javascript which can interfere with loading your web page content.

To understand these instructions further, we must look at Google’s criteria for scoring sites on PageSpeed ​​Insights. There are ten rules regarding website loading speed that have been set by Google, and if you fail to apply any of these rules, it will result in a reduction in points or scores.

Render-blocking is one of these ten rules. In particular, JS and CSS scripts make web browsers delay loading HTML pages. Of course, you don’t want this.

No one wants to see unorganized content. However, render-blocking JS and CSS refer to those scripts, which carry loading latency but are not used in above-the-fold (ATF) content.

ATF content refers to the part of the web page that is visible when the page loads. So, through this guide, Google would like to inform you that there are JS and CSS scripts on this web page that perform unnecessary slowdown of the web page.

Then how to fix Error Eliminate render-blocking JavaScript and CSS in above-the-fold content? You can use Google PageSpeed ​​Insights to identify render-blocking scripts.

Then, you can use 3 different methods to fix this Eliminate render-blocking JavaScript and CSS Error on your WordPress site.

Steps to Eliminating render-blocking JavaScript and CSS

JS and CSS are the most important things for any website to function in all parts. However, poor performance will always exist. There are several ways you can make your site faster, such as defer ( defer ) JavaScript parsing.

However, sometimes that just isn’t enough. To solve this problem, all you need to do is look for various possibilities for improvement.

There are 3 steps you can take, including:

Using Google PageSpeed ​​Insights 

The first step to overcoming render-blocking is measuring the speed of your website using Google PageSpeed ​​Insights. Visit the Google PageSpeed Insights page, and in the input field, paste ( paste ) the name of the domain the site URL you.

Click  Analyze to get a report about your site. Most sites score or score between 50-70; this should be the benchmark for the score on your website. Then Google will make a list of suggestions to improve the performance of your site.

If after measuring your website speed with the PageSpeed ​​Insights tool you still get the instructions  Eliminate render-blocking JavaScript and CSS in above-the-fold content, then you should keep reading this WordPress tutorial.

Using W3 Total Cache

Eliminate Render Blocking Resources - CSS and JavaScript using W3 Total Cache Plugin

After knowing the render-blocking code on the website. You can download a plugin that makes things easy when dealing with this kind of error. One of those plugins is W3 Total Cache. follow the steps below.

  • Go to  Performance – General Settings. Look for the Minify heading on the page.
  • Under the heading, there will be several options. The first option is  Minify; check the Enable box next to that option.
  • In Minify mode, select  Manual, and click the Save all settings button.
  • At this point, you should remove all JS and CSS scripts that are causing render-blocking. You can find these two scripts through Google PageSpeed ​​Insights. If you don’t close the PageSpeed ​​tab as suggested in Step 1, then you’ll find the clickable Show how to fix text under the render-blocking instructions. Click the text. After that, all lists containing the render-blocking scripts and stylesheets can be identified.
  • Back to WordPress. Go to  Performance -> Minify. You have to minify both JS and CSS files separately.
  • First, let’s look at JS. On that page, look for the JS heading. Then you will see the Operations in areas section. Select  Non-blocking using defer as the embed type for the before  <head> tag.
  • Under the JS file management sub-heading, select the active theme and click the Add Script button. Then copy ( copy ) the JS URL from the PageSpeed ​​tab, and paste ( paste ) the scripts one by one. This step repairs the JS file.
  • Now it’s time to tackle the CSS. On this page, scroll down to find the CSS section. Under the CSS file management sub-heading, select the active theme and click  Add a style sheet. As with any JS script, copy/paste ( copy/paste ) the stylesheet from PageSpeed ​​Insights into this section.
  • Finally, click on the Save settings and then the Purge Cache button.

Return to the Google PageSpeed ​​Insights page to check if the render-blocking has been resolved.

Using Autoptimize

Eliminate Render Blocking Resources using Autoptimize Plugin

Another easier step to solve the render-blocking issue is to use another plugin called Autoptimize. Download and install the plugin.

After the Autoptimize plugin installation process is complete, go to the  Settings -> Autoptimize menu in WordPress. Check the box for  Optimize Javascript Code? and  Optimize CSS Code? and click the Save Changes and Empty Cache button.

Generally, this method is sufficient to solve the rendering-blocking problem (depending on the active theme and plugin). To find out if this method works, then open your site via PageSpeed ​​Insights one more time.

If you want to optimize further, then go back to  Settings -> Autoptimize. Click the Show Advanced Settings button. Check  Also aggregate inline JS  and  Also aggregate inline CSS.

Then, finish by clicking on  Save changes and Empty Cache. To see if this step worked, open PageSpeed ​​Insights again.

Conclusion

Render-blocking negatively affects the speed and performance of a WordPress website. And as you know core web Vitals becomes a ranking factor, so a good website speed is matters.

In this WordPress tutorial, you’ve learned how to work around Eliminate render-blocking JavaScript and CSS in above-the-fold content on a website. If you think you can’t do it then don’t worry, Our professional developers are here for your help.

We have a development team that fixes CWV (Core Web Vitals) errors significantly for our clients for highest Website Speed and Performance. So drop us a message or see our Affordable Pricing if you’re struggling with Core Web Vitals stuff, and we’ll fix all Core Web Vitals errors for you.

If you enjoyed this article, Don’t forget to share it.

2 thoughts on “How to Eliminate render-blocking Resources (JavaScript & CSS) in WordPress”

  1. Really very useful information given by you. this article is really amazing and very useful. I learned a lot of things from this post. the article is nicely explained and easy to understand. thanks for sharing this valuable information with us. keep your the good work.

Leave a Comment

Your email address will not be published. Required fields are marked *