Improving Website Performance with CSS Containment
summary
Spec introduces a single property "contain" with values layout paint size style and shows concrete wins from real benchmarks and browser work Chrome ships it and sites like YouTube and Gmail use it while Firefox is landing implementations and tests. Examples show a 10 000‑item case dropping from ~6 ms to ~0.2 ms with contain: strict, Chromium observs ~12× speedups and Firefox ~2700× in one example, a production table gains ~4× with contain: layout size, and a stress case averages ~10% faster; some sites broke during implementation and engines added targeted optimizations and new features like display locking.
AI-written summary · about
chapters (29)
- 0:00Introduction
- 0:37About me
- 1:26CSS Containment
- 2:10Improving Website Performance
- 2:49Candidate Recommendation
- 3:03What is CSS Containment
- 3:34Confusion about CSS Containment
- 4:07Contained property
- 4:37Container elements
- 5:15Browser engines
- 6:20Module containment
- 6:44Effects
- 7:14Cover Flow
- 8:04Baseline
- 8:39Pain Containment
- 10:15Size Containment
- 10:47Content Size
- 11:23Stem Containment
- 11:59Chromium
- 12:21Counters
- 13:13Close Quotes
- 14:32Chrome
- 15:59Firefox
- 16:39Chromium Link
- 19:24Bloomberg
- 19:42Huge Table
- 20:24Stress Test
- 21:57Future
- 22:10Optimization
