Render-Blocking Resource

A render-blocking resource is a file that stops the browser from showing anything until it has been downloaded and processed. Stylesheets in the head block rendering by default, and so do scripts without async, defer or type="module".

Why it matters

The browser will not paint without knowing how the page should look, so every blocking resource adds a full network round trip to first paint. On a slow mobile connection, three blocking files can add a second or more. Lighthouse flags them as "Eliminate render-blocking resources".

Example

<!-- blocks rendering -->
<link rel="stylesheet" href="/all.css">
<script src="/app.js"></script>

<!-- better -->
<style>/* critical CSS inline */</style>
<link rel="stylesheet" href="/all.css" media="print" onload="this.media='all'">
<script src="/app.js" defer></script>

defer downloads in parallel and runs after parsing. async runs as soon as the file arrives, in no guaranteed order.

Common mistakes

• Putting every script in the head without defer.
• Importing CSS through @import, which chains requests.
• Deferring a script that other inline code needs immediately.
• Blocking on a third-party font stylesheet from another origin.

Related

• Critical rendering path
• Critical CSS
• FCP
• Minification

This page is general information written by our editorial team and updated when documentation changes. Servers and providers differ, so test changes safely first. See our editorial policy and disclaimer.