CSS content-visibility for React devs

September 25, 2024

This content originally appeared on DEV Community and was authored by Sebastien Lorber

Hey, it’s Seb from This Week In React here

For your information, with Safari 18 release, CSS content-visibility is now available in all browsers, and I think React developers should care.

I wanted to share the news in my newsletter, but the information is spread over Twitter, so I thought I’d aggregate the relevant bits here to make it more convenient to understand. It’s not going to be a deep dive, I’m just sharing interesting references you might like.

Let’s start with the MDN description:

It enables the user agent to skip an element’s rendering work (including layout and painting) until it is needed — which makes the initial page load much faster.

TLDR: you can improve your page rendering performance (including Lighthouse score and SEO) with this new CSS rule, in particular with the content-visibility: auto; value on pages containing large lists.

It can be a good middle ground between bad rendering performance, and a React virtualization library, as long as you are able to approximately estimate the size of the list items.

.large-list-item {
  content-visibility: auto;
  contain-intrinsic-size: auto 500px;
}

Malte Ubl (CTO of Vercel) also explained this on Twitter:

Vercel already uses it in production, giving some example use cases:

If you want a more concrete optimization case study, there’s also this article from Nolan Lawson explaining how he optimized a slow emoji picker with content-visibility. Unfortunately, it doesn’t seem to work immediately on <img loading="lazy"> tags.

Bonus: you improve the accessibility of your app compared to most virtualization solutions: you can ctrl+f and search for content that would otherwise not be in the DOM.

Even if it’s not widely supported yet, it can be adopted today as a progressive enhancement.