Field Testing CSS Containment for Web Performance Optimization
August 7, 2024
What is CSS Containment?
CSS containment is a concept that enables developers to optimize rendering performance by explicitly letting the browser know how to handle the rendering of certain nodes or elements – or whether to skip rendering of those elements altogether.
Containment can be applied to an element’s styling, layout, paint, size, or any combination of those properties. For example, a given page might have several article elements, each with a complex structure and layout.
Source: Field Testing CSS Containment for Web Performance Optimization | Speed Kit
A well supported but little used CSS feature that can help performance significantly.
We covered this back at Hover ’22, with Modern CSS rendering performance: The internals of web pages optimization
by Michael Hladky (watch with a free membership!)
