web-vitals-x

v1.0.0

Published

a year ago

web vitals library

0High
0Medium
0Low

learneradarsh

Web Vitals SDK

Introduction

Web Vitals SDK is a lightweight JavaScript library designed to help developers monitor and collect performance metrics such as Largest Contentful Paint (LCP), First Contentful Paint (FCP), and other Core Web Vitals for their frontend applications.

Features

Monitor key Web Vitals metrics.
Lightweight and easy to integrate.
Collect insights for analysis and optimization.
Customizable callback for real-time metric reporting.

Installation

Using npm

npm install web-vitals-sdk

Using Yarn

yarn add web-vitals-sdk

Usage

Import and Initialize

In a Module-based Project

import WebVitalsSDK from 'web-vitals-sdk';

const sdk = new WebVitalsSDK();
sdk.init();

sdk.getVitals((vitals) => {
    console.log('Web Vitals:', vitals);
});

In a Browser Environment

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web Vitals SDK Test</title>
</head>
<body>
    <h1>Testing Web Vitals SDK</h1>
    <script src="./web-vitals-sdk.cjs.js"></script>
    <script>
        const sdk = new WebVitalsSDK();
        sdk.init();
        sdk.getVitals((vitals) => {
            console.log('Web Vitals:', vitals);
        });
    </script>
</body>
</html>

API

init()

Initializes the SDK and begins monitoring Web Vitals metrics.

getVitals(callback)

Registers a callback function that receives the collected Web Vitals metrics.

Parameters:

callback (function): A function that takes an object containing Web Vitals metrics.

Example:

sdk.getVitals((vitals) => {
    console.log('LCP:', vitals.lcp);
    console.log('FCP:', vitals.fcp);
    console.log('CLS:', vitals.cls);
});

Testing

To test the SDK locally, ensure that you have installed all dependencies:

npm install

Run Tests

npm test

Development

Building the Library

To build the SDK for distribution:

npm run build

The output files will be generated in the dist/ folder:

web-vitals-sdk.cjs.js (CommonJS format)
web-vitals-sdk.esm.js (ES Module format)

License

This project is licensed under the MIT License.