The content-visibility CSS property controls whether the browser renders an element’s contents right away. With content-visibility:auto, the browser can skip rendering work for off-screen sections until they are needed.
Long pages can contain many sections the visitor does not see immediately. If the browser can delay layout and painting for those off-screen sections, the visible part of the page can become interactive faster.
This is the simplest pattern. Add content-visibility:auto to long below-the-fold sections and provide an estimated size with contain-intrinsic-size.
<section class="lazy-section">
<h2>Below-the-fold section</h2>
<p>This content can be rendered when needed.</p>
</section>
<style>
.lazy-section{
content-visibility:auto;
contain-intrinsic-size:600px;
}
</style>For long articles or guides, you can apply it to repeated content blocks below the intro.
<article>
<section class="article-section">
<h2>Section one</h2>
<p>Visible content here.</p>
</section>
<section class="article-section lazy-render">
<h2>Section two</h2>
<p>Off-screen content here.</p>
</section>
<section class="article-section lazy-render">
<h2>Section three</h2>
<p>More off-screen content here.</p>
</section>
</article>
<style>
.lazy-render{
content-visibility:auto;
contain-intrinsic-size:700px;
}
</style>This can help on pages with lots of repeated cards, especially when many cards start below the fold.
<div class="card-list">
<article class="result-card">Card one</article>
<article class="result-card">Card two</article>
<article class="result-card">Card three</article>
</div>
<style>
.result-card{
border:2px solid #111;
border-radius:14px;
padding:16px;
margin-bottom:14px;
}
.result-card:nth-child(n + 4){
content-visibility:auto;
contain-intrinsic-size:220px;
}
</style>
For a tool page, keep the form and first result area normal. Use content-visibility:auto on deeper explanation sections, FAQs, examples, or reference blocks.
<main>
<section class="tool-hero">
Main tool form here
</section>
<section class="tool-results">
Result area here
</section>
<section class="tool-extra lazy-render">
Extra examples, FAQ, and notes here
</section>
</main>
<style>
.lazy-render{
content-visibility:auto;
contain-intrinsic-size:800px;
}
</style>
contain-intrinsic-size gives the browser an estimated placeholder size before the content is rendered. This helps reduce layout jumps when the skipped content becomes visible.
.lazy-render{
content-visibility:auto;
/* Estimated height for the skipped section */
contain-intrinsic-size:750px;
}Long articles, documentation pages, blog archives, directories, card lists, tool explanation sections, FAQ blocks, comment sections, large below-the-fold areas, and repeated content sections that do not need to render immediately.
Applying it to important above-the-fold content, forgetting contain-intrinsic-size, using a bad size estimate that causes layout shifts, applying it to tiny sections where it adds no value, or assuming it replaces good image optimization and JavaScript cleanup.
Lazy loading usually delays loading assets like images or iframes. content-visibility:auto delays rendering work for an element’s contents. They can work together, but they solve different parts of page performance.
Intersection Observer gives JavaScript a callback when something becomes visible. content-visibility:auto is CSS that lets the browser skip rendering off-screen content. Use Intersection Observer when you need JS behavior. Use content-visibility when CSS can handle the render delay.
Use content-visibility:auto when a page has large below-the-fold sections that are expensive to render immediately. It is most useful on long pages, heavy pages, and repeated content layouts.
Skip it for tiny pages, important above-the-fold content, navigation, headers, primary forms, or content where an incorrect intrinsic size would cause a bad layout shift.
content-visibility helps browsers skip rendering work. Intersection Observer detects when elements become visible. Lazy loading delays loading images and iframes. CSS container queries help components adapt to their available space.
If you need visibility callbacks in JavaScript, read the Intersection Observer guide. If you need component-based responsive styling, read the CSS Container Queries guide. If you need JavaScript size detection, read the ResizeObserver guide.
Read the full reference on MDN Web Docs.
CSS clamp, native lazy loading, image performance, critical CSS, font loading, DOM size, and Core Web Vitals would all connect well to this topic.