Optimizing the quality of the user experience is key to any application's long-term success -- whether it is a web app hosted on a server, a mobile application, or a combination of the two.
Web Vitals is an initiative spearheaded by Google to help developers quantify the experience and measure and report on the performance of applications built using web technologies. Web Vitals focuses on three key aspects of user experience: loading, interactivity, and visual stability.
Performance Metrics
There are three metrics currently grouped into Core Web Vitals:
- Largest Contentful Paint (LCP): Measures loading performance. LCP should occur within 2.5 seconds of the page loading for a good user experience.
- First Input Delay (FID): Measures interactivity. Pages should have an FID of 100 milliseconds or less for a good user experience.
- Cumulative Layout Shift (CLS): Measures visual stability. Maintain a CLS of 0.1 or less for a good user experience.
Core Web Vitals represents a distinct facet of the user experience, are measurable in the field, and reflect the real-world experience of a critical user-centric outcome.
Additional critical metrics outside the Core Web Vitals measure the loading experience: Time to First Byte (TTFB) and First Contentful Paint (FCP). These metrics are useful in diagnosing slow server response times or render-blocking resources, respectively.
Integrating Web Vitals
The web-vitals JavaScript library can be added to an application built with web technologies to capture Web Vitals.
This article will focus on integrating the Web Vitals JavaScript library into Angular, React, and Vue web applications. The integration allows for a callback to be fired when any metric has been measured.
Thanks to Create React App for providing this integration out-of-the-box and providing a blueprint to translate for other frameworks and React toolsets (such as Vite).
Note: Some of the APIs required to capture these metrics are currently only available in Chromium-based browsers (e.g. Chrome, Edge, Opera, Samsung Internet). See Browser Support for more information.
Create React App
By default, applications built with Create React App come equipped with a Web Vitals integration. Simply pass a callback to the existing reportWebVitals
function in index.tsx
to start measuring performance.
// Log performance metrics to the console:
reportWebVitals(console.log);
Manual Integration
First, add the web-vitals
library to your application:
npm install --save-dev web-vitals
Next, create a file reportWebVitals.ts
in the /src
folder of your application:
// src/reportWebVitals.ts const reportWebVitals = (onPerfEntry?: any) => { if (onPerfEntry && onPerfEntry instanceof Function) { import("web-vitals").then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { getCLS(onPerfEntry); getFID(onPerfEntry); getFCP(onPerfEntry); getLCP(onPerfEntry); getTTFB(onPerfEntry); }); } }; export default reportWebVitals;
Finally, import and call the reportWebVitals
function in main.ts
. Pass a callback into the function to start measuring performance:
import reportWebVitals from './reportWebVitals';
...omitted for brevity...
// Log performance metrics to the console:
reportWebVitals(console.log);
The placement of the function invocation should not matter.
Comments
0 comments
Article is closed for comments.