debugjavascriptModerate
Network waterfall analysis: identifying resource load order problems
Viewed 0 times
network waterfallTTFBrender-blockingdeferasyncresource chainparallel loading
chrome
Problem
Pages load slowly but it is not clear why. Individual resource load times look reasonable, but the overall load feels sequential even though resources should be parallel.
Solution
Use Chrome DevTools Network panel waterfall to identify chained requests, render-blocking resources, and TTFB spikes.
Key patterns to look for:
// Fix: defer non-critical JS
<script defer src="/analytics.js"></script>
// Fix: async for independent scripts
<script async src="/ads.js"></script>
// Fix: load JS at end of body instead of <head>
// as a last resort for scripts without defer/async support
Key patterns to look for:
- Long TTFB bars (white space at start of bar) — server slow or CDN miss
- Render-blocking resources (CSS/JS before First Paint marker) — move to async/defer
- Waterfall chains — Resource B starts only when Resource A finishes (dependency chain)
- Many small serial requests — should be parallel or bundled
// Fix: defer non-critical JS
<script defer src="/analytics.js"></script>
// Fix: async for independent scripts
<script async src="/ads.js"></script>
// Fix: load JS at end of body instead of <head>
// as a last resort for scripts without defer/async support
Why
The waterfall view aligns resources on a time axis. Resources that could load in parallel but load serially indicate unnecessary blocking — either a missing async/defer attribute, a CSS file imported by JS, or a dynamic import() that was not split.
Gotchas
- defer scripts execute in order after DOMContentLoaded; async scripts execute immediately when downloaded, out of order
- CSS loaded by JS (@import or dynamic link) creates a dependency chain — extract to static <link> tags
- Initiator column in Network tab shows which file/line triggered each request — essential for tracing chains
- Third-party scripts often trigger additional fetches — use the Domain column to identify culprits
Code Snippets
Detect high TTFB resources via PerformanceResourceTiming
// Programmatically inspect resource timing
performance.getEntriesByType('resource').forEach(entry => {
const ttfb = entry.responseStart - entry.requestStart;
const download = entry.responseEnd - entry.responseStart;
if (ttfb > 200) {
console.warn('High TTFB:', entry.name, ttfb.toFixed(0) + 'ms');
}
});Context
When diagnosing why a page loads slowly despite individual resources appearing fast
Revisions (0)
No revisions yet.