Mar 10
Loading video player...
Stop waiting for production audits to find performance bottlenecks. In this video, we dive into the new GitHub Storybook Performance Panel to show you how to "Shift Left" and catch layout shifts, render cascades, and memory leaks while you build. It’s the surgical precision every developer needs to ship faster, smoother components. 🔗 Relevant Links Github Storybook Performance Addon: https://github.github.com/storybook-addon-performance-panel/ ❤️ More about us Radically better observability stack: https://betterstack.com/ Written tutorials: https://betterstack.com/community/ Example projects: https://github.com/BetterStackHQ 📱 Socials Twitter: https://twitter.com/betterstackhq Instagram: https://www.instagram.com/betterstackhq/ TikTok: https://www.tiktok.com/@betterstack LinkedIn: https://www.linkedin.com/company/betterstack 📌 Chapters: 00:00 - Introduction 00:30 - What is Shift Left Performance Testing? 00:55 - Core Metrics & Rendering Engine Insights 01:30 - Framework Support: React vs. Universal Mode 02:04 - Case Study: AnimatedBox & Style Mutations 02:25 - The HeavyList: Layout Shifts & DOM Churn 02:58 - Element Timing: Measuring Hero Content 03:21 - Expensive Renders & Total Blocking Time (TBT) 03:58 - Memoization: Saving the Main Thread 04:24 - Render Cascades in useLayoutEffect 05:02 - Style Churn & Reflow Loops 05:35 - Surgical Precision vs. Lighthouse 06:05 - Outro & Final Thoughts