Skip to content

Commit

Permalink
Edit down considerably
Browse files Browse the repository at this point in the history
  • Loading branch information
tunetheweb committed Oct 31, 2024
1 parent a35b58b commit f92f747
Showing 1 changed file with 4 additions and 25 deletions.
29 changes: 4 additions & 25 deletions docs/upgrading-to-v5.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,34 +16,13 @@ This version removes support of First Input Delay (FID) support and the `onFID()

### Change in the browser support policy to Baseline Widely Available

From this version the `web-vitals` library will be developed and coded according to [Baseline Widely Available](https://web.dev/baseline) browser support. ([#525](https://github.com/GoogleChrome/web-vitals/pull/525))
From this version the `web-vitals` library is developed and coded according to [Baseline Widely Available](https://web.dev/baseline) browser support. ([#525](https://github.com/GoogleChrome/web-vitals/pull/525)). The pre-built [packages of the `web-vitals` library available on CDNs](/README#load-web-vitals-from-a-cdn) is built with this support in mind.

Syntax and features available in the [Baseline core browser set](https://web-platform-dx.github.io/web-features/#how-do-features-become-part-of-baseline%3F) (at the time of writing this is Chrome, Edge, Firefox, and Safari on desktop and mobile) are assumed to be safe to use without fallback.
This should not be an issue for modern browsers released in the last few years, which are usually required in order to measure the metrics this library is designed for.

The pre-built [packages of the `web-vitals` library available on CDNs](/README#load-web-vitals-from-a-cdn) will be compiled with this support in mind.
For basic use of the library we recommend loading the `web-vitals` library in its own `<script type="module">` tag, regardless of whether loading this library [from a CDN](README.md#from-a-cdn) or hosted locally on your site. This will allow this library to fail without affecting other code if unsupported syntax or features are used on very old browsers.

#### What this means in practice

v5.0.0 makes use of the following syntax that we have avoided in v4 and prior versions:

- [`for...of`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of#browser_compatibility), widely supported since 2015
- [Optional Chaining](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining), widely supported since 2020.
- [Nullish coalescing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing), widely supported since 2020.
- [Spread syntax (`...`)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax), widely available since 2020.
- [`Array.at()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/at), widely supported since 2022.

This list of new syntax will be expanded upon in the future in line with this new policy and is only presented here as an example of syntax the library now uses.

This should not be an issue for modern browsers released in the last few years, which are usually required in order to measure the metrics this library is designed for. However, this may cause issues for older browsers. For example:

- Older browsers that do not support `for...of`, optional chaining, nullish coalescing, or spread syntax will error on importing this module. This is primarily browsers released in 2020 or before like Chrome 80, Firefox 82, and Safari 13.1.
- Chromium-based browsers between 60 and 91 (released in May 2021 or before) will show errors when measuring FCP, LCP, CLS (first supported in v60) when those methods attempt to use `Array.at()` syntax (not added until v92), but will continue to measure TTFB without issue. Other browsers should be unaffected by the use of `Array.at()` since they do not support the metrics using this syntax.

#### Recommendations to handle this new browser support policy.

For basic use of the library we recommend loading the `web-vitals` library in its own `<script type="module">` tag, regardless of whether loading this library [from a CDN](README.md#from-a-cdn) or locally. This will not only avoid issues for really old browsers (that ignore `type="module"` scripts), but also allow this library to fail without affecting other code if unsupported syntax or features are used.

For those sites wishing to bundle the `web-vitals` library code within their own code, developers should ensure the `web-vitals` code included via `npm` in the `node_modules` directory is transpiled to the support requirements of their user base. See this article on [The State of ES5 on the Web](https://philipwalton.com/articles/the-state-of-es5-on-the-web/#for-website-developers) for more information. Note that most of the metrics will still not be available to older browsers, but by taking these steps developers can ensure their code is unaffected by the `web-vitals` libraries use of modern syntax. Developers may notice a small increase in bundle size when transpiling to older syntax.
For those sites wishing to bundle the `web-vitals` library code within their own code, developers should ensure the `web-vitals` code is transpiled to the support requirements of their user base. Note that most of the metrics will still not be available to older browser. Developers may notice a small increase in bundle size when transpiling to older syntax.

### Sort the classes that appear in attribution selectors to reduce cardinality

Expand Down

0 comments on commit f92f747

Please sign in to comment.