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

यह पेज सामान्य जानकारी है, जिसे हमारी संपादकीय टीम ने लिखा है और दस्तावेज़ीकरण बदलने पर अपडेट किया जाता है। सर्वर और प्रदाता अलग-अलग होते हैं, इसलिए बदलाव पहले सुरक्षित तरीके से जाँचें। देखें: संपादकीय नीति और अस्वीकरण.