content-visibility: auto is a CSS property that tells the browser to skip rendering of elements that are off-screen (outside the viewport). The browser automatically determines when an element is near the viewport and renders it just in time. This significantly reduces initial page layout and paint costs, especially for pages with large amounts of content. It combines contain: layout style paint with automatic visibility detection — the element still occupies space in the DOM and contributes to scroll dimensions, but its painting work is deferred until needed.

Performance gains vary based on content complexity and quantity. For pages with 1,000+ content cards or list items, initial render time can improve by 40–70%. Scroll FPS often improves from ~30 FPS to a smooth 55–60 FPS. The biggest wins come from skipping expensive layout and paint operations for off-screen elements. Use this benchmark tool to test with your typical content density and see real numbers.

Ideal use cases include: long scrolling feeds (social media timelines), product listing pages, image galleries, blog archives, comment sections, and any container with substantial off-screen content. It's less beneficial for small lists (<20 items) or content that's mostly visible on initial load. Pair with contain-intrinsic-size to prevent scrollbar jank when content hasn't been measured yet.

Potential drawbacks: (1) Delayed rendering may cause a brief flash when scrolling quickly — content appears slightly after entering the viewport. (2) Without contain-intrinsic-size, scrollbar may jump as elements are measured. (3) find-in-page (Ctrl+F) may miss content in unrendered areas. (4) Accessibility tools that scan the DOM may not "see" skipped content. (5) Not supported in Firefox (as of 2024). Always test with your specific use case and provide a fallback.

Generally no, but with caveats. Search engine crawlers (Googlebot) render pages headlessly and typically process the full DOM regardless of content-visibility. The content still exists in the HTML, so indexing should work normally. However, if you're using it on critical above-the-fold content, ensure that content renders before crawler timeout. For maximum safety, avoid applying content-visibility: auto to your main content area's first visible portion — use it only below the fold.

display: none removes the element from layout entirely (0×0 box, no scroll space). visibility: hidden hides the element but preserves its layout space — it still gets painted (as transparent). content-visibility: auto keeps the element in layout (preserving scroll dimensions) but skips painting until it's near the viewport. It's a rendering optimization, not a visibility toggle — the element still takes up space and exists in the accessibility tree.

As of 2024, Chromium-based browsers (Chrome 85+, Edge 85+, Opera 71+, Samsung Internet 14+) fully support content-visibility: auto. Safari added support in version 17.4+ (March 2024). Firefox does not yet support it (track Bugzilla #1798480). Use @supports (content-visibility: auto) for progressive enhancement — browsers that don't support it will simply render all content normally.

This tool uses three measurement techniques: (1) Initial Render Time — measured via performance.now() with double requestAnimationFrame to capture full paint completion. (2) Scroll FPS — calculated by tracking requestAnimationFrame timestamps during synchronized auto-scrolling across both panels. (3) Long Tasks — monitored via PerformanceObserver for tasks exceeding 50ms. All measurements run on identical content in parallel containers for a fair, real-time comparison.

contain-intrinsic-size provides a placeholder size for elements before they're rendered. Without it, the browser must estimate dimensions, which can cause scrollbar instability as elements load in. Always set contain-intrinsic-size when you know the approximate size of your off-screen content — e.g., contain-intrinsic-size: auto 300px; for 300px-tall cards. Use the auto keyword to let the browser remember the last rendered size, providing the smoothest experience.

Yes, significantly. It directly improves LCP (Largest Contentful Paint) by reducing initial rendering work, allowing the main content to paint faster. It helps FID/INP (Interaction to Next Paint) by keeping the main thread free for user interactions instead of rendering off-screen content. It can also reduce CLS (Cumulative Layout Shift) when paired with contain-intrinsic-size. Many sites report LCP improvements of 20–50% after applying content-visibility: auto to below-the-fold sections.