How to eliminate render-blocking resources
CSS and synchronous scripts in the head stop the browser from painting anything until they arrive. Inline the critical CSS, defer the rest and every paint metric improves.
Step by step, with screenshots: Critical CSS: is it still worth doing in 2026? →
Check your own site
Runs this check and the other 192, free, in about 45 seconds.
Or run only this check with the free Unused CSS/JS checker.
What it is
Render-blocking resources are stylesheets and synchronous scripts that the browser must download and process before it can draw anything on the screen. A <link rel="stylesheet"> in the head, or a <script> without defer or async, holds up the first paint until it has arrived.
Each blocking file costs at least one network round trip, often 150 ms or more on a mobile connection, and they add up. Lighthouse lists them with estimated savings, and getReport shows the same list with the time you could gain. A page is OK when the only blocking CSS is the small amount needed for the first screen and every script is deferred, async or placed so it does not hold up rendering.
What a passing site looks like
- No render-blocking resources delay the first paintwarning · −4 ptseffort M
Render-blocking files
Why it matters. Stylesheets and scripts in <head> stop the browser from drawing anything until they have downloaded. Each one adds a round trip before the visitor sees the page.
- Add defer or async to scripts that are not needed before the first paint, or move them to the end of <body>.
- Inline the CSS needed for the first screen and load the rest asynchronously (WordPress: "Optimize CSS delivery" in WP Rocket / LiteSpeed Cache).
- Remove unused plugin CSS/JS from pages that do not need it.
Questions people ask
How do I eliminate render-blocking resources?
Load only what the first screen needs up front. Inline the critical CSS in the head and load the full stylesheet without blocking, add defer to scripts that are not needed before the first paint, and remove CSS and JavaScript the page does not use. Give print or large-screen stylesheets a media attribute, so the browser does not wait for them.
How do I fix render-blocking resources in WordPress?
Use a performance plugin that can generate critical CSS, load the rest asynchronously and defer JavaScript, such as WP Rocket, LiteSpeed Cache or Perfmatters. Then stop plugins loading their files on pages that do not use them; a contact form's CSS does not belong on every post. Test forms, sliders and checkout after each change, as deferring jQuery can break older themes.
How do I fix render-blocking resources on Shopify?
Most blocking files come from the theme and installed apps. Remove apps you no longer use, since their code can stay in the theme after uninstalling, and check theme.liquid for old snippets. Keep theme scripts deferred and turn off app embeds on pages that do not need them. A current Online Store 2.0 theme usually blocks far less than an older one.
Are Google Fonts render-blocking?
Yes. The Google Fonts stylesheet link is render-blocking by default, and the fonts need connections to two more domains before they load. Add preconnect hints for fonts.googleapis.com and fonts.gstatic.com and keep display=swap in the URL so text shows immediately, or self-host the font files with font-display: swap to remove the third-party round trips entirely.