Skip to main content
HTML5ANDCSS3 logoHTML5ANDCSS3Tools and Tutorials

CSS Output & Performance

CSS Performance

Written by Published

Use containment and deferred rendering where measurement shows a real rendering cost. You will use layout and paint containment, content-visibility, intrinsic placeholder sizes, and measurement-driven performance checks.

CSS containment lets an author declare that a subtree is independent in specific layout, style, size, or painting dimensions. The browser can use that promise to reduce work.

Containment is effective only when the declared boundary matches the component. Layout containment can change how descendants find containing blocks; paint containment clips painting; size containment changes intrinsic contribution. content-visibility builds on containment to skip rendering work for off-screen content while keeping it in the document. This topic also connects with CSS Filters and CSS Animations.

Contain independent regions

Example

css

.dashboard-widget {
  contain: layout paint;
}

.long-feed-item {
  content-visibility: auto;
  contain-intrinsic-size: auto 320px;
}

contain tells the browser that part of a subtree is independent in specified ways. content-visibility: auto can skip rendering off-screen content while retaining it in the document.

Reserve a credible fallback size

contain-intrinsic-size supplies a placeholder used while content is skipped. A poor estimate causes the scroll bar and page position to jump as content is rendered.

Performance rules that matter more often

  • Reduce unused CSS and avoid shipping whole frameworks for a few utilities.
  • Compress and subset fonts; preload only critical files.
  • Animate transforms and opacity when they produce the required effect.
  • Avoid large filtered or blurred surfaces that repaint during scrolling.
  • Measure in browser performance tools before and after an optimization.

Use will-change as a short-lived hint

will-change lets the browser prepare for a change that is expected soon. Preparation consumes memory and can create a stacking context, so apply the hint shortly before a costly interaction and remove it afterward rather than placing it on every animated element.

Example

css

.animated-panel.is-about-to-move {
  will-change: transform;
}

Containment Properties

PropertyPurposeExample
containIsolates selected layout, paint, size, or style work.contain: layout paint
content-visibilitySkips rendering work for off-screen content.content-visibility: auto
contain-intrinsic-sizeProvides a placeholder size for skipped content.contain-intrinsic-size: auto 500px
will-changeProvides a temporary preparation hint for an expected change.will-change: transform

Complete Example

Run the complete document below in the Try It editor. Resize the preview or interact with the controls where the example calls for it.

Complete runnable example

html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>CSS Performance example</title>
  <style>
    * { box-sizing: border-box; }
    body {
      margin: 0;
      padding: 2rem;
      font-family: system-ui, sans-serif;
      line-height: 1.5;
    }
    main { max-width: 70rem; margin-inline: auto; }
    article, section, aside, form, .card, .panel {
      padding: 1rem;
      border: 1px solid #cbd5e1;
      border-radius: 0.6rem;
    }

.dashboard-widget {
  contain: layout paint;
}

.long-feed-item {
  content-visibility: auto;
  contain-intrinsic-size: auto 320px;
}

.animated-panel.is-about-to-move {
  will-change: transform;
}
  </style>
</head>
<body>
  <main><section class="dashboard-widget"><h1>Contained widget</h1><p>This region has layout and paint containment.</p></section><section class="long-feed-item"><h2>Deferred feed item</h2><p>Scroll it in and out of view.</p></section></main>
</body>
</html>

Browser Support

Feature
Chrome
Edge
Firefox
Safari
contain52796915.4
content-visibility858512518
will-change3679369.1

Versions show the first stable desktop release with unprefixed support. Data source: MDN Browser Compatibility Data 8.0.8. A partial-support note is included where it changes how the example behaves.

Notes

  • Containment changes layout and painting semantics. It is an engineering tool, not a declaration to scatter across every component.
  • Test the example with real content, keyboard input, browser zoom, and the narrowest layout your project supports.
  • Use a fallback when the support table shows that one of your required browsers predates the feature.

Conclusion

Apply containment only after measurement and verify that the new layout and painting boundaries are correct.

Measure a real rendering bottleneck before adding containment, and compare performance after the change. Supply a credible intrinsic placeholder to protect scroll position, then retest sticky elements, positioned descendants, focus navigation, printing, and in-page search around the contained region.

PreviousPrint StylesNextCSS Architecture