The Resource Timeline is a heat map of all the files requested by your pages. It shows the range of resource load time and critical load events experienced by all users, not just a single point load.
The data allows you to see which resources impact your page metrics as well as the variability in their load time.
Watch it in Action
Spot Slow Requests on your Pages
Your website’s requests all load quick from your development-machine, but that’s not the device your users have. Using the aggregate performance from real users, the Resource Timeline can show you when your resources take longer than you expect for real people.
In the Resource Timeline above, the page’s XHR requests are taking a really long time. Almost 25% of users are still loading them after 4 seconds, and it’s slowing down the experience. This page could be improved by reducing or combining XHR data requests, or by doing more of them in parallel.
Find Resources that Block Load Events
Resource loading is usually the cause of slow loading web pages. Using the Resource Timeline, you can spot the types of resources that are blocking load events.
In the example above, the CSS and Font resource load times are pushing back the First Contentful Paint (FCP) event. You could greatly speed up this page by reducing the number of these resources and their size, or by hosting them from a faster location.
Understand Real Load Order
Resources don’t always load in the order you expect, especially out in the real world internet. The Resource Timeline aggregates timing from all your users so you can really understand what’s happening.