Performance6 min readBy the Kiwi senior team

content-visibility on listing pages: speed without layout jumps

content-visibility: auto can skip rendering off-screen cards. Without contain-intrinsic-size it causes CLS. How to use it on blog and listing pages.

In this guide
  1. Direct answer
  2. Where it helps a B2B site
  3. A practical sequence
  4. Accessibility and find-in-page
  5. What to send if you want a senior review
  6. Questions
  7. Sources

Direct answer

Use `content-visibility: auto` on repeating cards that are below the fold. Pair it with `contain-intrinsic-size` so the browser reserves height. Skip it on the first viewport and on pages with few items.

MDN documents that the property lets the browser skip rendering work for off-screen content. web.dev’s CLS article is the reason you must reserve space: unexpected movement is the metric.

Where it helps a B2B site

Blog indexes, FAQs, and long case-study galleries. Not hero titles, not sticky headers, not elements that measure their own scrollWidth for carousels.

A practical sequence

Measure, then contain.

  • Record CLS on the listing URL in the lab
  • Apply content-visibility only to items after the first row
  • Set contain-intrinsic-size to a plausible card height
  • Disable the optimization when the user prefers reduced motion if your UI also animates height
  • Re-measure on a mid-range phone

Accessibility and find-in-page

Skipped rendering can delay accessibility-tree population for off-screen nodes. That is acceptable for a 100-card index if the first cards are complete. It is not acceptable if the only heading in the tree is ‘loading’.

What to send if you want a senior review

Share the listing URL and a field or lab CLS trace if you have one. Related work at Kiwi: technical SEO and performance foundation.

Frequently asked questions

Does content-visibility improve LCP?

Usually not. LCP is the largest above-the-fold element. This property helps later rendering and INP under load, not the first paint of the hero.

Can we use it on the homepage?

Only on sections that are reliably below the fold. A homepage that ‘hides’ the services grid can skip work the user is about to scroll to — test it.

Is this a ranking promise?

No. It is a rendering technique. Core Web Vitals can be acceptance criteria in a proposal; they are not a traffic guarantee.

Sources

Figures cited above are drawn from the linked publications and are the responsibility of their sources; we date and scope them rather than presenting them as universal guarantees.

What would this change for your business?

Share your goal and the challenge behind it. We’ll help you turn the useful ideas into a practical first step. A senior practitioner replies within one business day.

Start a project