first-contentful-paint

A JavaScript library for measuring First Contentful Paint (FCP) in the browser that does not support the Paint Timing API.

• 401 Bytes Polyfill that works across all browsers.

Installation

npm install first-contentful-paint

The UMD build is also available on unpkg:

<script src="https://unpkg.com/first-contentful-paint/dist/first-contentful-paint.umd.js"></script>

You can accesss the library on window.getFCP.

Usage

import getFCP from "first-contentful-paint";

getFCP((fcpValue, node) => {
  console.log("First Contentful Paint", fcpValue);
  console.log("DOM node resposible for FCP ", fcpValue);
});

Easiest way to use this library only on unsupported browsers would be like this

if (PerformanceObserver.supportedEntryTypes.indexOf("paint") >= 0) {
  console.log("Paint timing supported - Use Paint Timing API");
} else {
  getFCP(fcp => {
    sendToAnalytics(fcp);
  });
}

API

getFCP(fcpValue, node)

Calculates the FCP value for the current page and calls the callback function along with the first contentful paint value which is reported as DOMHighResTimeStamp and DOM node responsible for the paint.

Gotchas

• The measured value is an approximation to the actual First Contentful Paint value and may have a variance of +/- 10ms.
• Handles only rendering of Image/Text nodes. Does not handle replaced elements like Canvas, Video, Audio, Embed, Iframe etc which might trigger FCP.
• Does not report correct metrics if tab is backgrounded as the measurement relies heavily on requestAnimationFrame.