If you've ever run your WordPress site through Google PageSpeed Insights, Google may have told you that you need to remove the rendering blocking resources on your WordPress site. In fact, that may be why you are reading this article right now.

That may pose two questions in your mind:

What is the blocking resource in the first place?
How can you remove rendering blocking resources on WordPress?

In this post, we will answer both questions for you. Here is everything that we will cover in this article:

What does not remove blocking dump resources mean?

To understand what blocking resources are and why they hurt your site's loading time, we need to start with a basic view of how web browsers display web pages.

When visitors land on your website, their web browser basically starts at the top of your website code and reads down. From top to bottom, understand?

If in the process, it encounters a CSS or JavaScript file, then it needs to stop reading the reading while it waits to download and process the file. The time it spends the paused time to download and analyze the resources that can be used for something more efficient, like loading a portion of the content your site can see immediately. when someone visits the page.

Consider an extreme example to show why this could be a problem.

Let's say you have this awesome JavaScript effect in your footer. It is provided by the coolfooter.js team, which is the script referenced at the top of your website code (although the effect is in the footer, so visitors won't see it until they scroll to the footer. Page ).

So the very rough layout for your website code might look like:

Meta title
Coolfooter.js
HTML for the content on your first screen. This is all content that visitors see immediately (before they start interacting with the page)

And here is why this is a problem:

When visitors land on your site, their browser starts reading from top to bottom. So before it can parse and render the HTML for the content above the fold on your website, it needs to wait to download and parse the coolfooter.js file.

Final result? It will take more time to render the HTML for content above the fold, which means that your visitors will feel your site is slower.

When Google asks you to remove rendering blocking resources, basically, that is, hey hey, don't load unnecessary resources at the top of your website code as it will cause visitors' browsers to lose. more time to download your display of Content ”.

With the tips in this post, you should be able to wait to load certain CSS and JavaScript resources until the visible part of your page has been loaded.

What are the rendering blocking resources?

When referring to the resource that blocks rendering, we often talk about:

It is important to understand that not all CSS and JavaScript files block rendering.

Is the image rendering resource blocking?

No, the image is not blocked from rendering. The most important is Optimize your images to reduce their file size, but you don't need to worry about optimizing the distribution path for your images.

How to check if your site has rendering blocking resources

To evaluate whether your WordPress site currently has rendering blocking resources, you can use Google PageSpeed Insights.

All you do is enter the URL you want to check. Then, if you are having problems with the resource blocking the rendering, PageSpeed Insights will list each individual resource in the Removing resource blocking blocks under Opportunities:

Notice The resource blocking dump eliminates in details about page speed

How do you remove the resource blocking render?

Don't worry, you don't have to do this manually. We will talk about WordPress plugins that can help you eliminate the resource blocking blocks in the next section.

However, it is helpful to understand what these plugins are doing behind the scenes to eliminate rendering blocking resources.

How to remove JavaScript blocking render

There are a few different strategies for removing JavaScript that blocks rendering, but here are the main methods:

