Wondering How to Eliminate render-blocking resources? then keep reading, While running your site through Google PageSpeed Insights you must have come across a suggestion by PageSpeed to eliminate render blocking resources on your WordPress site.

Eliminate Render-Blocking Resources [The Easy Way] (2022)
Eliminate Render-Blocking Resources [The Easy Way] (2022)

Render blocking resources are static files such as fonts, HTML, CSS and JavaScript files, that are important to the process of rendering or loading a webpage.

When you land on a page, your browser reads the site’s code from top to bottom.

When the browser encounters a render blocking resource,

it stops downloading the rest of the resources until these important files are processed.

During this time, the entire rendering process is put on hold,

This slows down the loading of your website’s content.

Why is it important to eliminate render-blocking resources?

If you reduce the number of render blocking resources, you can shorten the critical rendering path, which is the sequence of steps the browser has to go through before loading your website.

This will reduce the page load time and improve the user experience and SEO of the site.

Types of render-blocking resources

Render blocking resources usually consist of CSS and JavaScript files. Not all CSS and JavaScript files are rendered blocking. There are certain critical CSS files near the top, without which your site will not load properly.

Fonts added from a Content Delivery Network (CDN) or local server are also render-blocking resources.

Images and media files are non-render blocking resources.

How to eliminate render-blocking resources?

There are many strategies that you can use to eliminate render-blocking elements. But these require some understanding of how CSS and JavaScript work.

If you are a non-techie person and feel sick when you look at codes, do not worry we have two amazing methods in which you can use plugins that help you eliminate render-blocking resources.

Eliminate render-blocking resources using Autoptimize and Async JavaScript Plugins

Autoptimize and Async JavaScript Plugins, together with help you optimize the delivery of both your CSS and JavaScript.

After you have installed both the plugins, follow these steps:

  1. Step 1: Go to Settings and Open Async JavaScript
  2. Step 2: Check the box next to Enable Async JavaScript
  3. Step 3: Choose either Apply Sync or Apply to Defer in the settings box at the middle of the screen
  4. Step 4: Go to Settings and Open Autoptimize
  5. Step 5: Check the box next to Optimize JavaScript Code
  6. Step 6: Check the box next to Optimize CSS Code

These plugins will eliminate the CSS and JavaScript render-blocking resources

Eliminate render-blocking resources using WP Rocket

You can follow these steps with WP Rocket Plugin to eliminate render blocking resources:

  1. Step 1: Install and Activate WP Rocket
  2. Step 2: Go to Settings and Open File Optimization
  3. Step 3:  Check the box next to Load JavaScript deferred
  4. Step 4: Check the box next to Optimize CSS Delivery

These steps will eliminate the CSS and JavaScript render-blocking resources.