SiteVitals

Eliminate render-blocking resources

The Lighthouse warning means the browser had to wait for certain CSS and JavaScript files before it could paint anything. Here is what each type is and how to get it off the critical path.

Thresholds measured at the 75th percentile of page loads, per Google’s web.dev guidance.

What counts as render-blocking

ResourceBlocks rendering?Fix
<link rel="stylesheet"> in headYesInline critical CSS; load the rest with media="print" onload="this.media='all'" or a preload
<script src> in headYes (also blocks parsing)Add defer, or async for independent scripts
<script defer> / type="module"No—
CSS @importYes, and seriallyReplace with <link> tags or bundle
Web fontsBlock text (not the page) for up to 3 sfont-display: swap, self-host, preload the main weight

The critical path, toggle by toggle

First Contentful Paint ≈ 1.9 s → Needs improvement

Magenta bars block rendering: the browser won't paint until they finish. Simplified model of a mobile load with 600 ms server response; real pages have more files, but the rule is the same.

Step by step

  1. Run the Lighthouse test and open “Eliminate render-blocking resources” to see the exact files and the estimated saving.
  2. For each script, ask whether it is needed before first paint. Almost none are: add defer.
  3. Extract the CSS for the top of the page (tools like Critical or Critters automate this), inline it, and load the full stylesheet asynchronously.
  4. Remove CSS @import chains and unused stylesheets from plugins or themes.
  5. Re-test and check nothing broke visually (a flash of unstyled content means the critical CSS is missing something).

Questions people ask

What are render-blocking resources?

Files that the browser must download and process before it paints anything: stylesheets linked in the head (unless media doesn’t match), and scripts in the head without async, defer or type="module".

Should I use async or defer?

Use defer for your own scripts: they download in parallel and run in order after the HTML is parsed. Use async for independent third-party scripts such as analytics, which can run whenever they arrive.

How do I eliminate render-blocking CSS in WordPress?

Most performance plugins (for example WP Rocket, LiteSpeed Cache or Perfmatters) can generate critical CSS, load the rest asynchronously, and defer JavaScript. Test afterwards: deferring jQuery-dependent scripts can break themes.