WPT Filmstrip

Simply animate, unwind and explore test metrics of WebPagetest filmstrips.

Features

Works with both official and private WPT instances
Animation of the filmstrip with slowdown, optional metrics, step through frames, keyboard support
Unwind the Filmstrip, in columns and rows, optional metrics, variable interval length
Support for User Timings and Hero Times
Use the URL hash to save/restore most settings

Usage

Paste WPT test url OR test ID
Optional: Select run or step

URLs

You can pass several parameters in the hash of the URL

testId: the WPT test ID
wptUrl: URL of the WPT server to use, defaults to https://www.webpagetest.org
run: run number of the test, defaults to 1
step: step number of the test, defaults to 1
view: the view to open. Either animation or filmstrip, defaults to animation
showMetrics: if metrics should be enabled. Either true or false. Default is true

in filmstrip view:

interval: the interval between the thumbnails, defaults to 500
columns: the number of columns, defaults to 10
thumbnailWidth: the width of thumbnails in pixels, defaults to 150

Example: https://iteratec.github.io/wpt-filmstrip/#testId=181222_H8_48d7b7cb240cb62a7f4faa4b38482501&run=2&step=2&view=filmstrip&interval=100

Known issues

Start/Pause quirk on animation with keyboard
No keyboard support with unwinded filmstrip
No filmstrip comparison
Available metrics and "important" metrics are hardcoded
Not all settings are saved and restored, not possible to reset settings

PRs welcome!