The CSS content-visibility property enables web content rendering performance benefits by skipping rendering of off-screen content. This article shows you how to leverage this new CSS property for faster initial load times, using the auto keyword. You will also learn about the CSS Containment Spec and other values for content-visibility that give you more control over how your content renders in the browser.

Una provides insights into web accessibility, inclusive design, and user experience best practices. Developers can explore Una's  articles, guides, and resources to gain a deeper understanding of accessibility standards, design principles, and usability considerations. By embracing Una's teachings, developers can ensure that their digital products are accessible to all users, regardless of their abilities or impairments, and create more inclusive and user-friendly experiences for everyone.

Una Kravets

Improve page load performance and rendering time by utilizing the content-visibility CSS property. It allows the browser to skip rendering offscreen content until it's needed, resulting in faster initial load times and interactions with on-screen content. CSS containment provides predictable isolation of DOM subtrees, allowing for optimization decisions in page rendering. Using content-visibility: auto provides immediate performance improvements, while content-visibility: hidden hides the element's contents while preserving rendering state. These techniques can improve page responsiveness and reduce rendering work on the main thread.

content-visibility: the new CSS property that boosts your rendering performance

Skipping rendering work with content-visibility

Hiding content with content-visibility: hidden

Effects on Interaction to Next Paint (INP)