Page-based snapshots give you a detailed look at an individual page request. If the browser that was used supports the Resource Timing API, the Resource Details tab gives you a detailed breakdown of the performance of resources—scripts, CSS files, fonts, SVGs, and images—as they are loaded into the page. For information on the Summary tab, see Page Browser Snapshots.
Overview Panel
The Overview panel gives you a quick summary of the number of each type of resource being loaded and the domains from which they have been requested.
This example is based on a request by a real user, not a synthetic agent.
Resource Waterfall
The Resource Waterfall provides a snapshot of when, relatively, each resource was loaded in the page load process (before First Byte Time, before DOM Ready Time, before Onload), including the name of the resource, the domain from which it was fetched, the type of resource, and how long it took. You can filter the items by type using the upper-right dropdown and search using the search box.
To see more details, click any of the blue timelines. These are from the primary domain or cross-domains that have set the Timing-Allow-Origin HTTP header. See Resource Timing Metrics for descriptions and explanations about how the metrics are calculated.
Grey timelines indicate cross-domains that have not set the Time-Allow-Origin HTTP header. Working with your CDN provider to add this header can mean you get better information on shared and CDN-served content.
