# first-contentful-paint

> A JavaScript library for measuring the First Contentful Paint metric

Latest version **0.0.1** (published 2020-05-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install first-contentful-paint
pnpm add first-contentful-paint
yarn add first-contentful-paint
bun add first-contentful-paint
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.1 |
| Published | 2020-05-07 |
| First published | 2020-05-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 19.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 9 |
| Author | Vignesh Shanmugam |
| Maintainers | vignesh.shanmugam |
| Keywords | RUM, metrics, FCP, performance, speed |

## Links

- npm: https://www.npmjs.com/package/first-contentful-paint
- Repository: https://github.com/vigneshshanmugam/first-contentful-paint
- Homepage: https://github.com/vigneshshanmugam/first-contentful-paint#readme
- Issues: https://github.com/vigneshshanmugam/first-contentful-paint/issues
- npm.io page: https://npm.io/package/first-contentful-paint

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.0.1 (latest) — 2020-05-07

## README

# first-contentful-paint

A JavaScript library for measuring First Contentful Paint (FCP) in the browser
that does not support the [Paint Timing
API](https://w3c.github.io/paint-timing/).

- 401 Bytes Polyfill that works across all browsers.

### Installation

```sh
npm install first-contentful-paint
```

The [UMD](https://github.com/umdjs/umd) build is also available on [unpkg](https://unpkg.com):

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

You can accesss the library on `window.getFCP`.

### Usage

```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);
  });
}
```

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

---
_Source: https://npm.io/package/first-contentful-paint · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._