Don’t Blame the Browser – Read the Flame & Waterfall Charts!

Transcript

1. Don9t Blame the Browser 3 Read the Flame & Waterfall Charts! by AKSHAY SHARMA Senior Software Engineer @Apollo 24|7 @sharma_akshayy | www.akshaysharma.vercel.app
2. Web apps are getting more complex 4 but so are user expectations. When a page feels slow, we often jump to conclusions: <Is it the browser? The network? The JS? CPU ?î This talk is about moving beyond guesswork. We'll explore how to read and understand two powerful tools built right into your browser: Flame Charts 4 to uncover what¾s clogging the main thread Waterfall Charts 4 to trace how every asset loads, stalls, or blocks
3. Waterfall Charts
4. Purpose Understand network activity (e.g. loading of resources like JS, CSS, images) What it shows? When each resource starts/ends loading How long DNS, connection, SSL, TTFB, and download took Blocking and queuing time Parallel downloads and dependencies
5. Phases Queuing and Stalled (Grey): time before the request is sent. It include DNS lookup, TCP connection setup, SSL handshake(is using HTTPS) Waiting for server response (Green): TTFB (time to first byte), how much time server is taking to send first byte of data Content Download (Blue)
6. Flame Charts
7. Purpose Understand JavaScript execution and main thread activity JS function calls over time Time spent in each function (execution cost) Call stack depth and nesting Long tasks and blocking operations
8. Use Case Debug long tasks / slow JavaScript Spot performance bottlenecks on the main thread Find unoptimised render cycles, layout shifts, or long style calculations Optimise INP (Interaction to Next Paint) or other responsiveness metrics
9. How to Read a Flame Chart