Measuring First Paint Time in Chrome

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, which returns the following object:

  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: * 1000 -

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: