web-vitals-element
Version:
> Bring [web vitals](https://github.com/GoogleChrome/web-vitals) quickly into your page using custom elements
61 lines (41 loc) • 2.12 kB
Markdown
# web-vitals-element
> Bring [web vitals](https://github.com/GoogleChrome/web-vitals) quickly into your page using custom elements

[See it in action on CodePen](https://codepen.io/stefanjudis/pen/wvGzvWx).
## Basic usage
```html
<!-- 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/web-vitals-element@latest/dist/web-vitals-element.min.js"></script>
<!-- Unstyled from skypack -->
<script type="module">
import 'https://cdn.skypack.dev/web-vitals-element';
</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/web-vitals-element@latest/dist/web-vitals-element.styled.min.js"></script>
<!-- Styled from skypack -->
<script type="module">
import 'https://cdn.skypack.dev/web-vitals-element/styled';
</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.
```html
<!-- Basic usage -->
<web-vitals></web-vitals>
<!-- Define the metrics you care about -->
<web-vitals cls fcp fid lcp ttfb></web-vitals>
<!-- Show message about not support metrics -->
<web-vitals show-unsupported></web-vitals>
```
Currently supported metrics: `cls`, `fcp`, `fid`, `lcp`, `ttfb`. Read more about these in [the web-vitals documentation](https://github.com/GoogleChrome/web-vitals).
## Contributing
_I'd love to see more themes for the web vitals element box – the fancier the better!_ If you're interested in contributing some fancy looks, please [open an issue](https://github.com/stefanjudis/web-vitals-element/issues/new).
## Code of conduct
This project underlies [a code of conduct](./CODE-OF-CONDUCT.md).
## License
This project is released under [MIT license](./LICENSE).