Glossary · Intermediate
Render-blocking resource
A render-blocking resource delays when a browser can present page content, commonly because critical CSS or synchronous script must be processed first.
- Published
- Last checked
Definition
A render-blocking resource prevents or delays the browser from presenting content while it determines styles or executes code required before later parsing. Stylesheets and synchronous scripts in the document head are common examples.
CSS behavior
The browser generally needs applicable CSS before painting to avoid presenting unstyled content and then restyling it. One small external stylesheet may be a reasonable trade-off; a chain of imports and unused framework styles increases the delay.
Script behavior
A classic script without defer can pause HTML parsing while it is fetched and
executed. Deferred scripts run after parsing, and modules are deferred by
default. A script can still consume significant main-thread time after download.
Decisions and measurement
Do not optimize from a rule label alone. Inspect the network waterfall, transfer size, main-thread work, and real-user timing. Inline only genuinely critical, small, stable code when the extra duplication and cache trade-off are justified.
Common failures
- Adding preload hints for assets that are not actually critical.
- Splitting CSS into a serial import chain.
- Loading a large client bundle for static content.
- Measuring only on a warm desktop cache.
- Removing styles in a way that causes visible layout or content shifts.
Review question
Which exact resource delays useful content on a cold constrained connection, and does changing its priority, size, placement, or necessity improve measured experience without creating a new failure?