Improve Page Performance with content‑visibility

With the advancements in both technical capability and audience expectations, web pages nowadays have become heavier, and can have pretty massive payloads.

There are many factors at play: ever‑increasing numbers of detailed imagery, resource‑intensive CSS layouts that require the browser to work hard and calculate where everything needs to sit and how it should render on the screen — even when those elements are far, far down the page, outside of the viewport — can really bog down not only the initial load time but also page performance as you scroll. We've all experienced web pages that appear to lag a half‑second behind the scroll wheel whilst our browser struggles to keep up.

This is particularly obvious when dealing with a page that automatically loads new content as you scroll down, for instance, starting off with normal scrolling performance but getting jankier, choppier, and laggier as more and more content is loaded in — not to mention giving Chrome an excuse to chew up more of your system resources.

However, there's a solution to all of this: content‑visibility.

What is the Content Visibility Property in CSS?

content‑visibility is a CSS property that allows you to alter the rendering behaviour of the browser. Using it, you can skip rendering of layouts and elements until they're in (or about to be in) the viewport and need to be viewed. This means that your initial page load can be sped up, only using client‑side resources to render what's visible rather than wasting resources on the stuff that isn't.

There are three settings for the content‑visibility parameter (aside from the usual global options like inherit or initial). These are:

visible

Essentially, this is the default setting. The element will be rendered as usual.

hidden

The element will not be rendered.

auto

This is where this property becomes particularly useful. Using content‑visibility: auto delays the rendering of the element until just before it is actually in the viewport, meaning that the user doesn't notice the work you've done under the hood here, but they'll feel the benefit all the same.

When using the auto setting, you'll also need to include a setting for the contain‑intrinsic‑size property. This property is only used when using content‑visibility, and it gives the browser some key information about the dimensions of an element that isn't currently rendered, using rem, px or percentages.

For example, all of these are valid:

contain-intrinsic-size: 750px;contain-intrinsic-size: 75rem;contain-intrinsic-size: 50%;

Compatibility

For now, content‑visibility works in later versions of Chrome, Edge, and Opera. This excludes a couple of key browsers in Firefox or Safari, and it also doesn't work in Internet Explorer (no surprises there!). However, like many other CSS properties, browsers that don't support it will simply ignore it: there's no intrinsic harm to those browsers in including content‑visibility within your codebase.

The Wrap‑Up

content‑visibility is a seriously useful CSS property for those of us developing more complex and resource‑intensive web pages. It's not fully supported across the board just yet, but once it is, it should see fairly ubiquitous use, given how much it can help with page performance and initial load speed.