Performance & Network

Network Waterfall

A visual timeline of every asset loaded by your page, grouped by device frame, to identify render-blocking resources and optimization opportunities.

Overview

Understanding Asset Load Order

The Network Waterfall displays every resource request made during page load (scripts, stylesheets, images, XHR calls, and fonts) as a horizontal timeline bar, visually showing you when each resource started loading and how long it took. This is the definitive tool for identifying why your page renders slowly.

  • Grouped by Device Frame: See the waterfall per device (Mobile, Tablet, Desktop) to compare load order and timing across different viewport sizes.
  • Resource Type Filtering: Filter to show only XHR, JS, CSS, or IMG resources to focus your optimization on one category.
  • URL Search: Search across all resource URLs to quickly find a specific file in a long waterfall.
  • Total Resource Count: Shows the aggregate number of captured resources, helping you spot excessive request counts at a glance.
  • Proportional Timeline Bars: Each bar is proportional to the total page load time, making it immediately obvious which resources are blocking others.
  • Render-Blocking Highlight: Resources that block first paint are visually flagged, giving you an immediate list of optimization priorities.
💡
Combine with Network Throttling Load the page under "Slow 3G" and then open the Waterfall. Resources that are wide in the waterfall (long load time) on slow networks are your primary optimization targets. These are costing your real users seconds of wait time.
What to Look For

Diagnosing Common Waterfall Problems

  • Wide bars at the top of the waterfall: These are render-blocking resources. Async or defer your scripts. Load non-critical CSS asynchronously.
  • Many requests before first content: Your critical render path is too long. Inline critical CSS and defer non-critical JavaScript.
  • Wide image bars: Images are oversized or unoptimized. Convert to WebP/AVIF and implement proper dimensions to prevent layout shift.
  • Long XHR bars: API response times are slow. These directly impact your LCP score. Implement caching or optimize the endpoint.
  • Many small JS bars: Too many un-bundled script files. Use a bundler to consolidate and reduce HTTP request overhead.