Unlocking Lightning-Fast Web Performance with content-visibility

Modern web pages often juggle massive amounts of offscreen content, which can bog down load times and interaction speeds. With the content-visibility CSS property, browsers can now delay rendering offscreen elements until they're actually needed. This means users see on-screen content faster, and performance isn’t dragged down by hidden sections.

How Does content-visibility Work?

The main idea: let the browser ignore DOM elements that aren’t visible. By applying content-visibility: auto​ Copy, offscreen elements skip style, layout, and paint calculations until they approach the viewport. The impact is dramatic, a demo travel blog saw initial rendering drop from 232ms to just 30ms by chunking content and applying this property.

Understanding CSS Containment

At its core, content-visibility leverages CSS containment, which tells the browser which parts of a page are isolated for rendering. There are four containment types:

​

• size: Keeps the element's box size independent of its contents.
• layout: Prevents descendants from impacting external layouts.
• style: Stops style leaks beyond the element.
• paint: Ensures nothing inside the element renders outside its boundaries.

While you can manually combine these containments, content-visibility: auto​ Copy applies the optimal set automatically, making it easy to unlock performance benefits without deep configuration.

Implementing content-visibility

For best results, divide your page into logical sections (such as individual blog posts) and apply content-visibility: auto​ Copy to each. When these sections are off-screen, the browser only calculates their box size. This keeps both initial loading and scrolling buttery-smooth, even for content-heavy sites.

Pair content-visibility with contain-intrinsic-size to reserve space for off-screen elements, avoiding layout shifts and scrollbar jumps. For example:

.story { content-visibility: auto; contain-intrinsic-size: 1000px; }​ Copy

Set contain-intrinsic-size​ Copy to match your expected content height. As users scroll and content loads, the browser recalculates the real size, maintaining layout stability.

Advanced Techniques: content-visibility: hidden

Want to fully hide content from rendering, but not destroy its rendering state? Use content-visibility: hidden​ Copy. Unlike display: none​ Copy (which removes state) or visibility: hidden​ Copy (which reserves space and still updates), this approach preserves rendering state for instant re-appearance—perfect for single-page apps and virtual scrollers.

Accessibility Considerations and Common Pitfalls

With content-visibility: auto​ Copy, off-screen content stays in the DOM and accessibility tree. This allows screen readers and search to access hidden content, supporting accessibility best practices. However, if you want to hide landmarks or elements from assistive tech, use aria-hidden="true"​ Copy as needed.

Be careful not to trigger layout or style calculations on hidden subtrees with certain DOM APIs, as this can undermine performance gains. Modern browsers like Chromium often flag such cases in the console for easier debugging.

Boosting Responsiveness Metrics

By reducing unnecessary rendering, content-visibility improves Interaction to Next Paint (INP) is a key web responsiveness metric. Deferring off-screen work keeps the main thread available for critical interactions, leading to snappier user experiences.

The Bottom Line

Leveraging content-visibility and the CSS Containment spec empowers developers to deliver faster loads, smoother scrolling, and better responsiveness with minimal code changes. By chunking content and applying content-visibility: auto​ Copy, you can create sites that feel instantly responsive—without sacrificing accessibility.

Want to dive deeper? Explore resources on the CSS Containment spec, MDN documentation, and CSSWG drafts for hands-on guidance.

Source: web.dev - content-visibility: the new CSS property that boosts your rendering performance