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-x
yarn add web-vitals-x
import 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 install
npm test
To build the SDK for distribution:
npm run build
The 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.