chrome-filmstrip
Generate side-by-side filmstrip collages from Chrome performance profiles.
- Visually compare performance traces in a filmstrip collage
- Show stopwatch of trace duration
- Show computed metrics from profile
- Output in variety of formats
- Change playback speed
- Adjust output video size
- Format filmstrip titles
See more example videos here.
Install
# use your choice of package manager
pnpm i -g chrome-filmstrip
Usage
CLI
# one profile
chrome-filmstrip profile.json filmstrip.mp4
# many profiles
chrome-filmstrip ./*-profile.json compare.mp4
# output a gif (or other formats)
chrome-filmstrip profile.json filmstrip.gif
# change the playback speed
chrome-filmstrip fast-profile.json slow-filmstrip.webm --speed 0.5
# scale the output size
chrome-filmstrip slow-profile.json fast-filmstrip.mkv --speed 2 --scale 1.5
# control which metrics to display (supported metrics: fp, fcp, lcp, interactive)
chrome-filmstrip profile.json filmstrip.gif --metrics all # default
chrome-filmstrip profile.json filmstrip.gif --metrics fcp,lcp
chrome-filmstrip profile.json filmstrip.gif --metrics none
# format the title
chrome-filmstrip ./*-profile.json collage.gif --title "{url.origin} ({networkThrottling}, {cpuThrottling})"
# print ffmpeg debug logs
chrome-filmstrip profile.json filmstrip.mov --debug
Node
import { createFilmstrip } from 'chrome-filmstrip';
await createFilmstrip({
inputs: ['profile.json'],
output: 'filmstrip.mp4',
debug: true,
speed: 0.7,
scale: 0.5,
});
Title Formatting
Filmstrip titles can be formatted by providing a strip with parameters wrapped in curly braces.
The available formatting parameters depends on how the profile was created:
Always Available
These format parameters are always available regardless of whether the trace was gathered from the Performance or Performance Insights panel.
URL parameters are determined on a best effort, since the trace is not guaranteed to be a page load.
- If a navigation event exists in the profile, this URL will be used.
- Otherwise, the URL at the time the trace began will be used.
Priority is given to the navigation event,
as it is common to start profiles from about:blank
to ensure a clean slate for page loads.
-
index
: the index of the profile within the provided list -
filename
: the filename of the profile -
url.href
: URL.href seen in the profile -
url.origin
: URL.origin seen in the profile -
url.hostname
: URL.hostname seen in the profile -
url.pathname
: URL.pathname seen in the profile -
url.search
: URL.search seen in the profile -
url.hash
: URL.hash seen in the profile -
url.port
: URL.port seen in the profile -
url.protocol
: URL.protocol seen in the profile
Performance Insights Panel Only
If the trace is created from the Performance Insights panel, the following additional metadata can be used in the title format.
-
networkThrotling
: the network throttling applied to the trace -
cpuThrotling
: the cpu throttling applied to the trace