How Browsers Load PagesLesson 1.3

What are render-blocking resources and how to eliminate them

render-blocking CSS, render-blocking JS, defer attribute, async attribute, media queries on link tags, inline critical CSS

Render-Blocking Resources

A render-blocking resource forces the browser to stop building the DOM or CSSOM until the resource downloads and executes. Every stylesheet linked in <head> is render-blocking by default. Every <script> without async or defer is render-blocking.

For JavaScript, the fix is straightforward:

<!-- blocks HTML parsing -->
<script src="app.js"></script>

<!-- downloads in parallel, executes after HTML parsed -->
<script src="app.js" defer></script>

<!-- downloads in parallel, executes immediately when ready -->
<script src="analytics.js" async></script>

Use defer for scripts that need the DOM. Use async for independent scripts like analytics that don't depend on other scripts or the DOM.

For CSS, the fix is scoping with media attributes — the browser still downloads all stylesheets but only render-blocks the ones that apply to the current context:

<link rel="stylesheet" href="print.css" media="print">
<link rel="stylesheet" href="desktop.css" media="(min-width: 900px)">

The most powerful CSS optimization is inlining critical CSS — the minimum styles needed to render above-the-fold content — directly in <head> and loading the full stylesheet asynchronously. Tools like critical (npm package) automate this extraction.