Q28: How does content-visibility: auto optimize page rendering performance?
content-visibility: auto skips rendering (layout and painting) for off-screen elements until the user scrolls near them, speeding up initial page loads on long web pages.
Deferring Off-Screen Rendering
.long-section {
content-visibility: auto;
contain-intrinsic-size: 0 500px;
}💡 Off-screen sections skip layout rendering until scrolled near the active viewport.
Key Takeaways
- Skips rendering calculations for off-screen element subtrees.
- Reduces initial page rendering times on long scrollable pages.
Knowledge Check
What is the function of contain-intrinsic-size when paired with content-visibility: auto?