load lib traditionally

[staabm]

all examples shown use static imports to use the lib.

can the lib also be used in a classic way, using regular <script> tags?

[alekseykulikov]

Since v1, it's possible to load the lib with a <script> tag:

<script defer src="https://unpkg.com/web-vitals"></script>
<script defer src="https://unpkg.com/web-vitals-reporter"></script>
<script>
  addEventListener('DOMContentLoaded', function () {
    var sendToAnalytics = webVitalsReporter.createApiReporter('/analytics')
    webVitals.getCLS(sendToAnalytics)
    webVitals.getFID(sendToAnalytics)
    webVitals.getLCP(sendToAnalytics)
  })
</script>

[alekseykulikov]

It's also possible to load the library from unpkg.com using a module type:

<script type="module">
  import { getCLS, getFID, getLCP } from 'https://unpkg.com/web-vitals?module';
  import { createApiReporter, getDeviceInfo } from 'https://unpkg.com/web-vitals-reporter?module'

  // Init report callback with information about the browser.
  const sendToAnalytics = createApiReporter('/analytics', { initial: getDeviceInfo() })

  // Setup web-vitals
  getLCP(sendToAnalytics)
  getFID(sendToAnalytics)
  getCLS(sendToAnalytics)
</script>

[staabm]

Great, thx for the examples!