CSS content-visibility: The Web Performance Boost You Might Be Missing

Web performance optimization can be a real headache. Shaving off milliseconds here and there, minifying everything in sight, and praying to the performance gods.

Picture this: you’re scrolling through a massive webpage with hundreds of images, complex layouts, and enough content to fill a book. Without content-visibility, browsers dutifully render every single pixel, whether you can see it or not. It’s like a restaurant cooking every dish on the menu just in case someone orders it.

The content-visibility property tells browsers they can skip rendering elements until they’re about to enter the viewport. This might sound simple, but it’s a game-changer for long scrolling pages.

The contain-intrinsic-size property is content-visibility’s partner in crime. It provides a size estimate so the browser can reserve space before rendering, preventing layout shifts.

content-visibility works best on pages with lots of complex, off-screen content. News feeds, product listings, and documentation sites are perfect candidates. I’ve seen initial render times improve by 30-50% on content-heavy pages.

One important detail: content-visibility doesn’t just defer paint operations - it skips layout calculations entirely. This means the browser doesn’t waste time figuring out how to position elements nobody can see yet.

content-visibility isn’t free magic though. Each element with content-visibility: auto becomes a separate containing block. This can affect positioning and scroll anchoring. Here’s what to watch for:

After experimenting with content-visibility across different scenarios, I’ve found it works best when:

1. Sections are clearly defined and independent
2. Content below the fold is complex
3. Users typically don’t need immediate access to hidden content

Feeds are a great example - users rarely jump straight to the bottom, and each post is self-contained.