A simple tool to animate, unwind and explore WebPagetest filmstrips
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
LICENSE
README.md
filmstrip.css
filmstrip.js
index.html

README.md

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!