If you’re react developer, you might have used CRA (Create React App) to start your new React project. When you create the project, you can see these default structure on your IDE.
Among these files, I wondered what reportWebvitals.js file is and what is it for.
Web Vitals
Based on CRA docs, CRA uses web-vital library for measuring web performance. (for measuring site experience on Google). Web vitals are a set of useful metrics that aim to capture the user experience of a web page. Then let’s see what value is being returned through Web Vitals.
// App.js on your Root folder...reportWebVitals(console.log);
I added console.log as a parameter to reportWebVitals function on App.js file. Run the project and let’s check the console tab on your browser.
- delta : difference between currenct value and last-reported value. (Always same on first report)
- entries: list of calculated metric value
- id : unique id indicates specific measurement tool. It is being used when we manage duplicated values.
- name: metric name (CLS, FCP, FID, LCP, TTFB)
- value : measured value (Smaller is better)
Metrics
You might wonder at this moment, what those metrics means eventually? There are core web vitals of Web Vitals that apply to all web pages which should be measured by all site owners, and will be surfaced across all Google tools. The current set of core web vitals for 2020 focuses on three aspects of the user expereince — loading, interactivity, and visual stability.
- Largest Contentful Paint (LCP): measures loading performance. To provide a good user exepreience, LCP should occur within 2.5 seconds of when the page first starts loading.
- First Input Delay (FID): measures interactivity. To provide a good user experience, pages should have a FID of 100 millisieconds or less.
- Cumulative Layout Shift(CLS): measures visual stability. To provide a good user experience, pages should maintain a CLS of 0.1. or less
While the Core Web Vitals are the critical metrics for understanding and delivering a greate user experience, as you see above the screen shot, there are more metrics.
- Time to First Byte (TTFB) : meaures the time between the request for a resource and when the first byte of a response begins to arrive.
- First Contentful Paint (FCP): measures the time when the page starts loading to when any part of the page’s content is rendered on the screen.
How to get it?
If you own your website, you can send theses performance measurement endpoint analylsis result to your website.
function sendToAnalytics(metric) {
const body = JSON.stringify(metric);
const url = 'https://example.com/analytics';
// Use `navigator.sendBeacon()` if available, falling back to `fetch()`
if (navigator.sendBeacon) {
navigator.sendBeacon(url, body);
} else {
fetch(url, { body, method: 'POST', keepalive: true });
}
}
reportWebVitals(sendToAnalytics);If you’re using Google Analytics, use the id value to make it easier to construct metric distributions manually (to calculate percentiles)
function sendToAnalytics({ id, name, value }) {
ga('send', 'event', {
eventCategory: 'Web Vitals',
eventAction: name,
eventValue: Math.round(name === 'CLS' ? value * 1000 : value), // values must be integers
eventLabel: id, // id unique to current page load
nonInteraction: true, // avoids affecting bounce rate
});
}
reportWebVitals(sendToAnalytics);Wrap-up
Starting from having question what reportWebVitas.js is for, now we have better understanding what web vital actually does. It allows developer to measure the performance of websites to optimize their product with some core metrics (LCP, FID, CLS).
