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

Browser Performance

Render blocking resources

<h2>Summary</h2>
<p><code>contain: layout style paint</code> isolates subtree recalc — useful for list items, widgets, virtualized rows. <code>content-visibility: auto</code> skips rendering off-screen content (approximate size required). Wrong containment breaks <code>position: fixed</code> descendants or overflow-visible popovers. Measure before/after on large lists.</p>
<h2>Code example</h2>
<pre><code class="language-css">.list-item {
  contain: layout style paint;
  content-visibility: auto;
  contain-intrinsic-size: 0 80px;
}
</code></pre>
<h2>Key points</h2>
<ul>
<li><code>contain: layout style paint</code> isolates subtree recalc — useful for list items, widgets, virtualized rows.</li>
<li><code>content-visibility: auto</code> skips rendering off-screen content (approximate size required).</li>
<li>Wrong containment breaks <code>position: fixed</code> descendants or overflow-visible popovers.</li>
<li>Measure before/after on large lists.</li>
</ul>
<h2>Further reading</h2>
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/contain">CSS containment</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/content-visibility">content-visibility</a></li>
</ul>
<h2>Related concepts</h2>
<ul>
<li><a href="/blogs/level-3-gpu-acceleration-in-css">GPU acceleration in CSS</a></li>
<li><a href="/blogs/level-3-render-blocking-resources">Render blocking resources</a></li>
</ul>


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

CSS containment

`transform: translate3d(0,0,0)` promotes layer but doesn't speed layout-bound work.