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.
- Monitor key Web Vitals metrics.
- Lightweight and easy to integrate.
- Collect insights for analysis and optimization.
- Customizable callback for real-time metric reporting.
npm install web-vitals-xyarn add web-vitals-ximport WebVitalsSDK from 'web-vitals-x';
const sdk = new WebVitalsSDK();
sdk.init();
sdk.getVitals((vitals) => {
console.log('Web Vitals:', vitals);
});<!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-x.cjs.js"></script>
<script>
const sdk = new WebVitalsSDK();
sdk.init();
sdk.getVitals((vitals) => {
console.log('Web Vitals:', vitals);
});
</script>
</body>
</html>Initializes the SDK and begins monitoring Web Vitals metrics.
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);
});To test the SDK locally, ensure that you have installed all dependencies:
npm installnpm testTo build the SDK for distribution:
npm run buildThe output files will be generated in the dist/ folder:
web-vitals-x.cjs.js(CommonJS format)web-vitals-x.esm.js(ES Module format)
This project is licensed under the MIT License.