content-visibility

content-visibility is a CSS property that enables the browser to skip rendering work — including layout, paint, and compositing — for off-screen content until it is needed, delivering significant reductions in initial page load time and improving Core Web Vitals. The most useful value is auto, which tells the browser to skip rendering of an element if it is not visible in the viewport, while still reserving its layout space to avoid Cumulative Layout Shift. The property was introduced in Chrome 85 in August 2020 and is part of the CSS Containment specification. It is best applied to large, self-contained below-the-fold sections such as comment threads, long article bodies, or infinite-scroll items. The companion property contain-intrinsic-size should be set alongside it to give the browser an estimated size for off-screen sections, preventing scroll bar jumps as content enters the viewport. Firefox added support in 2023. The technique can reduce rendering time on content-heavy pages by 50% or more according to Google’s original case studies.