PodRocket Modern CSS tricks for massive performance gains with Michael Hladky
11 snips
Jan 22, 2026 Michael Hladky, a frontend performance engineer, dives into CSS performance enhancements that can significantly boost web app efficiency. He explains how techniques like content-visibility and CSS containment outperform Javascript virtual scrolling in reducing layout and paint costs. Michael shares insights into the browser rendering pipeline, warns about overusing containment properties, and discusses cross-browser support, including for Safari. With real-world examples, he highlights the often overlooked yet high-impact benefits of these CSS strategies for developers.
AI Snips
Chapters
Transcript
Episode notes
Prefer CSS Over JS For Virtual Scrolling
- Replace JavaScript virtual scrolling with CSS where possible to reduce runtime work and network weight.
- Removing JS list logic often yields big bootstrap and runtime improvements with just a few CSS lines.
Containment Decouples Layout Work
- The browser render pipeline must compute element position and size before painting, and complex layouts increase work.
- CSS containment lets the browser decouple and compute parts independently to reduce layout cost.
Use Containment Selectively
- Apply contain: layout and contain: paint selectively to isolate components that won't need external influence.
- Avoid using containment on elements that rely on overflow or cross-element painting like dropdowns.