The DevTeam Alpha News Aggregation service has sourced the following article originally published on Kinsta:
If you’ve ever run your WordPress site through Google PageSpeed Insights, Google has probably told you that you need to eliminate render-blocking resources on your WordPress site. In fact, that might be why you’re reading this very post right now.
That probably poses two questions in your mind:
- What are render-blocking resources in the first place?
- How can you eliminate render-blocking resources on WordPress?
In this post, we’re going to answer both questions for you. Here’s everything that we’ll cover in this post:
What Does “Eliminate Render-Blocking Resources” Mean?
In order to understand what render-blocking resources are and why they hurt your site’s load times, we need to start with a basic look at how a web browser renders a web page.
When a visitor lands on your site, their web browser basically starts at the top of your site’s code and reads down. Top-to-bottom, got it?
Let’s look at an extreme example to show why this can be an issue.
So a very rough layout for your site’s code might be something like:
- Header meta
- HTML for your above-the-fold content. This is all the content that a visitor sees right away (before they start interacting with the page)
And here’s why this is a problem:
When a visitor lands on your site, their browser starts reading from top-to-bottom. So before it can parse and render the HTML for the above-the-fold content on your site, it needs to wait to download and parse the coolfooter.js file.
End result? It takes longer to display the HTML for the above-the-fold content, which means that your visitors will perceive your site as being slower.
When Google tells you to eliminate render-blocking resources, it’s essentially saying, “hey, don’t load unnecessary resources at the top of your site’s code because it’s going to make it take longer for visitors’ browsers to download the visible part of your content”.
What are Render-Blocking Resources?
When referring to render-blocking resources, we’re usually talking about:
For example, it’s important to load your critical CSS near the top, otherwise your visitors might experience what’s known as a flash of unstyled content (FOUC).
Are Images Render-Blocking Resources?
No, images are not render-blocking. It’s still important to optimize your images to reduce their file sizes, but you do not need to worry about optimizing the delivery path for your images.
How to Test If Your Website Has Render-Blocking Resources
To assess whether or not your WordPress site currently has render-blocking resources, you can use Google PageSpeed Insights.
All you do is enter the URL that you want to test. Then, if you have a problem with render-blocking resources, PageSpeed Insights will list each individual resource in the Eliminate render-blocking resources section under Opportunities:
How Do You Eliminate Render-Blocking Resources?
Don’t worry, you don’t have to do this manually. We’ll talk about WordPress plugins that can help you eliminate render-blocking resources in the next section.
However, it is helpful to understand what these plugins are doing behind the scenes to eliminate render-blocking resources.
This illustration from Growing with the Web does a great job of showing the difference:
The benefit of using defer is that your scripts are guaranteed to execute in the order that they appear in the code.
How to Eliminate Render-Blocking CSS
Eliminating render-blocking CSS can be a little trickier because you have to be careful not to delay CSS that is needed to render above-the-fold content. The ideal arrangement is to:
- Identify the styles that are required to render above-the-fold content and deliver those styles inline with the HTML.
- Use the media attribute on the link elements that pull in CSS files to identify CSS resources that are conditional, that is, only needed for specific devices or situations.
- WP Rocket (paid)
If you’re testing the effectiveness of your changes with Google PageSpeed Insights, be aware that Google caches its results for several minutes. Essentially, this means that if you quickly…
- Test your unoptimized site
- Activate one of the plugins in this section
- Retest your site
…then you’ll still see the results for your unoptimized site until Google resets its cache. So make sure you wait a few minutes for Google to clear its cache before you think that the plugin isn’t working.
- Choose between Apply Async and Apply Defer in the Quick Settings box.
If the Async option causes problems on your site, we’d recommend trying Defer or excluding jQuery, which the plugin gives you an option for.
- Check the box to Optimize CSS Code
If you wanted to eliminate even more of those files, you could further use Autoptimize to manually inline your critical CSS. This requires some development knowledge, though, so it’s not something non-developers should try.
You can also use the plugins separately if preferred. But given that both plugins come from the same developer and are built to play nice with each other, the best approach for most sites is to combine them.
How to Eliminate Render-Blocking Resources with WP Rocket
WP Rocket is a popular premium WordPress performance and caching plugin.
Once you install and activate WP Rocket, go to the File Optimization tab. Then, enable these two options:
- Optimize CSS delivery under the CSS Files section
And that’s how to eliminate render-blocking resources on your WordPress website!
Want to get rid of render-blocking resources in #WordPress? It’s super easy with the right plugins… Check out how to tweak their settings and make your site faster! ⚙️🏃♀️
Render-blocking resources slow down the perceived page load times of your WordPress site by forcing visitors’ browsers to delay rendering above-the-fold content while the browser downloads files that aren’t needed right away.
To help visitors load the visible portion of your page more quickly, you should delay loading resources that aren’t immediately required.
To eliminate render-blocking resources on WordPress, you can use off-the-rack plugins.
If you’re willing to pay, you can use WP Rocket, which offers a special integration with Kinsta and can help with lots of other WordPress performance tweaks.
Do you have any additional questions about how to eliminate render-blocking resources on WordPress? Let us know in the comments!
Learn more about Kinsta by visiting their website.