I Measured content-visibility: auto on 3,000 Cards

Description and use

Using content‑visibility: auto without a proper contain‑intrinsic‑size causes excessive rendering and scroll‑restore issues. Adding a correct size guess (~580 px) cuts first‑frame time to 38 ms and preserves page height.

Problem

Using content‑visibility: auto alone on a large grid of product cards caused excessive layout work, rendering many off‑screen cards and breaking scroll restoration.

Outcome

Variant D (content‑visibility: auto + contain‑intrinsic‑size 580 px) reduced first frame time from 144 ms to 38 ms, cut layout time from 81 ms to 9 ms, and kept page height accurate, while Variant B rendered 444 cards and broke scroll restoration.

Workflow

• Insert 3,000 cards via innerHTML
• Measure first frame time (two requestAnimationFrame callbacks)
• Measure layout time via Performance.getMetrics
• Compare variants A–D

Evidence

At 3,000 cards the first frame dropped from 144 ms to 38 ms in headless Chromium 145

Source

Without contain‑intrinsic‑size, Chromium rendered 444 cards instead of 16, and a 200‑card page got slower

Source

Variant D renders 16 cards at load: the rows on screen plus the ones right next to it. The other 2,984 are skipped.

Source

Variant C and D are within noise of each other on speed. The difference between them shows up later, when someone scrolls.

Source

The trap that bit hardest was scroll restoration.

Source