Modern CSS tricks for massive performance gains | Michael Hladky @PodRocket WebDev Podcast

Michael Hladky joins the pod to explain how CSS performance improvements like content-visibility, CSS containment, contain layout, and contain paint can dramatically outperform JavaScript virtual scrolling. The conversation explores virtual scrolling, large DOM performance, and how layout and paint work inside the browser rendering pipeline, including recalculate styles and their impact on INP Interaction to Next Paint. Michael shares real-world examples of frontend performance optimization, discusses cross-browser CSS support including Safari content-visibility, and explains why web performance issues tied to rendering are often misunderstood and overlooked.

Resources

Conference link: https://push-based.io/event/perfnow-2025-michael-hladky-zero-js-virtual-scrolling-css

Conference resource: https://github.com/push-based/css-contain-and-content-visibility-research

Chapters

00:00 Introduction to CSS Performance and Virtual Scrolling

01:20 Why Interaction to Next Paint (INP) Changed Everything

03:00 The Real Cost of Layout and Paint

05:10 Why Large DOMs Break Performance

06:45 How CSS Containment Works

08:30 Contain Layout vs Contain Paint Explained

10:40 When Containment Breaks Your UI

12:20 Introducing Content Visibility

14:10 CSS Content Visibility vs JavaScript Virtual Scrolling

16:40 Why CSS Skips Recalculate Styles Entirely

18:50 Real Performance Gains on Desktop and Mobile

20:40 Cross-Browser Support Including Safari

22:10 Common Pitfalls and Flickering Issues

24:10 How to Measure Layout and Paint Performance

26:10 Why Frameworks Should Use This by Default

28:00 Design Systems and Low-Hanging Performance Wins

30:10 The Biggest CSS Performance Misconception

32:00 Final Takeaways on Frontend Performance