Your landing page is 9,000 pixels tall. The user’s screen shows 800 of them. Yet the browser lays out, styles, and paints all 9,000 before first render—computing geometry for a footer nobody has scrolled to.

content-visibility: auto stops the waste. It tells the browser: skip rendering this element until it approaches the viewport. Layout, paint, even style recalculation for the subtree—all deferred.

The two-property contract

.page-section {
  content-visibility: auto;
  /* reserve estimated space so scrollbar stays honest */
  contain-intrinsic-size: auto 600px;
}

contain-intrinsic-size is the part people skip, and it is not optional. Skipped sections have no computed height, so without a placeholder estimate the scrollbar jitters as sections render in. The auto keyword makes the browser remember the real size once rendered—so the estimate only matters on first pass.

“The fastest rendering work is the work the browser never does.”

Where it wins, where it bites

Long marketing pages, documentation, comment threads, product grids—anything sectioned and scrolling—can see initial rendering cost drop by half or more. Apply it per-section, never to elements above the fold.

Two caveats: in-page find and anchor links still work (browsers render skipped content when it is targeted), but measure-on-load scripts will read zero heights inside skipped sections—so audit anything doing getBoundingClientRect at startup. And do not nest it pointlessly; one level of sectioning is where the payoff lives. Five minutes of work for a render-time cliff—there are few better trades in performance.