Async - allows the HTML parser (for example, a visitor's browser) to download JavaScript while parsing the rest of the HTML. That is, it does not completely stop parsing while downloading the file. However, it will pause the HTML parser to execute the script after downloading.
Delay - allow the HTML parser to download JavaScript while parsing the rest of the HTML and wait for the script to execute until the HTML parser is finished.

JavaScript async vs defer

The benefit of using defer is that your scripts are guaranteed to execute in the order they appear in the code.

Async doesn't use this method, which can sometimes cause problems if you apply async to all JavaScript resources because it can often break resources that depend on resources that appear earlier in the document. . The most common problem that async creates is that the broken jQuery resource tries to load before jquery.js is added to the document.

How to remove blocking CSS rendering

Removing the CSS blocking the rendering may be a bit more difficult because you have to be careful not to delay the CSS necessary to display the content above the fold. The ideal arrangement is:

Determine the types required to display content above and above the fold distribute those styles in HTML .
Using multimedia properties on link elements pulls in a CSS file to identify conditional CSS resources, that is only needed for specific devices or situations.
The remaining CSS resources must be loaded asynchronously, a move usually done by adding them with deferred or asynchronous JavaScript. Honestly, we really are getting ahead of us, right? This is definitely frontend engineer territory. It's great if you're an end-to-end engineer, but most of us don't. The good news is that this is an article about WordPress and you can eliminate or at least significantly reduce the amount of JS and CSS resources that block rendering that affects your site with the appropriate plugin (s).

How to remove rendered CSS and JavaScript resources with WordPress plugins

To explain how to eliminate rendering blocking resources on WordPress, we have set up a simple test site including CSS and JavaScript to block rendering and then we will show you how to use two plugin solutions Different ways to remove blocking render CSS and JavaScript:

Automatically maximize + Async JavaScript (free)
WP rocket (paid)

For reference, here's what our test site looks like before optimizing the delivery of CSS and JavaScript:

Notice The resource blocking dump eliminates in details about page speed

If you are testing the effectiveness of your changes with Google PageSpeed Insights, keep in mind that Google stores its results for a few minutes. Basically, this means if you're fast

Check your non-optimized website
Activate one of the plugins in this section
Check your website again

After that, you will still see results for your non-optimized site until Google resets its cache. So make sure you wait a few minutes for Google to clear the cache before you think the plugin is not working.

How to remove resource blocking render with Auto-Maximize + Async Plugin

Autoptimize and Async JavaScript are two separate free plugins from the same developer. Together, they help you optimize the delivery of both your CSS and JavaScript.

Once you've installed both plugins, go to Settings → Async JavaScript and:

Check the box to turn on Async JavaScript at the top.
Choose between Apply Async and Apply Delay in the Quick Settings box.

How to configure Async JavaScript plugin

If the Async option is causing problems on your site, we recommend that you try Defer or exclude jQuery, which the plugin gives you an option.

Once you've set up the Async JavaScript plugin, go to Settings → Auto Minimize and:

Check the box to Optimize JavaScript code
Check the box to Optimize CSS Code

How to configure the Maximize plugin

If you're an advanced user, you can play around with additional JavaScript and CSS optimization settings, but most websites will be fine with the defaults.

After configuring both Automatic Maximize and Async JavaScript, our test site adopted PageSpeed Insights' blocking blocking resources.

Detailed results of PageSpeed w / Automatic maximization and Async JavaScript

If you want to get rid of more of those files, you can continue to use Auto Minimize to adjust your important CSS yourself. However, this requires some development knowledge, so this is not something that non-developers should try.

You can also use your own plugins if you like. But since both plugins are from the same developer and are built to play nicely together, the best approach for most websites is to combine them.

How to remove rendering blocking resources with WP Rocket

WP Rocket is a popular premium performance and caching plugin from WordPress.

That's great because WP Rocket does more for WordPress performance than just caching, including helping you eliminate CSS and JavaScript resources that block rendering on your WordPress site.

After you install and activate WP Rocket, go to the File Optimization tab. Then enable the following two options:

Assign CSS Optimize under the CSS file section
Download of JavaScript deferred in the JavaScript file section. You can test off Safety Mode for jQuery. But if you notice issues on the front of your site, you'll want to re-enable jQuery safe mode because that's a possible culprit.

How to configure WP Rocket

After enabling these two features, our test site also adopted the removal of resources blocking YouTube's audit data rendering in PageSpeed Insights. WP Rocket also manages to eliminate more rendering blocking resources than the Automatically Optimized / Async JavaScript setting:

Detailed results result of PageSpeed w / WP Rocket

And that's how to get rid of rendering blocking resources on your WordPress site!

Summary

The render blocking resource slows down the page load time of your WordPress site by forcing visitors' browsers to delay displaying content above the fold while the browser downloads unnecessary files. right away.

To help visitors load the visible part of your page faster, you should delay loading unnecessary resources immediately.

To eliminate rendering blocking resources on WordPress, you can use out-of-stream plugins.

For a free solution, you can use a combination of Automatic Maximize and Async JavaScript, two plugins from the same developer.

Do you have more questions about how to remove rendering blocking resources on WordPress? Let us know in the comments!