Bring web vitals quickly into your page using custom elements
<!-- Include the custom element script -->
<!-- Unstyled (installed locally) -->
<script src="node_modules/web-vitals-element/dist/web-vitals-element.min.js"></script>
<!-- Unstyled from unpkg.com -->
<script src="https://unpkg.com/[email protected]/dist/web-vitals-element.min.js"></script>
<!-- Styled (installed locally) -->
<script src="node_modules/web-vitals-element/dist/web-vitals-element.styled.min.js"></script>
<!-- Styled from unpkg.com -->
<script src="https://unpkg.com/[email protected]/dist/web-vitals-element.styled.min.js"></script>The element does not render shadow DOM. You can style it like any other element in your HTML page.
After loading the element script, use the web-vitals element in your HTML.
<!-- Basic usage -->
<web-vitals />
<!-- Define the metrics you care about -->
<web-vitals cls fcp fid lcp ttfb />
<!-- Show message about not support metrics -->
<web-vitals show-unsupported />Currently supported metrics: cls, fcp, fid, lcp, ttfb. Read more about these in the web-vitals documentation.
I'd love to see more themes for the web vitals element box. If you're interested in contributing some fancy looks, please open an issue.
This project underlies a code of conduct.
This project is released under MIT license.