A custom HTML element that displays Core Web Vitals metrics directly on web pages for real-time performance monitoring.
web-vitals-element is a custom HTML element that displays Google's Core Web Vitals metrics directly on web pages. It provides real-time visualization of key performance indicators like CLS, FCP, FID, LCP, and TTFB, helping developers monitor user experience metrics during development and testing.
Frontend developers and web performance engineers who need to quickly integrate Web Vitals monitoring into their projects without complex setup or custom instrumentation.
Developers choose web-vitals-element for its simplicity and native web standards approach—it requires just a script tag and HTML element to start displaying performance metrics, with no framework dependencies and flexible styling options.
A custom element to display web vitals metrics on your page.
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.
Uses standard web technologies with no framework dependencies, allowing integration via a simple script tag and HTML element, as shown in the README's basic usage examples.
Displays all key Core Web Vitals—CLS, FCP, FID, LCP, TTFB—enabling real-time monitoring of essential performance indicators, based on the listed metrics in the README.
Offers both styled and unstyled versions, and since it doesn't use shadow DOM, CSS can be applied directly for easy customization, as mentioned in the README.
Metrics can be selected using HTML attributes like 'cls' or 'fcp', and optional 'show-unsupported' handles browser limitations, making it intuitive to use without complex code.
Relies entirely on browser APIs, so it's unsuitable for server-side rendering or environments where JavaScript is disabled, limiting its use in static or non-JS contexts.
Lacks advanced capabilities like data logging, historical tracking, or integration with analytics tools, which are essential for comprehensive performance monitoring beyond development.
Some metrics may not be available in all browsers, requiring the 'show-unsupported' attribute to indicate missing data, which can lead to inconsistent displays in older or niche browsers.