How to use CSS containment to improve rendering performance

CSS Containment

CSS contain tells the browser that a subtree is independent from the rest of the document. This allows the browser to skip recalculating layout, paint, or style for that subtree when changes occur inside or outside it.

/* Isolate a widget — changes inside don't affect outside layout */
.widget {
  contain: layout style paint;
}

/* Shorthand for all containment types */
.widget {
  contain: strict; /* = layout style paint size */
}

Individual values:

• layout — the element's internal layout doesn't affect elements outside it

• style — CSS counters and quotes are scoped; changes don't propagate up

• paint — children don't paint outside the element's bounds (enables skipping off-screen children)

• size — the element's size is independent of its children

content-visibility: auto is the highest-impact containment optimization: the browser skips rendering off-screen elements entirely, resuming only when they scroll into view:

.article-card {
  content-visibility: auto;
  contain-intrinsic-size: auto 300px; /* estimated height to preserve scroll position */
}

On long pages with many repeated card or list components, content-visibility: auto alone can reduce initial rendering time by 50%+ because the browser skips style, layout, and paint for everything below the fold on first render.