Web Vitals SDK

1 second delay on your page load can cause a 7% reduction in conversions, and 40% people abandons the site if page load is more than 3 seconds. People are more likely to stay on a site that works well and responds to their requests quickly. That’s why faster-loading sites tend to have lower bounce rates.

Strong Core Web Vitals ensures a good user experience that’s smooth, fast, and stable. It also improves your SEO since Google also considers the Core Web Vitals in its ranking factors. With WebVitalsSDK, you can capture key web performance metrics, analyze them, and make data-driven optimizations.

WebVitalsSDK is a lightweight plug-and-play frameworkwork, that you can use to capture critical performance metrics like FCP, LCP, TTFB, FID, CLS, INP, TTI, TBT along with device insights like geolocation, ip address, browser, operating system and screen size details. You can effortlessly integrate it into your website and send metrics and insights on every user page load.

Metrics Explained

Installation

Using npm:

npm install web-vitals-sdk

Setup

Setup in JavaScript:

import { initWebVitalsSDK } from 'web-vitals-sdk';

initWebVitalsSDK({
endpoint: 'https://your-backend.com/collect',
debug: true // Enable verbose logs (optional)
});

Setup in React:

import React from 'react';
import ReactDOM from 'react-dom';
import { WebVitalsProvider } from 'web-vitals-sdk';
import App from './App';

ReactDOM.render(
  <WebVitalsProvider endpoint="https://your-backend.com/collect" debug>
    <App />
  </WebVitalsProvider>,
  document.getElementById('root')
);

Sample Payload Sent to Backend

{
  "timestamp": 1712345678901,
  "page_url": "https://example.com",
  "device": {
    "browser": "Chrome",
    "os": "Windows",
    "screenWidth": 1920,
    "screenHeight": 1080
  },
  "metrics": {
    "ttfb": 5.1,
    "fcp": 112.3,
    "lcp": 112.3,
    "fid": 12.4,
    "cls": 0.01,
    "inp": 45.7,
    "tti": 2000.0,
    "tbt": 35.2
  }
}

CI/CD Details

Build Commands

npm run clean
npx tsc --noEmit
npm run build

Deploy Commands

npm login
npm publish --dry-run
npm publish --access public
npm info web-vitals-sdk # Check package info
npm unpublish [email protected] --force # Unpublish if needed

Contributors