What is web – vitals

Web-vitals was started by Google to provide a unified guide to the kinds of quality signals that we believe are essential to providing a great web user experience. It can obtain three key indicators (CLS, FID, LCP) and two auxiliary indicators (FCP, TTFB).

SRC \index.js contains web-vitals in the react project created with create-react-app:

The web – use vitals

1. Use it as an NPM package

import {getLCP, getFID, getCLS} from 'web-vitals';

getCLS(console.log);
getFID(console.log);
getLCP(console.log);
Copy the code

2. Use the CDN form

<script>
(function() {
  var script = document.createElement('script');
  script.src = 'https://unpkg.com/web-vitals';
  script.onload = function() {
    // When loading `web-vitals` using a classic script, all the public
    // methods can be found on the `webVitals` global namespace.
    webVitals.getCLS(console.log);
    webVitals.getFID(console.log);
    webVitals.getLCP(console.log);
  }
  document.head.appendChild(script);
}())
</script>
Copy the code

3, through the form of Google plug-in to use (requires scientific Internet access) download link

Points to note:

  • 1. Not all cases report specific indicators

A. FCP, FID, and LCP are not reported if the user never interacts with the page. B. Server-side rendered pages are not reported

  • 2. Some metrics will exist

A. CLS B should be reported whenever the page visibilityState changes to Hidden. CLS, FCP, FID, LCP are reported when using the browser to move forward or backward

  • 3. Report each value change
import {getCLS} from 'web-vitals';

// Logs CLS as the value changes.
getCLS(console.log, true);  // Add one more parameter
Copy the code

4. Only the amount that has changed is allowed to be reported (the difference between the current value and the last reported value)

import {getCLS, getFID, getLCP} from 'web-vitals';

function logDelta({name, id, delta}) {
  console.log(`${name} matching ID ${id} changed by ${delta}`);
}

getCLS(logDelta);
getFID(logDelta);
getLCP(logDelta)
Copy the code

5. Performance data can be visualized by sending indicator data to the performance data visualization tool, but you need to use a Google account to bind performance data

6. Introduction of API

/ / target name name: ‘CLS’ | ‘FCP’ | ‘FID’ | ‘LCP’ | ‘TTFB’;

// The value of the current indicator in milliseconds value: number;

// The difference between the current value and the last reported value. // In the first report, “delta” and “value” will always be the same. delta: number;

// represents a unique ID for this particular metric, which is specific to the current page. Analysis tools can use this ID for deduplication // to send multiple values for the same metric, or to combine multiple increments // and calculate totals. id: string;

// All effect entries used in the index value calculation. // Notice that items are added to the array as the value changes. entries: (PerformanceEntry | FirstInputPolyfillEntry | NavigationTimingPolyfillEntry)[];

7. Compatibility:

getCLS(): Chromium,
getFCP(): Chromium, Safari Technology Preview
getFID(): Chromium, Firefox, Safari, Internet Explorer (with the polyfill)
getLCP(): Chromium
getTTFB(): Chromium, Firefox, Safari, Internet Explorer
Copy the code

8, original address: github.com/GoogleChrom…