How to read a browser waterfall chart to find performance bottlenecks

Reading the Network Waterfall

The network waterfall in DevTools (Network tab) is the most useful performance diagnostic tool available. Each row is one request. Each colored segment is a phase of that request's lifecycle.

The key segments to understand:

• Queuing / Stalled - the request hasn't started yet. Cause: HTTP/1.1 connection limit (6 per origin), or higher-priority requests ahead in queue
• DNS Lookup - resolving the hostname. Should be near-zero after first visit due to caching
• Initial Connection / SSL - TCP + TLS setup. High here means no connection reuse
• Waiting (TTFB) - time until first byte of response. Server is processing
• Content Download - transferring the body. Proportional to file size

// Programmatically read timing data
const [entry] = performance.getEntriesByName('https://example.com/api/data');
console.log('TTFB:', entry.responseStart - entry.requestStart);
console.log('Download:', entry.responseEnd - entry.responseStart);
console.log('Total:', entry.duration);

The single most actionable pattern to spot: a long Stalled bar followed by a short download. This means the file is small but waited in queue - your page has too many parallel requests on HTTP/1.1. The fix is HTTP/2 (multiplexing) or bundling smaller files.