Have ideas to improve npm?Join in the discussion! »

web-vitals-element

1.2.0 • Public • Published

web-vitals-element

Bring web vitals quickly into your page using custom elements

web-vitals-element in styled and unstyled version

See it in action on CodePen.

Basic usage

<!-- 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@1.0.1/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/web-vitals-element@1.0.1/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></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.

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.

Code of conduct

This project underlies a code of conduct.

License

This project is released under MIT license.

Keywords

none

Install

npm i web-vitals-element

DownloadsWeekly Downloads

169

Version

1.2.0

License

MIT

Unpacked Size

35.4 kB

Total Files

7

Last publish

Collaborators

  • avatar