Using “content-visibility”

So what’s the deal with content-visibility? In a nutshell, it lets the browser skip rendering work for elements that aren’t visible to the user. Yes, you heard me right—it’s like giving the browser permission to take a breather. Instead of rendering everything all at once, the browser only paints what’s in the viewport or about to come into view.

Here’s how you use it:

.my-element {
  content-visibility: auto;
}

That’s it! One line of CSS and boom—your webpage is suddenly smarter about how it spends its rendering resources. The auto value tells the browser to skip rendering this element until it’s needed, which can lead to massive performance gains, especially on pages with lots of offscreen content.

The performance payoff

Imagine you’ve got a page full of accordions, long tables, or a bazillion images—stuff that’s not visible until the user scrolls down or interacts with it. Normally, the browser would dutifully process all of it upfront, potentially leading to slower page loads and higher memory usage. But with content-visibility: auto, the browser holds off on doing that work until the element is about to become relevant.

In practice, this can mean faster Time to Interactive (TTI) and smoother scrolling—two metrics that both users and search engines love. Plus, it can significantly reduce memory usage, especially on mobile devices where every byte counts.

Accessibility: heads up

The good news is that content-visibility doesn’t hide elements from assistive technologies like screen readers. Even if an element isn’t being rendered visually, it’s still part of the accessibility tree. So, users relying on screen readers can still interact with your content. Sadly, there is a unwanted side effect: elements that should not be part of the accessibility tree, because they ought the be hidden by styling like display: none or visibility: hidden will also appear in the accessibility tree when off-screen, since the browser won’t render these styles until they enter the viewport¹.

Pro tips

1. Combine with Lazy Loading: Pair content-visibility with lazy loading for images and iframes to supercharge your performance gains.

2. Use contain-intrinsic-size: To prevent layout shifts when elements are rendered, set an intrinsic size:

   .my-element {
     content-visibility: auto;
     contain-intrinsic-size: 500px;
   }

   This ensures the browser reserves space for the element, avoiding those dreaded CLS (Cumulative Layout Shift) penalties.

3. Don’t Overuse It: Like all good things, moderation is key. Slapping content-visibility on every element can backfire, especially if you’ve got elements that frequently change or need to be measured by JavaScript.

Final thoughts

content-visibility is one of those properties that feels almost too good to be true. It’s simple, it’s powerful, and it’s here to make your web pages faster and more efficient. But like any tool, it’s only as good as how you use it. Test thoroughly, keep accessibility top of mind, and enjoy the performance boost.

So go ahead, give content-visibility a whirl. Your users (and your browser) will thank you.