🎮 content-visibility: auto

500 article cards — rendered without content-visibility, then with it. The timer runs from DOM insert to first committed paint (double-rAF). Run both buttons to see the difference.

1 Run the comparison

Run Without first for a baseline, then With. The gap is larger on slower CPUs — the property pays off most where users feel lag most.

2 Render time comparison
Without
—
Browser paints all 500 cards
With content-visibility: auto
—
Off-screen cards skipped
3 The list
Click a button above to render.
Click a button above to generate the list.

Scroll after each run. With content-visibility: auto the DOM is identical — only rendering is deferred per section. contain-intrinsic-size: auto 68px gives off-screen cards a placeholder height so the scrollbar stays accurate and never jumps.

4 The CSS
.card-item { padding: 12px 16px; border-bottom: 1px solid #e2e7f0; } /* Two lines — that's the whole change */ .card-item.optimized { content-visibility: auto; contain-intrinsic-size: auto 68px; /* height estimate */ }