The new CSS property that boosts your rendering performance (2020)

The new CSS property `content-visibility`, introduced in Chromium 85, significantly enhances web page rendering performance by allowing browsers to skip rendering off-screen content until it is needed. This property enables faster initial load times and improved interaction speeds with visible content. When applied, `content-visibility: auto` can lead to a remarkable 7x performance boost in rendering times, as demonstrated in a travel blog example where rendering times dropped from 232ms to 30ms. The property works in conjunction with CSS Containment, which isolates DOM subtrees, allowing browsers to optimize rendering decisions. While `content-visibility` is currently supported in Chromium, it is still being prototyped for Firefox. Developers can also use `contain-intrinsic-size` to specify the size of elements affected by size containment, ensuring that layout remains stable. Additionally, `content-visibility: hidden` allows developers to keep content unrendered while preserving its rendering state, making it useful for single-page applications and virtual scrolling. However, developers must be cautious not to call any DOM APIs that could trigger rendering for skipped subtrees. Overall, `content-visibility` offers a powerful tool for optimizing web performance while maintaining accessibility.

- `content-visibility` improves rendering performance by skipping off-screen content.

- The property can lead to significant reductions in initial load times.

- It works alongside CSS Containment for better optimization.

- Developers should avoid certain DOM API calls to maintain performance benefits.

- `content-visibility: hidden` preserves rendering state for unrendered content.