CSS Output & Performance
CSS Performance
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
| Property | Purpose | Example |
|---|---|---|
| contain | Isolates selected layout, paint, size, or style work. | contain: layout paint |
| content-visibility | Skips rendering work for off-screen content. | content-visibility: auto |
| contain-intrinsic-size | Provides a placeholder size for skipped content. | contain-intrinsic-size: auto 500px |
| will-change | Provides 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 |
|---|---|---|---|---|
| contain | 52 | 79 | 69 | 15.4 |
| content-visibility | 85 | 85 | 125 | 18 |
| will-change | 36 | 79 | 36 | 9.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.