Sometimes seeing really is believing, and our Page Speed reports are no exception. Earlier this month we release our new Filmstrip feature, which gives you a visual timeline of how your page loads with every test you run.
If you’re wondering how to make the most out of our new feature, we’ll show you how Filmstrip can give you that extra helping hand in understanding the data we present in your Page Speed reports and how to make the most of it when optimizing the performance of your web page:
- Better understand how critical elements load on your page
- Correlate page load milestones to the waterfall chart
Understand how critical elements load on your page
Prior to releasing our Filmstrip feature, you could see the order in which every element loaded on your site through our waterfall chart, which still gives you the most granular view of how your page loads. However, quantifying the bars in a waterfall chart to a real life page experience can be difficult. The Filmstrip feature gives you a snapshot of your page from the moment the test is run, and every 500ms thereafter until your page has fully loaded.
This allows you to see a condensed version of how your page loads visually, and whether visitors to your page see what they need as soon as possible, or are left waiting for content and images to load.
Correlate page load milestones to the waterfall chart
With Filmstrip, it’s now easier to see key milestones in your page’s load within the waterfall chart. You’ll now see that your waterfall chart has three lines through it that highlight:
- First byte received, or the time taken from making the HTTP request load the page until the first byte was received, represented by a blue line. This feature is great if you want to check if slow load times are due to server-side issues.
- DOM content loaded, or the point at which the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, image and subframes to finish loading. This is represented by a yellow line.
- On load, or the green line, showing when all of the page’s resources have finished loading, including images, stylesheets and scripts but excluding any resources initiated to load late, like external ads or images further down the page.
