When you run your WordPress site through PageSpeed Insights, one of the most common warnings you’ll see is “Eliminate render-blocking resources.” It sounds technical, but it has a straightforward cause and a handful of practical fixes that apply to almost every WordPress site.
Render-blocking resources are CSS and JavaScript files that a browser must download and process before it can display anything on screen. Every second the browser spends waiting on these files is a second your visitor sees a blank page. For sites aiming to score well on Core Web Vitals or reduce bounce rates, this is one of the higher-impact issues to address.
The good news: you don’t need to touch your theme code or hire a developer. Most fixes come down to adjusting how your files load — deferring scripts, optimising CSS delivery, or letting a performance plugin handle the heavy lifting.
Quick Answer
To remove render-blocking resources in WordPress, defer your JavaScript files using a performance plugin like LiteSpeed Cache or Autoptimize, then enable critical CSS extraction to prevent stylesheets from blocking the initial render. For most sites, these two steps clear the majority of PageSpeed Insights warnings in this category.
What Render-Blocking Resources Are
When a browser parses an HTML page, it reads the code from top to bottom. If it encounters a <script> or <link rel="stylesheet"> tag in the <head>, it stops and waits for that file to download and process before continuing. Only then does it start rendering what the visitor sees.
Most WordPress sites load multiple CSS files from the theme, plugins, and custom styles — plus several JavaScript files — all positioned in the head by default. Each one is a potential blocker. Google’s Lighthouse tool identifies which specific resources are flagged as render-blocking and estimates how much time you’d save by fixing them.
How to Identify Render-Blocking Resources
The fastest way to find render-blocking resources is to run your site through Google PageSpeed Insights. Open the results, scroll to the “Opportunities” section, and look for “Eliminate render-blocking resources.” The report lists the specific files causing the delay — usually including their file names, so you can trace them back to a specific plugin or theme file — along with an estimated time saving.
Pay attention to the estimated savings. Some files contribute only 50–100ms of delay, which has minimal real-world impact. Prioritise any resource where the estimated saving is above 300ms. If you want a full walkthrough of reading the PageSpeed report, using PageSpeed Insights to improve your WordPress website covers each section in detail.
How to Fix Render-Blocking JavaScript
JavaScript is the easier of the two file types to fix. Any <script> loaded without async or defer attributes blocks rendering. Adding either attribute tells the browser to continue parsing the HTML while the script downloads in the background.
Use defer for scripts that need the DOM to be ready before they run — this covers most WordPress plugin scripts. Use async for completely independent scripts such as analytics tags that don’t depend on page elements.
Fix JavaScript Using a Plugin
The most reliable approach for WordPress sites is a performance plugin that manages JavaScript deferral automatically. LiteSpeed Cache, W3 Total Cache, and Autoptimize all include this option. These plugins are designed to handle WordPress’s dependency chains — so jQuery and its dependent scripts defer together correctly without causing errors.
In LiteSpeed Cache, go to LiteSpeed Cache → Page Optimization → JS Settings and enable Load JS Deferred. In Autoptimize, open JavaScript Options and tick Force JavaScript in <head>? off, then enable deferred loading.
Defer JavaScript Manually
If you prefer manual control over which scripts get deferred, add a script_loader_tag filter to your child theme’s functions.php:
function veravix_defer_scripts( $tag, $handle, $src ) {
$defer = array( 'my-plugin-script', 'another-handle' );
if ( in_array( $handle, $defer ) ) {
return '<script src="' . esc_url( $src ) . '" defer></script>' . "
";
}
return $tag;
}
add_filter( 'script_loader_tag', 'veravix_defer_scripts', 10, 3 );Replace the handles in the array with those reported by PageSpeed. Test the site after each addition — some scripts break when deferred, particularly those that run immediately on load.
How to Fix Render-Blocking CSS
CSS is harder to defer than JavaScript because the browser needs stylesheets to render the page at all. The goal isn’t to remove CSS loading — it’s to separate critical CSS (styles needed for what’s visible above the fold) from the rest, and load the critical portion inline so no external file request is needed before the first paint.
Inline Critical CSS
In LiteSpeed Cache, go to Page Optimization → CSS Settings and enable CSS Minify, CSS Combine, and Generate Critical CSS. The plugin analyses your pages, extracts the above-the-fold styles, and inlines them in the HTML. The rest of the stylesheet is loaded after the initial render, so it doesn’t block anything.
After enabling critical CSS generation, visit several pages on your site — not just the homepage — and check that they render correctly. Hero images, navigation menus, and page headers are the most likely to show visual issues if critical CSS extraction is incomplete.
Defer Non-Critical CSS
Stylesheets that aren’t needed for the initial view — icon fonts, off-canvas sidebar styles, print stylesheets — can be loaded asynchronously. Autoptimize handles this in its CSS Options panel with the “Inline and Defer CSS” option. Be aware this can occasionally cause a flash of unstyled content (FOUC) on certain themes, so test it before using it in production.
Practical Tips
- Change one setting at a time. Enabling defer, combine, and critical CSS simultaneously makes it hard to isolate what caused a problem if something breaks. Make one change, check the site on desktop and mobile, then continue.
- Check the live site, not just admin previews. Caching and optimisation settings only apply to the front-end. Always open the site in an incognito window — or flush the cache first — to see the real result.
- Recheck after plugin updates. Plugin updates can re-register scripts or stylesheets in ways that bypass your existing deferral settings. Run PageSpeed Insights again after major updates to catch regressions early.
Common Mistakes
- Deferring jQuery directly. Many WordPress plugins depend on jQuery running before their own code. Deferring jQuery manually without handling its dependents causes JavaScript errors across the site. Always let a performance plugin manage jQuery deferral — it tracks the dependency chain automatically.
- Combining all CSS without testing thoroughly. CSS combining can create specificity conflicts that break layouts in subtle ways. After enabling combine, check your headers, menus, forms, and footers on a real mobile device, not just desktop.
- Assuming a high score on one page means the whole site is clean. PageSpeed scores are per-URL. A homepage that scores 90 can have category and post pages that are still blocked. Check at least one post and one archive page separately.
Render-Blocking vs Other Performance Issues
Fixing render-blocking resources is one step in a wider performance picture. Once your scripts and stylesheets are loading efficiently, minifying your CSS and JavaScript reduces the size of those files so they download faster even after deferral is in place. These two steps work together — deferral controls when files load, minification controls how much data the browser has to process.
If your Core Web Vitals scores remain low after addressing render-blocking resources, the next priority is usually your Largest Contentful Paint element — often a large hero image or a slow server response time. Improving Core Web Vitals in WordPress covers what to check next and how to address LCP, CLS, and INP systematically.
Conclusion
Render-blocking resources are one of the most actionable PageSpeed warnings on any WordPress site. JavaScript deferral alone often produces an immediate improvement in scores, and critical CSS extraction handles the stylesheet side without breaking your design. Start with your performance plugin’s built-in settings, test after each change, and recheck PageSpeed Insights to confirm the improvement. For everything else involved in building a fast, properly structured WordPress site, the step-by-step guide to building a WordPress website covers hosting, setup, and performance from the ground up.
Etienne Basson works with website systems, SEO-driven site architecture, and technical implementation. He writes practical guides on building, structuring, and optimizing websites for long-term growth.