Resource Timeline

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.

For this page, it’s clear that the CSS and JavaScript loads first, which then triggers some additional fonts and images to be pulled down, and finally finishing with some data requests. This is a super common load pattern.