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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

Web apps are getting more complex 4 but so are user expectations. When a page feels slow, we often jump to conclusions:

Slide 3

Slide 3 text

Waterfall Charts

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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)

Slide 6

Slide 6 text

Flame Charts

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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