CSS content-visibility Reference & Tester

Your long-form page has 50 sections, and Lighthouse says rendering takes 800ms. The problem isn’t your code — it’s the browser dutifully laying out, painting, and compositing all 50 sections on initial load, even though the user only sees the first two. Adding content-visibility: auto to off-screen sections can cut rendering time by 50–90% with a single CSS property. But getting it wrong causes layout shift, breaks Ctrl+F search, and makes scroll-to-anchor links jump to the wrong position.

Why This Reference and Tester (Not Just Adding the Property)

content-visibility: auto has three significant side effects that blog tutorials gloss over: (1) off-screen elements collapse to zero height unless you set contain-intrinsic-size, (2) browsers skip IntersectionObserver callbacks for skipped elements, and (3) find-in-page behavior varies across browsers. This reference covers all three with tested patterns, includes an interactive tester that shows the rendering savings in real time, and generates copy-ready CSS with the correct contain-intrinsic-size values. All processing happens in your browser.

What is content-visibility?

content-visibility controls whether an element renders its contents at all. When set to auto, the browser skips layout, paint, and compositing for off-screen elements, dramatically cutting down the rendering work on initial page load.

/* Render everything unconditionally — default */
.element { content-visibility: visible; }

/* Skip rendering entirely — still occupies space */
.element { content-visibility: hidden; }

/* Skip rendering when off-screen — the key optimization */
.element {
  content-visibility: auto;
  contain-intrinsic-size: auto 500px;
}

The Three Values

content-visibility: auto

The auto value is the primary use case. When applied to page sections, the browser skips rendering off-screen sections entirely during initial load. Only sections near the viewport are rendered. As the user scrolls, sections are rendered just-in-time.

.page-section {
  content-visibility: auto;
  contain-intrinsic-size: auto 600px;
}

Real-world performance impact: Google reports that applying content-visibility: auto to off-screen page sections reduced rendering time by 7x on content-heavy pages in their benchmarks.

content-visibility: hidden

The hidden value skips rendering but preserves the element’s rendering state in a cache. This makes re-displaying the element much faster than display: none, because the browser does not need to re-compute layout and re-paint from scratch.

/* Panel hidden — rendering skipped, state cached */
.off-canvas-nav {
  content-visibility: hidden;
  contain-intrinsic-size: 280px 100dvh;
}

/* Panel shown — instant re-display */
.off-canvas-nav.is-open {
  content-visibility: visible;
}

Unlike display: none, the element still occupies its layout space when hidden.

The contain-intrinsic-size Property

contain-intrinsic-size is a companion property that tells the browser how much space to reserve for an element whose rendering is being skipped. Without it, the browser assumes 0×0 dimensions, causing Cumulative Layout Shift (CLS) when the element renders.

/* Fixed size estimate */
.section {
  content-visibility: auto;
  contain-intrinsic-size: 100% 500px;
}

/* Auto: uses cached real size after first render */
.section {
  content-visibility: auto;
  contain-intrinsic-size: auto 500px;
}

The auto keyword in contain-intrinsic-size is usually the right choice: the browser uses a fixed estimate (500px in the example) until the element renders for the first time, after which it caches and reuses the real measured size.

Per-axis Properties

/* Only specify block-size (height in horizontal writing mode) */
.section {
  content-visibility: auto;
  contain-intrinsic-block-size: auto 600px;
}

/* Only specify inline-size (width in horizontal writing mode) */
.section {
  content-visibility: auto;
  contain-intrinsic-inline-size: 100%;
}

Performance Benefits

Initial Render Time

On a page with 20 sections where only 1-2 fit in the viewport, content-visibility: auto reduces the number of elements that go through layout and paint by up to 90%. Only the visible sections and their immediate neighbors are rendered.

LCP Improvement

By reducing the total rendering work, the browser reaches the Largest Contentful Paint element faster. This directly improves Core Web Vitals scores and Google Search ranking signals.

Scroll Performance

Long pages with complex content (images, CSS animations, large DOM trees) can cause scroll jank. content-visibility: auto means the browser only composites visible sections, reducing GPU memory pressure and improving scroll frame rate.

Memory Usage

Off-screen sections with content-visibility: auto consume less GPU memory because their composited layers are discarded. This is especially impactful on mobile devices.

Common Patterns

Long Article / Documentation Page

.doc-section {
  content-visibility: auto;
  contain-intrinsic-size: auto 800px;
  padding: 2rem 0;
  border-bottom: 1px solid #e5e7eb;
}

Article Feed / Blog Index

.article-card {
  content-visibility: auto;
  contain-intrinsic-size: auto 350px;
}

Long List / Table Rows

.list-item {
  content-visibility: auto;
  contain-intrinsic-size: auto 64px; /* Match your row height */
}

Toggled Panel (Hidden State)

.modal-backdrop {
  content-visibility: hidden;
  contain-intrinsic-size: 100vw 100vh;
}

.modal-backdrop.is-open {
  content-visibility: visible;
}

What content-visibility Does NOT Do

• Does not remove nodes from the DOM — unlike display: none, the elements always exist.
• Does not defer JavaScript — scripts inside off-screen elements still execute.
• Does not prevent network requests — images and fonts inside off-screen elements may still load (use loading="lazy" separately).
• Does not apply to inline elements — only works on block-level and flex/grid items.
• Is not true virtualization — DOM nodes still exist; only rendering is skipped.

Accessibility Considerations

Elements with content-visibility: hidden are hidden from the accessibility tree, similar to display: none. Use visibility: hidden or aria-hidden="true" where needed.

Elements with content-visibility: auto remain in the accessibility tree even when off-screen — this is the correct behavior for most use cases.

Browser Support

Global browser support is approximately 90%+ as of early 2026. The main gap is Safari before version 18 (released September 2024). For unsupported browsers, content-visibility degrades gracefully — the browser renders everything normally, as if the property were not set.

FAQ

How is content-visibility different from lazy loading?

loading="lazy" on images defers network requests for off-screen images. content-visibility: auto skips the rendering work (layout, paint, compositing) for off-screen sections — even if their images are already loaded. They complement each other: use both on long image-heavy pages.

Does content-visibility: auto cause layout shifts?

Without contain-intrinsic-size, yes. The browser uses a 0×0 estimate for off-screen elements, causing a jump when they render. With contain-intrinsic-size: auto <estimate>, the browser reserves space, preventing CLS. The auto keyword means the real size is used after first render.

Should I apply content-visibility to every element?

No. Only apply it to large, self-contained sections or repeating items (articles, list items). Applying it too granularly adds overhead without benefit. The best targets are sections that take 300px+ of vertical space and have complex content.

Does content-visibility affect elements that are initially in the viewport?

No. content-visibility: auto only skips rendering for elements outside the viewport. Elements in or near the viewport are always rendered normally.

Can I use content-visibility with CSS animations?

Yes, but with a caveat. When an element transitions from off-screen (skipped) to on-screen (rendered), the initial render happens before the animation begins. Plan your CSS animations to account for this initial render step.

All processing is done entirely in your browser — no data is sent to any server.