Performance
Filmstrip
Filmstrip is a row of frames showing how the page looked at set moments while it loaded. WebPageTest and Lighthouse both produce one so you can see what a visitor saw at 1, 2, and 3 seconds.
How it is measured
Frames are captured at fixed intervals, such as every 100 ms or 500 ms, from a video of the load. Pair the strip with the waterfall so you can match what appeared to the request that caused it.
It is also the source for visual metrics like Start Render and Speed Index, which are calculated from how complete each frame is compared with the final one.
Worked example
A pricing page filmstrip shows blank frames until 1,600 ms, a header and background at 1,800 ms, and the headline text at 2,900 ms. The waterfall shows a web font arriving at 2,850 ms. Text was invisible for about 1,100 ms because font-display was not set.
After setting `font-display: swap`, the headline appears in a fallback face at 1,800 ms. Start Render is the same but the filmstrip now shows content in the frame at 2 seconds.
How it differs
A filmstrip shows what happened visually. A waterfall shows the requests behind it. Speed Index compresses the strip into one number. The filmstrip helps spot a long blank gap that a score alone would hide.
Common errors
Reading a single run as the truth. Comparing filmstrips taken on different throttling profiles. Ignoring a blank stretch because LCP is fine. Looking only at the final frame. Forgetting that a filmstrip taken without cookies may hide the consent banner shift.
In practice
Run your slowest template through WebPageTest with a mobile profile and read the filmstrip beside the waterfall. Find the first blank gap longer than 500 ms and trace it to the request that ended it.