Reading Waterfall Charts
Master the art of reading waterfall charts to quickly identify performance bottlenecks in your website.
What is a Waterfall Chart?
A waterfall chart is a visual representation that shows when each resource on your web page was requested and loaded. It displays resources as horizontal bars arranged vertically, creating a "waterfall" effect that reveals the loading sequence and dependencies between resources.
Each bar represents a single resource (JavaScript file, CSS stylesheet, image, etc.) and shows the various phases of loading: DNS lookup, connection, waiting for the server response, and downloading the content.
How to Read a Waterfall Chart
The Basics
- →Horizontal Axis (X): Represents time (milliseconds or seconds from page start)
- ↓Vertical Axis (Y): Lists resources in chronological order of when they started loading
- ▬Bar Length: Shows how long the resource took to load completely
- 🎨Bar Color: Indicates resource type (JS, CSS, image, etc.) or loading phase
🎯 Start Time Position
Where a bar begins on the horizontal axis shows when that resource started loading. Resources that start later appear further to the right.
⏱️ Duration & Bar Length
Longer bars indicate resources that took more time to load. Look for unusually long bars — these are your performance bottlenecks.
🔗 Dependencies & Gaps
If you see a gap before a resource starts loading, it's likely waiting for another resource to finish first. This reveals dependency chains.
Understanding Colors
LoadTime Analyzer uses colors to help you quickly identify different resource types and loading phases:
Common Patterns to Look For
🚫 Render-Blocking Resources
Pattern: Long bars at the top that delay other resources from loading.
Fix: Defer non-critical JavaScript, inline critical CSS, or use async/defer attributes.
⏳ Long Wait Times
Pattern: Bars with large gaps before content starts downloading (long TTFB).
Fix: Optimize server response time, use CDN, implement caching, or upgrade hosting.
📦 Large Resource Downloads
Pattern: Very long bars indicating lengthy download times.
Fix: Compress files, optimize images, split bundles, or use lazy loading.
🔗 Dependency Chains
Pattern: Resources that don't start until others finish, creating a "staircase" pattern.
Fix: Reduce dependencies, use resource hints (preload, prefetch), or parallelize requests.
🌐 Too Many Third-Party Scripts
Pattern: Many resources from external domains loading late in the waterfall.
Fix: Remove unnecessary third-party scripts, lazy load analytics, or self-host when possible.
Pro Tips for Analysis
- ✓Focus on the critical path: Look at resources that load early — they impact first paint the most
- ✓Compare similar pages: Test competitors or previous versions to see relative performance
- ✓Test from different locations: Network latency varies by geography — test from user locations
- ✓Look for patterns, not one-offs: Run tests multiple times to identify consistent issues
- ✓Prioritize quick wins: Fix obvious issues (large images, uncompressed files) before complex optimizations
Start Reading Waterfall Charts
Use LoadTime Analyzer to generate waterfall charts for any website and start identifying performance issues.
Analyze a Website