A page with two hundred rows pays layout for all of them before first paint, even though the visitor sees four. The content-visibility property lets a subtree be skipped entirely until it approaches the viewport, with one property and one size hint.

.list-row {
  content-visibility: auto;
  contain-intrinsic-size: auto 84px;
}

The two halves

  • content-visibility: auto means the browser may skip rendering, hit-testing, and style for rendered-offscreen subtrees.
  • contain-intrinsic-size gives the skipped element a stand-in size so scrollbars do not jump; the auto keyword lets the browser remember the real size after the row has been seen once.

Where to apply it, where not

  1. Apply per repeated row, card, or section, never to the whole page body; skipping the body defeats find-in-page and anchor scrolls.
  2. Give honest intrinsic sizes: a wildly wrong guess produces a scrollbar-breathing layout as rows are reached.
  3. Do not use it inside elements the user must search visually; browsers keep working on edge cases, and a hidden tree is hidden text to some tooling.

This site's article pages stay modest, one photo and a few dozen blocks, so it does not currently need the property, and that is the honest measurement lesson: apply it where the row count actually bites. On archive pages or a changelog two thousand lines deep, the win is gacor, and it costs two lines.