content-visibility: The Rendering Shortcut Nobody Uses

Browsers render your whole page on load - including the nine sections nobody has scrolled to yet. Style, layout and paint all run for content that isn't visible and might never be. For long pages (docs, feeds, landing pages with a dozen sections), that's a lot of wasted work at the worst possible moment: first load.

.page-section {
    content-visibility: auto;
    contain-intrinsic-size: auto 600px;
}

content-visibility: auto lets the browser skip rendering an element's contents while it's off-screen. Not display: none (the content is still in the DOM, still findable with Ctrl+F, still in the accessibility tree) - just not laid out or painted until it approaches the viewport. As you scroll near, the browser renders it just in time.

Why the second property is mandatory

Unrendered content has unknown height. Without a stand-in, sections collapse toward zero, the page length shrinks, and your scrollbar jumps around as things render in. contain-intrinsic-size provides the placeholder:

contain-intrinsic-size: auto 600px;

The 600px is your estimate of a typical section's height. The auto keyword is the clever half: once a section has actually rendered, the browser remembers its real size and uses that for future estimates - so scrollbar accuracy improves as the user scrolls. Estimates only need to be in the right neighborhood, not exact.

Measured impact

On a long documentation-style page, applying this to major sections routinely cuts initial rendering work by half or more (the Chrome team's original case study showed a 7x rendering improvement on a huge page). Profile before and after in the Performance panel - look at the Layout and Pre-Paint slices. It's also one of the few CSS-only changes that visibly moves INP on long pages, because less rendering work means a freer main thread.

Where to use it - and where not

• Great: long articles split into sections, comment threads, FAQ pages, footers with heavy content, any "wall of cards" page.
• Careful: elements whose height affects things above them, layouts measured by JS on load (your measurements will read collapsed sizes), and in-page anchor navigation - jumping deep into unrendered content works but can be less smooth.
• Don't: tiny pages. The bookkeeping isn't free; this earns its keep at scale.

Support: Chromium since 2020, Firefox 125+, Safari 18+. Older browsers ignore it harmlessly - which makes it a pure progressive enhancement. Combine with IntersectionObserver-based lazy loading for data, and you get virtualization-like behavior with none of the library weight.