content-visibility

`content-visibility` is a CSS property that lets the browser skip certain rendering work for content that is not currently relevant to the viewport. It can improve initial rendering performance for pages containing large amounts of off-screen content.

The most useful value for long pages is `content-visibility: auto`. With this value, the browser can avoid performing some rendering work for an element when it is outside the relevant viewport area, then perform that work when the element approaches visibility.

The property affects rendering-related work rather than removing the element from the document. Content remains in the DOM, and its layout participation can be represented using intrinsic sizing. This makes it different from techniques such as `display: none`, which removes an element from layout and rendering entirely.

When skipped content has no known size, its placeholder dimensions can be difficult for the browser to estimate accurately. `contain-intrinsic-size` can provide an estimated size so the browser can reserve appropriate space before the content is rendered.

`content-visibility` is particularly useful for independently structured sections such as articles, comments, feeds, or large lists. It should be evaluated with real performance measurements because the benefit depends on page structure, viewport behavior, and how much rendering work the skipped content would otherwise require.

Key points

• `content-visibility: auto` can skip rendering work for off-screen content.
• The content remains in the DOM rather than being removed with `display: none`.
• `contain-intrinsic-size` can provide a placeholder size for skipped content.
• It is most useful when a page contains substantial amounts of independently structured off-screen content.
• Use performance measurements to verify that the property helps the target page.

Interview questions

Would you use `content-visibility` on every element of a page?

No. The property is most useful when individual sections contain enough rendering work that deferring them matters. Applying containment everywhere can add complexity without producing a meaningful performance improvement. I would profile the page, identify expensive off-screen content, apply the technique to suitable sections, and measure the result.

How does `content-visibility: auto` differ from lazy loading an image?

They address different kinds of work. Image lazy loading controls when an image resource is fetched, while `content-visibility: auto` allows the browser to skip certain rendering work for an off-screen element and its contents. They can therefore complement each other on a large page. Using both does not make image loading and rendering containment equivalent mechanisms.

What problem does `content-visibility: auto` solve?

It can reduce the amount of rendering work required for content that is outside the viewport. The browser can defer some work for those sections until they become relevant to what the user can see. This is useful on long pages with many expensive sections. The content is still part of the document rather than being removed.

Why might you use `contain-intrinsic-size` with `content-visibility`?

Skipped content may not have its normal rendered dimensions available when the browser needs to estimate layout. `contain-intrinsic-size` supplies an estimated intrinsic size that can be used as a placeholder. This helps the browser reserve space before the actual content is rendered. A suitable estimate can reduce layout instability caused by inaccurate size assumptions.