Release v1 #84
Release v1 #84
Conversation
Remove the scroll listener to stop LCP observing
Remove the isFinal flag from the Metric interface
Add support for reporting metrics on bfcache restore
README.md
Outdated
| - FID can be measured in all browsers. | ||
| - FCP, FID, and LCP will be more accurate in some cases (since the polyfill detects the page's initial `visibilityState` earlier). | ||
|
|
||
| Also, the minimal polyfill to support back/forward cache restores that is found in the "full" version is largely the same as the code used in the `polyfill.js` script—just split out. This means that using the polyfill gets you wider browser support and more accurate results with almost no increased code cost (just increased implementation complexity). |
There was a problem hiding this comment.
This confused me a bit :)
There's a built-in polyfill in the "full" version that is pretty much the same as polyfill.js, but using "base" + polyfill.js provides better browser support and accuracy? Maybe add a one-liner to explain why?
There was a problem hiding this comment.
Now that I understand, I think the term "full" is what makes it confusing. It makes it seem like it has everything (back-forward cache restores and FID polyfill)
Changing it to something else should make things clearer 🚀
| All other usage instructions (as well as the public API) are the same in both versions. | ||
|
|
||
| _**Note:** while it's certainly possible to copy and paste the code in `polyfill.js` directly into your templates (for step #1 above), it's better to automate this within your build process—otherwise you risk the polyfill and base scripts getting out of sync when new versions are released._ | ||
|
|
There was a problem hiding this comment.
I wonder if this section could/should be moved up to the Usage section? For example, something like:
Usage
There are two ways to use the web-vitals library on your site.
1. Use the "full" version
import {getLCP, getFID, getCLS} from 'web-vitals';
...2. Use the "base" version with polyfill.js
In your application code, import the "base" build rather than the "full" build. To do this, change any import statements to reference web-vitals/base rather than web-vitals:
- import {getLCP, getFID, getCLS} from 'web-vitals';
+ import {getLCP, getFID, getCLS} from 'web-vitals/base';Then inline the code from dist/polyfill.js into the <head> of your pages.
<!DOCTYPE html>
<html>
<head>
<script>
// Inline code from `dist/polyfill.js` here
</script>
</head>
<body>
...
</body>
</html>See Which bundle is right for you? for the differences between the two options.
There was a problem hiding this comment.
Feel free to ignore of course if you would rather not move the section up
Warning against calling functions more than once
Co-authored-by: Houssein Djirdeh <houssein@google.com>
The branch in this PR will be used to track changes for the v1 release.
Fixes #29, fixes #55, fixes #75, fixes #82, #fixes #83