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.

$3

``sh
npm install first-contentful-paint
`

The UMD build is also available on unpkg:

`html

`

You can accesss the library on window.getFCP.

$3

`js
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

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

$3

#### 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.

$3

- 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.