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 render-blocking resources are and why they’re a problem
- How to fix render-blocking resources in general
- How to use free or paid plugins to fix the problem on WordPress
Prefer to watch the video version?
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?
If in that process, it encounters a CSS or JavaScript file, it needs to stop “reading” while it waits to download and process that file. The time that it spends “paused” to download and parse those resources could be spent on something much more productive, like loading the part of your website’s content that’s immediately visible when someone lands on the page.
Let’s look at an extreme example to show why this can be an issue.
Let’s say that you have this cool JavaScript effect in your site’s footer. It’s powered by “coolfooter.js”, which is a script that’s referenced at the top of your site’s code (even though the effect is in the footer, so visitors won’t see it until they scroll to the footer).
So a very rough layout for your site’s code might be something like:
- Header meta
- Coolfooter.js
- 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”.
With the tips in this post, you’ll be able to wait to load certain CSS and JavaScript resources until the visible part of your page has already loaded.
What are Render-Blocking Resources?
When referring to render-blocking resources, we’re usually talking about:
- CSS
- JavaScript
It’s important to understand that not all CSS and JavaScript files are render-blocking.
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.
How to Eliminate Render-Blocking JavaScript
There a few different strategies to eliminate render-blocking JavaScript. We cover these in detail in our article on how to defer parsing JavaScript, but here are the main methods:
- Async – lets the HTML parser (e.g. a visitor’s browser) download the JavaScript while still parsing the rest of the HTML. That is, it doesn’t completely stop parsing while the file downloads. However, it will pause the HTML parser to execute the script once it downloads.
- Defer – lets the HTML parser download the JavaScript while parsing the rest of the HTML and waits to execute the script until the HTML parsing is finished.
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.
Async does not use this approach, which can sometimes cause issues if you apply async to all JavaScript resources because it can often break resources that are dependent on resources that appear earlier in the document. The most common problem async produces is broken jQuery resources that try to load before jquery.js has been added to the document.
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.
- Remaining CSS resources should be loaded asynchronously, a move that is typically done by adding them with deferred or asynchronous JavaScript.To be honest, we’re really getting in over our heads here, aren’t we? This is definitely frontend engineer territory. Which is great if you’re are a front-end engineer, but most of us aren’t. The good news is that this is an article about WordPress, and you can eliminate or at least significantly reduce the number of render-blocking JS and CSS resources affecting your site with the right plugin(s).
For another quick and easy way to boost your overall optimization, consider also minifying your code.
How to Eliminate Render-Blocking CSS and JavaScript Resources with WordPress Plugins
To demonstrate how to eliminate render-blocking resources on WordPress, we’ve set up a simple test site that includes render-blocking CSS and JavaScript and then we’ll take you through how to use two different plugin solutions to eliminate the render-blocking CSS and JavaScript:
- Autoptimize + Async JavaScript (free)
- WP Rocket (paid)
For reference, here’s what our test site looks like before optimizing CSS and JavaScript delivery:
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.
How to Eliminate Render-Blocking Resources with Autoptimize + Async JavaScript 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 Enable Async JavaScript at the top.
- 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.
Once you’ve set up the Async JavaScript plugin, go to Settings → Autoptimize and:
- Check the box to Optimize JavaScript Code
- Check the box to Optimize CSS Code
If you’re an advanced user, you can play around with the additional JavaScript and CSS optimization settings, but most sites will be fine with the defaults.
After configuring Autoptimize and Async JavaScript, our test site passed PageSpeed Insights’ “Eliminate render-blocking resources” audit:
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.
Normally, we don’t allow caching plugins on WordPress sites hosted at Kinsta because we already handle caching for you at a server level via the speedy Nginx FastCGI cache.
However, WP Rocket has a special integration with Kinsta that lets WP Rocket play nice with your Kinsta caching. That’s great because WP Rocket does a lot more for WordPress performance than just caching, including helping you eliminate render-blocking CSS and JavaScript resources on your WordPress site.
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
- Load JavaScript deferred under the JavaScript files section. You can experiment with turning the Safe Mode for jQuery off. But if you notice problems on the front-end of your site, you’ll want to re-enable safe mode for jQuery as it’s the likely culprit.
After activating these two features, our test site also passed the “eliminate render-blocking resources” audit in PageSpeed Insights. WP Rocket also managed to eliminate more render-blocking resources than the Autoptimize/Async JavaScript setup:
And that’s how to eliminate render-blocking resources on your WordPress website!
Summary
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.
For a free solution, you can use the combination of Autoptimize and Async JavaScript, two plugins from the same developer.
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!
Jon is the Chief Operating Officer at Kinsta and is involved with Kinsta's sales, customer service, and technical support teams on a daily basis. Jon's a family man. So when he isn't feverishly tapping the keys of his laptop he's usually helping one of his kids fix a bike or setting up Netflix for an impatient preschooler.
Great post thank you! Yours is the best break down for explaining the render-blocking issue (I’m clueless when it comes to coding). I followed your instructions and downloaded the free plugins and it did help my page speed results :) One question though, after I ran the plugins Google Pagespeed still says I need to “remove unused CSS” can the free plugins do this as well or is this a separate issue?
Thanks again, I appreciate the help!
Thanks a lot for this article. Exactly I was looking for after PageSpeed results :D
This took our page speed up 10-14 points and it only took about 10 minutes. 8 minutes to read the article and 2 minutes to install the plugins and change the settings. We went for the free Async/Autoptimize option and deferred. Thanks again
Wow, what a blog post. Thanks man, kudos!
Worked for me, Thanks kinsta, you guys saved lot of time
Thank You So Much for this article. actually I have a question, can I deactivate plugin after using?
Hello Abdullah, disabling the plugin will restore CSS/JS to the default configuration (render-blocking), so please keep it enabled.
This method made my website loading from 7.6seconds to 3.8 seconds. Thank you very much.
I followed your steps but unfortunately, it did not stop the FOUC from occurring on our site.
Sorry to hear that, Joe. I’d recommend checking with a web developer to identify the root cause of the issue.
thanks for your helpful article,
after enabling Autoptimize and Async Javascript, pagespeed insights show autoptimize css and js files in render-blocking and unused resources section.
how can I fix this?
Render-blocking CSS can be fixed to a certain extent by inlining critical styles. I’d recommend looking at the page speed instead of just the optimization recommendations though. Are the optimized CSS and JS files causing a noticeable lag in the waterfall display for the page load time? If not, I wouldn’t worry about it. If it is causing a lag, then I’d recommend working with a web developer to see how the issue can be addressed.
Systematically explained Brian Li! Kudos!
I have a question though, my host provider using lite speed server for host server caching. In that case, do I need to use plugins like WP rocket or any other caching plugin? Google fonts in .php file of my theme coming under render blocking issue and autoptimize itself coming under render blocking issues.
Hello Saket, thank you for reading!
If your host is doing page caching at the server level, you can disable page caching in WP Rocket. However, WP Rocket is still useful for its other optimization features aside from page caching. Regarding Google Fonts, if you really need to use them, you could try doing HTTP push or perhaps inlining Google Fonts. Otherwise, for max performance, moving over to a system font stack would be best.
Hello my website hosted on Sitegrounds and i use Siteground cache plugin “SG Optimizer” do i need still follow theese steps? I mean will improve more my speed? I think already SG Optimizer do some of theese
Hello Giuoxel, I’m not aware of all of SG Optimizer’s features, so I’d recommend reaching out to SG support to ask whether you need to perform any additional optimizations on your site.
Giouxel, SG Optimizer does do a lot of the same things as WP Rocket. What I suggest in this case it to use WP Asset Cleanup. I use this plugin on every build.
There is a free version in the WordPress repository as well as a paid version. WordPress in itself loads a lot of unnecessary code for most websites that can be unloaded using this plugin.
Sitewide common unloads include emojis, oembeds, dashicons. It will also allow you to disable XML-RPC which is a security issue, optimize local and google fonts, clean up the HTML source code and more.
I use Elementor to build out pages but the block editor to write posts so I unload the block editor styles on all post type “pages”. This is just one example of an optimization you can implement with WP Asset Cleanup.
Another example would be if you use a form plugin there is no sense in loading those styles on pages that don’t have a form. This contributes to the overall code and slows the loading process. You could use this plugin to unload these styles on pages where there aren’t any forms.
I hope this helps you a little.
Hello, I tried using Autoptimize and Async JavaScript, and it didn’t eliminate a good chunk of the render-block resources.
For reference, I had 6.5+ before I installed the two plugins, and now it’s down to 4.6.
How do I eliminate the rest?
Thank you,
-Gabriel
This article was amazingly written – clear, yet it still provided in-depth detail in case readers are interested.
Thanks for sharing!
I tried your exact methods with Autoptimise and the Async Plugins, they did not work. My website still did not pass the LCP audit.
Thanks so much for a great and (dare I say it?) understandable explanation. I am currently using WP Optimizer, but think I will achieve better performance using the combined Autoptimize and Async JavaScript that you suggest. I can deactivate (and then delete WPO). Will I create any conflicts by doing this? Many thanks for any advice that you can give. Cheers,
Paul
This is such a well written article. I’ve had plenty of experience (as a hands-on marketer) using the Async and Autoptimize plugins but never had a deep understanding of whether I was making the right selections. This article really helped me get a better understanding of what I am actually doing. The diagram that visually illustrated the difference between async and defer was particularly useful (now I finally get it) as technical explanations is lost on me sometimes. Thanks for sharing your knowledge.
My site went from an F to an A in just a few minutes. Thanks!