Render-Blocking Resources.

Performance Core Web Vitals & Page Load

CSS/JS that blocks page rendering — defer or inline critical resources

What does this check test?

Render-blocking resources are CSS stylesheets and JavaScript files in the `<head>` that prevent the browser from rendering any content until they are fully downloaded and processed. By default, all `<link rel="stylesheet">` and `<script>` tags (without `async` or `defer`) in the `<head>` are render-blocking. The browser must build the CSSOM (CSS Object Model) from all blocking CSS and execute all blocking JS before it can paint the first pixel. This check identifies resources that delay First Contentful Paint and Largest Contentful Paint.

Why does it matter?

Render-blocking resources are one of the most common causes of slow FCP and LCP. A single large CSS file or synchronous JavaScript bundle in the `<head>` can delay content rendering by seconds, even if the HTML content is already available. Users see a blank white screen while these resources download and process. Eliminating render-blocking resources is often the highest-impact performance optimization available — it can improve FCP by 1-3 seconds on typical sites.

Who is affected?

Nearly every website has some render-blocking resources, but sites using large CSS frameworks (Bootstrap, Tailwind with unused utilities), multiple Google Fonts loaded synchronously, legacy JavaScript libraries loaded in `<head>`, and third-party widgets that inject blocking scripts are most affected. WordPress sites with many plugins that each add their own CSS/JS files are particularly prone to this issue.

Where does this apply?

Render-blocking resources are found in the HTML `<head>` section: `<link rel="stylesheet">` tags for external CSS, `<style>` tags with `@import` rules, and `<script>` tags without `async` or `defer` attributes. Chrome DevTools Performance panel highlights render-blocking resources in the 'Network' section, and Lighthouse specifically flags each blocking resource with its estimated time savings.

How to fix it

For CSS: extract the critical CSS needed to render above-the-fold content and inline it in a `<style>` tag in `<head>`. Tools like `critical` (npm package) can automate critical CSS extraction. Inline critical CSS and async-load the rest:

html

<head>
  <style>/* critical above-the-fold styles */</style>
  <link rel="preload" href="/styles.css" as="style"
        onload="this.onload=null;this.rel='stylesheet'" />
  <noscript><link rel="stylesheet" href="/styles.css" /></noscript>
</head>

Defer or async-load JavaScript:

html

<script defer src="/app.js"></script>
<script async src="/analytics.js"></script>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

For Google Fonts: use `font-display: swap` and preconnect. Consider self-hosting fonts to eliminate the extra connection.

References

AppVet checks Render-Blocking Resources automatically

Run a free performance scan and get a full report with actionable fixes, including a Fix with AI prompt you can paste into any coding tool.

Run Audit

← All checks