CSS Containment & content-visibility
CSS Containment & content-visibility — Optimize rendering performance with CSS containment and content-visibility for faster page loads and smoother scrolling. The guide walks through Contain Property, content-visibility, Will-Change Property. The `contain` property tells the browser a subtree is independent, enabling rendering optimizations. `contain: none` (default), `contain: size` (element's size doesn't depend on children), `contain: layout` (internal layout isolated), `contain: style` (styles don't escape), `contain: paint` (element's content clipped to bounds). Combine: `contain: layout paint` or `contain: strict` (all). `content-visibility: auto` skips rendering of off-screen elements, dramatically improving initial load time. Elements gain `contain: layout paint style` automatically. Con: elements near the viewport may have incorrect size — use `contain-intrinsic-size` to reserve space. Example: `.article { content-visibility: auto; contain-intrinsic-size: 500px; }`. This is the single most impactful CSS performance optimization available. The guide is organized into 3 sections that build on each other, each pairing a prose explanation with real CSS you can use as-is.