Sequential discovery → fetch → parse → execute chains (HTML discovers CSS, CSS discovers font, JS discovers chunk).

Browser Performance

Render waterfalls

<h2>Summary</h2>
<p>Parser-blocking scripts without <code>defer</code>/<code>async</code>, blocking CSS, sync font loading delay FCP/LCP. <code>media</code> attribute on link tags scopes CSS blocking. Module scripts defer by default. Move analytics/ads below fold or load after idle. Every blocking resource in <code>&lt;head&gt;</code> extends critical path.</p>
<h2>Code example</h2>
<pre><code class="language-html">&lt;link rel="stylesheet" href="/styles.css" media="print" onload="this.media='all'" /&gt;
&lt;script src="/analytics.js" async&gt;&lt;/script&gt;
&lt;script type="module" src="/app.js"&gt;&lt;/script&gt;
</code></pre>
<h2>Key points</h2>
<ul>
<li>Parser-blocking scripts without <code>defer</code>/<code>async</code>, blocking CSS, sync font loading delay FCP/LCP.</li>
<li><code>media</code> attribute on link tags scopes CSS blocking.</li>
<li>Module scripts defer by default.</li>
<li>Move analytics/ads below fold or load after idle.</li>
<li>Every blocking resource in <code>&lt;head&gt;</code> extends critical path.</li>
</ul>
<h2>Further reading</h2>
<ul>
<li><a href="https://web.dev/articles/render-blocking-resources">Render-blocking resources</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script">script defer/async</a></li>
</ul>
<h2>Related concepts</h2>
<ul>
<li><a href="/blogs/level-3-css-containment">CSS containment</a></li>
<li><a href="/blogs/level-3-render-waterfalls">Render waterfalls</a></li>
</ul>


Parser-blocking scripts without `defer`/`async`, blocking CSS, sync font loading delay FCP/LCP.

Render blocking resources

`contain: layout style paint` isolates subtree recalc — useful for list items, widgets, virtualized rows.