Podcast
Modern CSS tricks for massive performance gains | Michael Hladky @PodRocket WebDev Podcast
Description
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
More from the speaker
Keynote Talk | Michael Hladky @ NgIndia 2026
NgIndia
Apr 11, 2026
Advanced CPU Profiling in Node - Profile Data Structure
CPU profiles are more than flame charts—they’re structured JSON files. Learn how nodes, samples, and time deltas form the backbone of DevTools performance data.
Advanced CPU Profiling in Node - Real-Life Examples
Profiling is easiest when it's real. Learn how to capture and make sense of CPU profiles in Node.js across scripts, threads, and processes—then apply it to your own projects.
Advanced CPU Profiling in Node - Best Practices and Pitfalls
Get deeper insights into your Node.JS performance. Learn how to master advanced CPU profiling with built-in tools, interpret process/thread IDs, and optimize using sampling intervals. Troubleshooting and real examples included.
Implementing Incremental Hydration in Angular (Part 3/3)
Implement incremental hydration in a real-world Angular app - Basic setup, hydration triggers and important considerations for a seamless integration.
The Game-Changing Impact of Incremental Hydration in Angular (Part 2/3)
Let's dive deeper into why incremental hydration in Angular matters so much for performance and user experience, focusing on its influence on Largest Contentful Paint (LCP), Interaction to Next Paint (INP), and Cumulative Layout Shift (CLS).