Skip to main content

content-visibility & Rendering Performance

content-visibility: auto lets the browser skip rendering work for off-screen subtrees until they approach the viewport -- similar in spirit to lazy rendering, without an IntersectionObserver for that specific optimisation.

For the broader performance checklist (images, fonts, JS), see Web performance. This page is the CSS-focused deep dive.

The API​

.section {
    content-visibility: auto;
    contain-intrinsic-size: auto 500px;
}
PropertyRole
content-visibility: autoBrowser may skip painting/layout of contents when far off-screen
content-visibility: hiddenForce-skip (also used for app-like hide without wiping state in some patterns)
content-visibility: visibleDefault -- always render
contain-intrinsic-sizePlaceholder size while contents are not rendered, so scrollbars stay sane

auto also applies relevant CSS containment so skipped subtrees do not invalidate the whole document as often.

Why contain-intrinsic-size matters​

Without an intrinsic size hint, skipped sections can collapse to zero height, making the scrollbar jump as you scroll. Provide a reasonable estimate:

.article-block {
    content-visibility: auto;
    contain-intrinsic-size: auto 720px;
}

auto as the first keyword allows the browser to remember the last rendered size when available (improving accuracy after the first visit to that section). Check MDN for the exact syntax your baseline supports.

Good candidates​

  • Long article bodies with distinct sections
  • Below-the-fold dashboard widgets
  • Comment threads / activity feeds far down the page
  • Large static marketing pages with many independent blocks

Poor candidates​

  • Above-the-fold hero and primary navigation
  • Content that affects SEO-critical first paint in subtle ways you have not measured
  • Elements whose size you cannot estimate at all (prefer measuring once, then tuning)
  • UI that must participate in page-wide search / find-in-page quirks you have not tested

Accessibility and UX notes​

  • Keyboard users and find-in-page should still reach content -- test before rolling out site-wide.
  • Do not use content-visibility: hidden as a substitute for proper hidden / display semantics without checking focus and AT behaviour.
  • Combine with responsive images and modern image formats; this property does not replace image lazy-loading.

Progressive enhancement​

Unsupported browsers ignore the property -- the page still works, just without the optimisation. Ship it as an additive improvement after measuring (Chrome Performance panel, Interaction to Next Paint, etc.).

/* Safe additive */
.long-form > section {
    content-visibility: auto;
    contain-intrinsic-size: auto 480px;
}

content-visibility ties into CSS containment (contain: layout paint style size). Prefer content-visibility: auto over hand-tuning every contain value unless you know you need finer control.