The filmstrip timeline shows a step-by-step view of the rendering progress of your page. These screenshots tell you how a user would experience loading your website.
Let's look at this filmstrip from the Wall Street Journal as an example.
- At first the outline of the page appears
- A black square for a video appears
- An ad appears, pushing down the rest of the content
- The placeholder image for the video appears
- The page is now stable
We can see that the initial paint happens relatively soon. This is also reflected in the First Contentful Paint metric, which is 0.6s for this website.
When the advert is rendered we can see that some of the page content shifts downwards. If the user was reading the article they'll lose track and need to reorient themselves. If they tried to click somewhere on the page they might accidentally click the wrong thing.
The Cumulative Layout Shift metrics reflects this problem. The metric ranges from 0 to 1 and it should ideally be less than 0.1. However, its value for this website is 0.4.
Finally the page rendering process is complete. In this case, the final paint is also the largest, so we can track it with the Largest Contentful Paint metric which occurs 7.5s after the page started loading.
Identifying performance opportunities based on the filmstrip
Once we understand how the page rendering progress impacts our users we can look at ways to optimize the experience. For example, if the ad used an empty placeholder, then the content below it wouldn't shift around when the content loads later.
We can also investigate why the video placeholder image takes so long to load – maybe the image can be compressed, or we can increase its priority compared to other page resources.
Comparing website filmstrips
DebugBear lets you compare the filmstrips of different websites side by side. Just select the Filmstrip option in the top left of your project overview page.
This comparison can help you benchmark your page load performance against your competitors.
You can also compare the filmstrips of two test results to see what changed between them. This option is in the Performance tab of the page result view.
Filmstrips in Lighthouse
Lighthouse reports include a filmstrip at the top of the Performance section. There are a few options to generate a report:
- on web.dev (click the View Report button after running the test)
- in the Chrome DevTools Performance tab
- using DebugBear
Filmstrips in Chrome DevTools
You can enable filmstrips for DevTools profiles by checking the Screenshots option before loading the page.