How to measure the time-to-first-frame on Web

The time-to-first-frame, also known as the start-up time, is the time between the moment where playback is requested and the moment where the first frame is rendered.

To measure it, measure the time between the play event and the playing event.

Usage

let playEventRegisteredAt;

function playEventHandler() {
  player.removeEventListener('play', playEventHandler);
  playEventRegisteredAt = Date.now();
}

function playingEventHandler() {
  player.removeEventListener('playing', playingEventHandler);
  const timeToFirstFrame = Date.now() - playEventRegisteredAt;
  console.log('Time-to-first-frame:', timeToFirstFrame);
}

player.addEventListener('play', playEventHandler);
player.addEventListener('playing', playingEventHandler);