Render-Blocking Resources
debt(d3/e3/b3/t5)
Closest to 'specialist tool catches' (d3-d5), Lighthouse and PageSpeed Insights flag render-blocking resources automatically as a standard audit; scoring d3 because these tools are run routinely in modern web workflows and the warning is prominent.
Closest to 'simple parameterised fix' (e3), quick_fix is adding defer attributes and moving scripts before </body>, plus inlining critical CSS — a pattern replacement across a handful of tags, not a refactor.
Closest to 'localised tax' (b3), applies_to is web context only and the impact is on the HTML head/template layer; doesn't shape the whole system but does affect every page template.
Closest to 'notable trap' (t5), the misconception explicitly states async vs defer are commonly confused — async executes immediately and can break dependencies, defer preserves order; this is the documented gotcha most frontend devs eventually learn.
Also Known As
TL;DR
Explanation
The browser cannot render until it has the CSSOM (from CSS) and has executed synchronous scripts. Every <link rel='stylesheet'> and <script> without async/defer in <head> blocks rendering. Strategies: inline critical CSS (removes a request for above-fold styles), defer non-critical CSS (link with media='print' + onload trick), async JavaScript (parallel download, executes when ready — may execute out of order), defer JavaScript (parallel download, executes in order after HTML parsed). Third-party scripts are the most common culprit — analytics, chat widgets, ad scripts.
Common Misconception
Why It Matters
Common Mistakes
- <script> in <head> without async or defer — blocks HTML parsing until the script downloads and executes.
- Inlining too much CSS — inlined CSS cannot be cached; critical CSS should be < 14KB.
- async on scripts that depend on each other — async scripts execute out of order, breaking dependencies.
- Not deferring third-party scripts — analytics and chat widgets are rarely needed for initial render.
Code Examples
<!-- Render-blocking — nothing paints until all are loaded:
<head>
<link rel="stylesheet" href="all-styles.css"> <!-- Blocks render -->
<script src="vendor.js"></script> <!-- Blocks parsing -->
<script src="app.js"></script> <!-- Blocks parsing -->
<script src="https://analytics.example.com/track.js"></script> <!-- Blocks -->
</head><!-- Optimised — critical path unblocked:
<head>
<style>/* Inlined critical above-fold CSS only */</style>
<link rel="preload" href="all-styles.css" as="style" onload="this.rel='stylesheet'">
</head>
<body>
<!-- Content here -->
<script src="vendor.js" defer></script> <!-- Deferred — after HTML parsed -->
<script src="app.js" defer></script> <!-- Deferred — maintains order -->
<script src="analytics.js" async></script> <!-- Async — independent -->
</body>