How to Read a Chrome Flame Chart (Without Getting Lost)
👉 Frontend System Design Essentials — Course: https://icodeit.thinkific.com/courses/frontend-system-design-essentials 👉 Frontend System Design Essentials — Book: https://leanpub.com/frontend-system-design-essentials/ When you open the Chrome DevTools Performance panel, there is a lot going on — screenshots, network, CPU, Flame Chart blocks everywhere. It is easy to lose the original question: why does this page feel slow? In this video we walk one focused investigation: a Board app where opening the card edit modal freezes the UI for a moment. We record that interaction, find the Long Task, read the Flame Chart, then use Bottom-Up to find where the time went — before jumping to useMemo or other random fixes. You'll learn: How to record one interaction without burying the signal What yellow / purple / green mean on the Main track How to read a Flame Chart (time, stack depth, width) How Bottom-Up Self time vs Total time helps find hotspots Why you measure again after the fix Final takeaway: A Flame Chart will not pick the optimisation for you. It gives you evidence — so you can choose a solution instead of guessing. --- 00:00 Why the Performance panel feels overwhelming 01:36 The demo problem — slow card edit modal 02:42 Recording one focused interaction 04:32 Finding the busy period (Main track + colours) 06:22 Task and Long Task 08:02 Reading the Flame Chart 09:45 Working through the noise 12:07 Using Bottom-Up (Self time vs Total time) 15:54 Closing the loop — measure again 📘 MY BOOKS & COURSES 👉 Frontend System Design Essentials (Course): https://icodeit.thinkific.com/courses/frontend-system-design-essentials 👉 Frontend System Design Essentials (Book): https://leanpub.com/frontend-system-design-essentials/ 👉 React Anti-Patterns (Amazon): https://www.amazon.com/dp/1805123971 👉 More Tutorials on Advanced Patterns: https://icodeit.com.au/tutorials/advanced-network-patterns-react 📩 STAY CONNECTED 🧠 Newsletter (system design & clean code): https://juntao.substack.com 🌐 Website & Blog: https://icodeit.com.au 🐦 Twitter / X: http://twitter.com/JuntaoQiu 📺 YouTube (subscribe): https://www.youtube.com/@icodeit.juntao JetBrains has kindly provided a 20% discount for viewers of this channel. Use the code ICODEIT20 when purchasing a personal annual license from the JetBrains store. The code is valid until June 30, 2027. For transparency: JetBrains has also provided me with a complimentary All Products Pack license. There are no requirements around what I say about their tools. #frontend #systemdesign #performance #chromedevtools #flamechart #react #webperformance #javascript