content-visibility & will-change

content-visibility & will-change

Two performance controls for rendering.

content-visibility

Skip rendering off-screen content:

.long-article {
  content-visibility: auto;   /* off-screen = not rendered */
}

contain-intrinsic-size

Give an estimated size so layout doesn't jump:

.post {
  content-visibility: auto;
  contain-intrinsic-size: auto 300px;   /* rough expected height */
}

contain

Narrow, isolated containment:

.card {
  contain: layout paint;
}

will-change

Hint what will animate (use sparingly!):

.popover {
  will-change: transform;
}

Overuse consumes memory, only when you KNOW it animates.

TL;DR

• content-visibility: auto skips offscreen rendering.
• Add contain-intrinsic-size to avoid reflow jumps.
• contain isolates layout/paint.
• will-change hints animations; use carefully.