How to Eliminate Render-Blocking Resources in WordPress

On this page

1. What "render-blocking" means
2. Why WordPress sites have so many
3. Fix CSS with critical CSS
4. Defer or delay JavaScript
5. Load fonts properly
6. Plugin settings that do this for you
7. Test that nothing broke

"Eliminate render-blocking resources" is one of the most common warnings in a WordPress PageSpeed report, and one of the easiest to fix badly. Switch on every optimisation setting at once and the score may rise while the mobile menu, slider or contact form quietly stops working. Here's what the warning means, how to fix it properly and how to check that nothing has broken.

What "render-blocking" means

A browser reads a page's HTML from the top. Two kinds of files in the page's head make it stop and wait before it shows anything:

• Stylesheets (CSS): the browser won't paint the page until it has downloaded and processed them, so visitors don't see unstyled content
• Ordinary scripts (JavaScript): a script without defer or async pauses the reading of the HTML until it has downloaded and run

Meanwhile the visitor sees a blank or half-drawn screen. PageSpeed Insights lists the files responsible and estimates the time they cost; newer versions of the report may call the same check "Render-blocking requests". These files delay the first content appearing and often your Largest Contentful Paint too; see how to fix slow LCP for the wider picture.

Why WordPress sites have so many

Every theme and plugin can add its own stylesheets and scripts, and many add them to every page, in the head. A typical business site might load the theme's CSS, a page builder's CSS and scripts, a slider, a form plugin, an icon library, Google Fonts and jQuery before the first heading appears. Each is small on its own. Together, on a budget phone using mobile data, they add up.

That's why the first fix is often removing plugins and features you don't use. Less code means less to block, and fewer things to configure in the steps below.

Fix CSS with critical CSS

You can't simply defer all CSS, or the page would appear unstyled and then jump into shape. The standard approach is critical CSS:

1. Work out the small set of styles the first screen needs: header, menu, hero and opening text
2. Place those styles directly in the page's HTML, so no extra download is needed
3. Load the full stylesheet in a way that doesn't block, so it applies a moment later

Things to watch:

• Different templates need different critical CSS, because the homepage, service pages, blog posts and product pages look different at the top
• If a style is missing, you'll see a flash of unstyled or misaligned content as the page loads, which can also cause layout shift
• Regenerate it after design changes, theme updates or new sections near the top of a page

Defer or delay JavaScript

Option	What it does	Good for
defer	Downloads in the background and runs, in order, after the HTML has been read	Most theme and plugin scripts, including jQuery and scripts that depend on it
async	Downloads in the background and runs as soon as it arrives, in any order	Independent scripts, such as some analytics tags
Delay until interaction	Doesn't load the script until the visitor scrolls, taps or moves the mouse	Chat widgets, pop-ups, heatmaps and marketing pixels

The usual way this breaks is dependency. If jQuery is deferred but a small inline script in the page expects it straight away, that script fails. Good optimisation plugins account for this, but it's the first thing to check when something stops working. Delaying tracking also needs care so enquiries and sales are still recorded; third-party scripts covers that balance.

For developers: since WordPress 6.3, themes and plugins can register scripts with a defer or async loading strategy, which is cleaner than rewriting tags afterwards.

Load fonts properly

Fonts often appear in this warning, especially when Google Fonts is loaded from Google's servers through a stylesheet in the head. Use fewer families and weights, host the fonts on your own domain, use font-display: swap so text shows straight away in a fallback font, and preload only the main font used at the top of the page. Web fonts and website speed walks through each step. Also check for duplicates: themes, page builders and plugins sometimes each load the same font or icon library.

Plugin settings that do this for you

You rarely need to hand-code these fixes. Performance plugins such as WP Rocket, LiteSpeed Cache, Autoptimize and Perfmatters offer some or all of these options: deferring JavaScript, delaying scripts until interaction, loading CSS without blocking and generating critical CSS. Names and features differ and change between versions, so check the current settings. Some practical rules:

• Use one plugin for these optimisations; two plugins both rewriting your CSS and JavaScript is a reliable way to break a site
• Turn on one setting at a time and test after each
• Use the plugin's exclusion list for any script that breaks when deferred or delayed
• On Elementor sites, also check Elementor's own performance settings, such as loading Google Fonts locally, which vary by version

Test that nothing broke

After each change, clear every cache (plugin, server and CDN), open the site in a private window and check on a real phone as well as a computer:

• Menus: the mobile menu opens and closes, dropdowns work and sticky headers behave
• Sliders and carousels: they appear straight away, without stacked images first
• Forms: they submit, show error messages and pass spam protection
• Pop-ups, tabs, accordions and galleries open as expected
• Online stores: add to cart, the cart count, coupons and checkout
• Tracking: analytics and conversion events still fire

Open the browser console (F12) and look for red errors. A message such as "jQuery is not defined" usually means a script that needed to run early was deferred or delayed; exclude it and test again. It's safest to try all this on a staging site first.

Critical CSS and script deferral are where speed work most often goes wrong. If you'd rather have it set up and tested properly, see WordPress speed optimisation, or Elementor development if your pages need rebuilding more efficiently.