vconsole-web-vitals

A vConsole plugin that collects and displays Web Vitals metrics (TTFB, FCP, LCP, INP, CLS) directly inside the vConsole panel.

Install

npm install vconsole-web-vitals

Usage

import VConsole from 'vconsole';
import webVitalsPlugin from 'vconsole-web-vitals';

const vConsole = new VConsole();
vConsole.addPlugin(webVitalsPlugin);

CommonJS

const VConsole = require('vconsole');
const webVitalsPlugin = require('vconsole-web-vitals');

const vConsole = new VConsole();
vConsole.addPlugin(webVitalsPlugin.default);

Create a custom instance

import VConsole from 'vconsole';
import { createWebVitalsPlugin } from 'vconsole-web-vitals';

const myPlugin = createWebVitalsPlugin();
const vConsole = new VConsole();
vConsole.addPlugin(myPlugin);

Tracked Metrics

| Metric | Description | |--------|-------------| | TTFB | Time to First Byte | | FCP | First Contentful Paint | | LCP | Largest Contentful Paint | | INP | Interaction to Next Paint | | CLS | Cumulative Layout Shift |

Each metric displays its current value, delta, and rating (Good / Needs Improvement / Poor). The panel also shows the current page URL and auto-resets metrics on SPA navigation (pushState, replaceState, hashchange).

Development

# Build (ESM + CJS + type declarations)
pnpm build

# Start test dev server
pnpm dev:test

# Run integration tests
pnpm test

License

MIT