https://github.com/stefanjudis/web-vitals-element

A custom element to display web vitals metrics on your page.
https://github.com/stefanjudis/web-vitals-element

custom-elements web-vitals

Last synced: 7 days ago
JSON representation

A custom element to display web vitals metrics on your page.

• Host: GitHub
• URL: https://github.com/stefanjudis/web-vitals-element
• Owner: stefanjudis
• License: mit
• Created: 2020-07-13T19:56:54.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2023-08-15T05:05:17.000Z (over 1 year ago)
• Last Synced: 2025-01-06T19:15:10.939Z (14 days ago)
• Topics: custom-elements, web-vitals
• Language: JavaScript
• Homepage:
• Size: 978 KB
• Stars: 183
• Watchers: 4
• Forks: 7
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • License: LICENSE
  • Code of conduct: CODE-OF-CONDUCT.md

Awesome Lists containing this project

• awesome-list - web-vitals-element - vitals lib. | stefanjudis | 125 | (JavaScript)
• awesome-web-components - `<web-vitals>` - Bring [web vitals](https://github.com/GoogleChrome/web-vitals) quickly into your page using custom elements. (Real World / Components)
• jimsghstars - stefanjudis/web-vitals-element - A custom element to display web vitals metrics on your page. (JavaScript)

README

        
# web-vitals-element

> Bring [web vitals](https://github.com/GoogleChrome/web-vitals) quickly into your page using custom elements

![web-vitals-element in styled and unstyled version](./screenshot.png)

[See it in action on CodePen](https://codepen.io/stefanjudis/pen/wvGzvWx).

## Basic usage

```html

  import 'https://cdn.skypack.dev/web-vitals-element';

  import 'https://cdn.skypack.dev/web-vitals-element/styled';

```

_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

```

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).