CSS Content-Visibility Generator - Lazy Rendering Performance

⚙️ Settings

content-visibility

contain-intrinsic-size

Scroll down to see lazy rendering in action with content-visibility: auto

.lazy-section { content-visibility: auto; contain-intrinsic-size: 300px; }

Value	Description	Performance
visible	Element renders normally	No optimization
auto	Off-screen elements skip rendering, render when entering viewport	🎯 Significant first-load improvement
hidden	Element hidden, skips rendering (like display:none but state retained)	Zero rendering cost