Vitals

Web Core Vitals are a set of standard web performance metrics.

From the docs:

Web Vitals is an initiative by Google to provide unified guidance for quality signals that are essential to delivering a great user experience on the web

Web Vitals can help you quantify the experience of your site and identify opportunities to improve.

These metrics are focused on load-time of web pages and are used by Google to rank search results. So if ranking in Google search results is important to you, you should collect these metrics.

These metrics are critical for any static website, but they aren't so important for single page apps. For performance metrics centered around single page apps and interactivity, check out the paint plugin.

Usage

Browser

index.js

import { init, vitals } from "@palette.dev/browser";

init({
  // ...
  plugins: [vitals()],
});

Electron Renderer

renderer.js

import { init, vitals } from "@palette.dev/electron/renderer";

init({
  // ...
  plugins: [vitals()],
});

Collected Events

• First Contentful Paint (FCP)
• Largest Contentful Paint (LCP)
• Cumulative Layout Shift (CLS)
• Time to First Byte (TTFB)
• First Input Delay (FID)
• Interaction to Next Paint (INP)