How to Eliminate Render-Blocking Resources in WordPress

To eliminate render-blocking resources in WordPress, defer the JavaScript that does not need to run before the page appears, and deliver only the CSS the first screen needs. WP Rocket does both from its File Optimization settings, the free Autoptimize plugin can do the same, and for scripts you add yourself WordPress has supported deferred loading natively since version 6.3.

If you are looking for the warning in PageSpeed Insights and cannot find it, it has been renamed. As of Lighthouse 13, which powers PageSpeed Insights, the old “Eliminate render-blocking resources” audit lives inside the Render-blocking requests insight. GTmetrix and older reports may still use the old wording.

What does “eliminate render-blocking resources” mean?

When a browser loads your page, it reads the HTML from the top. Every stylesheet in the <head>, and every script that is not marked defer or async, makes it stop, download that file, and process it before it can paint anything on screen. Those files are the render-blocking resources, and each one delays the moment your visitor sees the page.

The report lists the exact files involved, usually your theme’s stylesheet, plugin stylesheets and a few JavaScript files such as jQuery. The fix is to let the browser paint first and fetch the rest afterwards: defer scripts, and inline the small amount of CSS needed for the top of the page (called critical CSS) so the full stylesheets can load without blocking.

What WordPress already does for you

Before reaching for a plugin, it is worth knowing how much recent versions of WordPress fixed on their own:

• Since WordPress 6.3, themes and plugins can load their scripts with defer or async through the script API, and WordPress works out whether it is safe based on each script’s dependencies.
• WordPress 6.9 made classic themes load block styles only for the blocks on each page, instead of the full block library stylesheet. Our guide to removing the block library CSS has the details and measurements.
• WordPress 6.9 also raised the size of stylesheets it prints inline, which saves separate requests, and moved the emoji detection script out of the head. See the WordPress 6.9 frontend performance field guide.

What is left on most sites is the theme’s own stylesheet and the files plugins add, which is where the options below come in.

How to fix it with WP Rocket

WP Rocket is a paid caching plugin, and it handles render-blocking files with a few settings. After installing it, go to Settings > WP Rocket and open the File Optimization tab:

1. Turn on Optimize CSS delivery and choose Remove Unused CSS, which WP Rocket recommends. If that causes problems on your site, choose Load CSS asynchronously instead.
2. Turn on Load JavaScript deferred.
3. Optionally, turn on Delay JavaScript execution, which holds back scripts until the visitor interacts with the page. It helps with Total Blocking Time more than with render-blocking files.
4. Save, clear the cache, and run PageSpeed Insights again.

If the warning is still there, WP Rocket’s documentation on Load JavaScript deferred suggests checking your exclusions: scripts you have excluded from deferring are still render-blocking.

How to fix it for free with Autoptimize

Autoptimize is free, has 800,000+ active installs and was updated in September 2026. After installing it, go to Settings > Autoptimize.

Autoptimize · 94% Avg Review · 800,000+ Active Installs

For JavaScript, check Optimize JavaScript Code? and then Do not aggregate but defer?. That defers your scripts without merging them into one file, which avoids the breakage merged files can cause. The Also defer inline JS? option goes further, but it can break small inline scripts that expect jQuery to be available immediately, so test after turning it on.

For CSS, check Optimize CSS Code? and then Eliminate render-blocking CSS? (older versions called this “Inline and Defer CSS”). Autoptimize then inlines the critical CSS you give it and loads the rest later. You have to supply that critical CSS yourself and update it when your design changes, or use the plugin’s Critical CSS tab, which generates it automatically through the paid criticalcss.com service.

This guide used to pair Autoptimize with the Async JavaScript plugin. Skip that one now: it was last updated in June 2023 and is only tested up to WordPress 6.2, which is a long time for a plugin that rewrites how your scripts load. For delaying individual scripts, Flying Scripts is maintained, or use the delay setting built into most caching plugins.

How to defer scripts in code (WordPress 6.3 and later)

If you add scripts in a theme or plugin, you no longer need a filter that rewrites script tags. Pass a strategy in the last argument of wp_enqueue_script():

<?php
function smartwp_enqueue_scripts() {
	wp_enqueue_script(
		'smartwp-main',
		get_stylesheet_directory_uri() . '/js/main.js',
		array(),
		'1.0.0',
		array(
			'strategy'  => 'defer', // Or 'async' for scripts nothing else depends on.
			'in_footer' => true,
		)
	);
}
add_action( 'wp_enqueue_scripts', 'smartwp_enqueue_scripts' );

To defer a script that another plugin adds, find its handle in the page source (the script tag’s ID is the handle followed by -js) and add the strategy to it after it has been registered:

<?php
add_action( 'wp_enqueue_scripts', function () {
	wp_script_add_data( 'some-plugin-script', 'strategy', 'defer' );
}, 20 );

The advantage over the old approach of adding defer to every script tag is that WordPress checks the dependency chain. If deferring a script would break another script that needs it straight away, WordPress quietly keeps it blocking instead of letting the page break. Add these snippets to your child theme’s functions.php file or a code snippets plugin.

Render-blocking resources vs Total Blocking Time

The two sound alike but measure different things. Render-blocking resources delay the first paint of the page. Total Blocking Time measures how long JavaScript keeps the browser too busy to respond after that. Deferring a script fixes the first problem, but the script still has to run, so it can still add to the second.

To reduce Total Blocking Time, run less JavaScript: remove plugins you do not need, delay scripts until the visitor interacts (WP Rocket’s Delay JavaScript execution, or Flying Scripts), and replace heavy embeds with lightweight previews. Our guide to speeding up WordPress covers the rest, and lazy loading helps with images further down the page.

Frequently asked questions

For a broader look at page speed scores, see this in-depth Google PageSpeed optimization guide on ryrob.com.