Content Visibility

ELI5 — The Vibe Check

Content-visibility: auto tells the browser 'don't bother rendering stuff that's off-screen.' It's like a restaurant that only cooks your food when you sit down instead of pre-cooking every dish on the menu. Massive performance win for long pages.

Real Talk

The content-visibility CSS property allows browsers to skip rendering of off-screen elements, dramatically reducing initial render time for long pages. With content-visibility: auto, browsers only render elements as they approach the viewport. Requires contain-intrinsic-size to prevent layout shifts.

Show Me The Code

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

When You'll Hear This

"Adding content-visibility: auto to our blog posts cut rendering time by 7x" / "Don't forget contain-intrinsic-size or you'll get massive layout shifts"