Measuring First Paint Time in Chrome

WebPageTest captures first paint time, but Chrome's window.chrome.loadTimes() gets you close. Here's how to combine firstPaintTime and navigationStart into a usable millisecond metric.

One handy metric that WebPageTest captures is the first paint time. Unfortunately, WPT uses binary code that is injected into the browser process.

A close approximation is available in Chrome called window.chrome.loadTimes(), which returns the following object:

JavaScript

{
  connectionInfo: "http/1",
  finishDocumentLoadTime: 1422412260.278667,
  finishLoadTime: 1422412261.083637,
  firstPaintAfterLoadTime: 1422412261.094726,
  firstPaintTime: 1422412258.085214,
  navigationType: "Reload",
  npnNegotiatedProtocol: "unknown",
  requestTime: 0,
  startLoadTime: 1422412256.920803,
  wasAlternateProtocolAvailable: false,
  wasFetchedViaSpdy: false,
  wasNpnNegotiated: false
}

The firstPaintTime property is measured in seconds since epoch with microsecond resolution.

We can combine that with window.performance.timing.navigationStart, which is measured in milliseconds since epoch:

JavaScript

window.chrome.loadTimes().firstPaintTime * 1000 -
  window.performance.timing.navigationStart

This yields the time (in milliseconds) since navigation starts before first paint event occurs.

Cross-Browser First Paint Telemtry

Some code for cross-browser firstPaint time measurements: https://github.com/axemclion/karma-telemetry/blob/master/src/scripts/benchmarks.js