A higher website loading speed– an essential factor in the SERP ranking. 

Google’s PageSpeed ​​Insights is an excellent tool to check the loading speed of a site. In addition to showing the current speed, it finds the problems that result in slow loading WordPress websites. The obvious problem you may encounter in testing a website is render-blocking resources.

So if you see the warning “Eliminate render-blocking resources” while testing then you need to do it immediately.  Definitely, you will be having many questions in mind; like:

• What are render-blocking resources?
• How can I eliminate it from my WordPress website?

To give you answers, we are here! The aim of this article lies in explaining these resources and how you can remove them. Let’s get started!

Why eliminate render-blocking resources?

Render-blocking resources are CSS and JavaScript files. Render-blocking resources are CSS and JavaScript files. If you lessen the amount of render-blocking resources, you can reduce the page load times and rendering path. Thereby, improving the user experience and optimizing the search engine.

If you cannot do so, the website loading speed slows down. You might be wondering if CSS and JavaScript affect the site speed or not. 

In simple words, when new themes or plugins are installed, the front end gets replenished with CSS and JavaScript.  Hence, the browsers can consume more time to load it and the web page as well. 

The head of the web page is that website part that users notice when gets loaded.  While scrolling, only the bottom part reflects. 

If you load any inappropriate JavaScript and CSS while checking the website, you will get a warning to eliminate CSS and JavaScript blocking code at the webpage head. It is required to stop scrolling while it is processing or downloading the file.   In the end, the website slows down.

When the message “Eliminate Render Blocking Resources” is shown by Google, it only means to stop loading the redundant resources on your website top. Because it slows down the downloading process for the visible part of the website content.

How to find out if the WordPress Website Has Render-Blocking Resources

Google PageSpeed Insights are used to know about render-blocking resources in the website.  Enter the URL that requires testing. And, if there will be any issues with these resources, then, PageSpeed Insights will show.  It will be in the “Eliminate render-blocking resources” section below Opportunities:

How To Remove Render-Blocking Resources?

This process would be carried out with the outstanding cache plugins that help in removing the render-blocking resources. 

Eliminating render-blocking resources JavaScript

Various strategies are there that remove render-blocking JavaScript. Check out below:

• Async 

It allows the HTML parser or the visitor’s browser to download] JavaScript; yet parse the rest of the HTML. It means it will not stop parsing when the file is downloading. Though, it can pause the HTML parser for executing the script when the download completes.

• Defer  

It allows the HTML parser to download Javascript and let the HTML parsing continue.  Defer waits to run the script till HTML parsing finishes.  

Check out the below illustration to find the difference:

The benefit of Defer is that the scripts get executed the way they are appearing on the code.  

This method is not used by Async, it sometimes results in some issues when async is applied to every JS resource.   The reason is that it usually categorizes the resources which are resource-dependent that displays earlier in the document. 

The general problem async shows is the broken jQuery resource that loads before jquery.js and is added to the document.

Eliminating Render-Blocking CSS

Removing render-blocking CSS is somehow complicated as you need to be cautious regarding delaying CSS which renders above-the-fold content.  The general arrangement is to:

• Find the style which needs rendering above-the-fold content and provide the HTML inline. 
• Leverage the media attribute on the link elements to pull in CSS files for finding the CSS resources (conditional)
• The left CSS resources must be loaded in a synchronized manner. Typically, this move is done by integrating them with asynchronous or deferred JavaScript.

How to Remove Render-Blocking JavaScript and CSS Resources Using WordPress Plugins

Below are the plugins that could be used for eliminating the render-blocking JS and CSS:

• WP Rocket (paid)
• Autoptimize + Async JavaScript (free)

Autoptimize + Async JavaScript Plugin to Remove Render-Blocking Resources

Async JavaScript and Autoptimize are two different free plugins. But,  altogether they optimize the CSS and JavaScript delivery.

After installing the plugins; move to Settings-> Async JavaScript and:

• Tick the box ” Enable Async JavaScript” from the top.
• Choose among Apply Defer and Apply Async in the Quick Settings box.

In case, Async option is causing any issue on the website, then, it is advised to pick Defer or disallow jQuery, which the plugin is giving you an option for. 

After setting up the Async JavaScript plugin, move to  Settings → Autoptimize and:

• Tick the box “Optimize JavaScript Code”.
• Tick the box “Optimize CSS Code”.

The advanced users can experience the advanced CSS and JS optimization settings. However, many WordPress sites run perfectly with default.

Once the configuration of Async JavaScript and Autoptimize is completed, the testing site passes PageSpeed Insights’ “Eliminate render-blocking resources” audit:

In case, you like to remove more files, then, Autooptimize could be used for manually inlining the CSS. It needs some technical expertise, therefore, it is not something non-experience would try. 

How to Remove Render-Blocking JavaScript and CSS Resources Using WP Rocket

It is a leading premium WordPress caching and performance plugin.  Usually,  WP Rocket has much more for WordPress performance than only caching. It helps in removing the render-blocking JS and CSS resources on the WP website. 

After installing and activating the WP rocket, move to the file optimization tab. Later, enable the below options:

• CSS delivery optimization in CSS file section 
• Load JS deferred in the JS file section.  You can monitor by turning off the Safe mode for jQuery.  Though, if you have undergone some issues on the site’s front end side, then, you need to re-enable the safe mode for jQuery. 

Once the two features are activated, the “eliminate render-blocking resources” audit is declared passed in the PageSpeed Insights.  Here, WO Rocket also removes the render-blocking resources as compared to Async/Autoptimize JavaScript setup:

That’s it! This is how you remove render-blocking resources on the WordPress website.

Concluding Remarks

Render-blocking resources decrease the page loading speed of the WordPress website. It forces the visitors’ browsers to prevent rendering above-the-fold content and the browser will immediately download unnecessary files.

So, to assist the visitors in faster loading of the visible part of the web page; you must delay the loading of resources that are not immediately required.

The ways of removing the render-blocking resources on WordPress are defined in this article. You can choose any of them. 

To eliminate render-blocking resources on WordPress, off-the-rack plugins can be used.

Is there any other method you know about the same? Is there any other query?  Share your opinions in the comment section below. Thanks for reading!