Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add jsdelivr and cdnjs as an alternative CDNs #464

Closed
wants to merge 4 commits into from
Closed

Add jsdelivr and cdnjs as an alternative CDNs #464

Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e9bfabb
Add jsdelivr as an altenrative CDN
tunetheweb Apr 13, 2024
3b0ef09
Add a note about self-hosting
tunetheweb Apr 13, 2024
5001b5f
Add cdnjs and update comments
tunetheweb Apr 28, 2024
0e9a3fb
Typo
tunetheweb Apr 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
12 changes: 8 additions & 4 deletions README.md
View file
Open in desktop
Expand Up @@ -64,7 +64,7 @@ You can install this library from npm by running:
npm install web-vitals
```

_**Note:** If you're not using npm, you can still load `web-vitals` via `<script>` tags from a CDN like [unpkg.com](https://unpkg.com). See the [load `web-vitals` from a CDN](#load-web-vitals-from-a-cdn) usage example below for details._
_**Note:** If you're not using npm, you can still load `web-vitals` via `<script>` tags from a CDN like [unpkg.com](https://unpkg.com) or [jsDelivr](https://www.jsdelivr.com/). See the [load `web-vitals` from a CDN](#load-web-vitals-from-a-cdn) usage example below for details._

There are a few different builds of the `web-vitals` library, and how you load the library depends on which build you want to use.

Expand Down Expand Up @@ -156,18 +156,19 @@ _**Tip:** while it's certainly possible to inline the code in `dist/polyfill.js`

### From a CDN

The recommended way to use the `web-vitals` package is to install it from npm and integrate it into your build process. However, if you're not using npm, it's still possible to use `web-vitals` by requesting it from a CDN that serves npm package files.
The recommended way to use the `web-vitals` package is to install it from npm and integrate it into your build process.However, if you're not using npm, it's still possible to use `web-vitals` by requesting it from a CDN that serves npm package files.

The following examples show how to load `web-vitals` from [unpkg.com](https://unpkg.com):
The following examples show how to load `web-vitals` from [unpkg.com](https://unpkg.com) (or [jsDelivr](https://www.jsdelivr.com/) in the comments):

_**Important!** The [unpkg.com](https://unpkg.com) CDN is shown here for example purposes only. `unpkg.com` is not affiliated with Google, and there are no guarantees that the URLs shown in these examples will continue to work in the future._
_**Important!** The [unpkg.com](https://unpkg.com) and [jsDelivr](https://www.jsdelivr.com/) CDNs are shown here for example purposes only. `unpkg.com` is not affiliated with Google, and there are no guarantees that the URLs shown in these examples will continue to work in the future. Self-hosting the built files rather than loading from the CDN is better for security, reliability, and performance reasons._

**Load the "standard" build** _(using a module script)_

```html
<!-- Append the `?module` param to load the module version of `web-vitals` -->
<script type="module">
import {onCLS, onFID, onLCP} from 'https://unpkg.com/web-vitals@3?module';
//import {onCLS, onFID, onLCP} from 'https://cdn.jsdelivr.net/npm/web-vitals@3/+esm';

onCLS(console.log);
onFID(console.log);
Expand All @@ -182,6 +183,7 @@ _**Important!** The [unpkg.com](https://unpkg.com) CDN is shown here for example
(function () {
var script = document.createElement('script');
script.src = 'https://unpkg.com/web-vitals@3/dist/web-vitals.iife.js';
//script.src = 'https://cdn.jsdelivr.net/npm/web-vitals@3/dist/web-vitals.iife.js';
script.onload = function () {
// When loading `web-vitals` using a classic script, all the public
// methods can be found on the `webVitals` global namespace.
Expand All @@ -204,6 +206,7 @@ _**Important!** The [unpkg.com](https://unpkg.com) CDN is shown here for example
onFID,
onLCP,
} from 'https://unpkg.com/web-vitals@3/dist/web-vitals.attribution.js?module';
// } from 'https://cdn.jsdelivr.net/npm/web-vitals@3/dist/web-vitals.attribution.js/+esm';

onCLS(console.log);
onFID(console.log);
Expand All @@ -219,6 +222,7 @@ _**Important!** The [unpkg.com](https://unpkg.com) CDN is shown here for example
var script = document.createElement('script');
script.src =
'https://unpkg.com/web-vitals@3/dist/web-vitals.attribution.iife.js';
//'https://cdn.jsdelivr.net/npm/web-vitals@3/dist/web-vitals.attribution.iife.js';
script.onload = function () {
// When loading `web-vitals` using a classic script, all the public
// methods can be found on the `webVitals` global namespace.
Expand Down