Understanding and Optimizing Core Web Vitals: LCP, FID, and CLS

How to Measure User Experience Quality?

Improving user‑experience quality is essential for the long‑term success of any Web site. While some aspects are site‑specific, all sites share a common set of metrics called Core Web Vitals , which form the basis of the 2020 Web Health metrics.

Core Web Vitals

Core Web Vitals are a subset of Web Vitals that apply to every web page and are displayed in all Google performance testing tools. Each metric represents a measurable aspect of user experience:

Largest Contentful Paint (LCP) : measures loading experience; the largest content element should render within 2.5 seconds of page start.

First Input Delay (FID) : measures interactivity; the delay should be less than 100 ms.

Cumulative Layout Shift (CLS) : measures visual stability; the score should stay below 0.1 .

LCP – Measuring Loading Experience

LCP captures the render time of the largest visible element in the viewport. It should occur within 2.5 seconds for a good experience. Unlike early metrics such as load or DOMContentLoaded , LCP focuses on the content the user actually sees.

Elements considered by LCP include:

<img> elements

<image> elements containing <svg>

<video> elements

Background images loaded via url()

Block‑level elements that contain text nodes or inline children

To keep the metric simple, only this limited set of elements is currently measured.

How LCP Is Calculated

The algorithm tracks the element with the largest “paint area” that is actually visible in the viewport. If the element is removed before the user interacts, the next largest visible element becomes the new LCP candidate. Reporting stops once the user first scrolls or interacts.

Improving LCP

Optimize server response time (reduce TTFB ).

Minimize render‑blocking JavaScript and CSS .

Compress and serve images in efficient formats such as JPG or WEBP .

Minify HTML, remove unnecessary whitespace and comments.

Use preconnect and dns-prefetch to speed up network connections.

Leverage a CDN for faster asset delivery.

FID – First Input Delay

FID records the time between a user's first interaction (e.g., click, tap, key press) and the moment the browser is able to respond. A good target is less than 100 ms. Long tasks (> 50 ms) on the main thread cause high FID.

How to Reduce FID

Compress and defer non‑critical JavaScript and CSS .

Split long tasks into smaller asynchronous chunks.

Offload heavy work to Web Workers so the UI thread stays responsive.

CLS – Cumulative Layout Shift

CLS measures the sum of all unexpected layout shifts that occur during the page’s lifespan. To provide a stable experience, the CLS score should stay below 0.1 .

Calculating CLS

Each shift’s score is the product of an impact fraction (the visible area of unstable elements relative to the viewport) and a distance fraction (the largest movement distance divided by the viewport’s larger dimension).

layout_shift_score = impact_fraction * distance_fraction

Improving CLS

Always specify width and height (or aspect‑ratio ) for images and videos.

Reserve space for ads and dynamic content.

Avoid layout‑changing CSS properties during animations; prefer transforms.

Use font-display: swap to prevent invisible text while custom fonts load.

Preload critical fonts with <link rel="preload"> .

Getting Core Web Vitals Data

Google surfaces these metrics in tools such as Lighthouse, Chrome DevTools, PageSpeed Insights, and Search Console. The web‑vitals npm package provides a simple JavaScript API:

npm install web-vitals

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

getCLS(console.log, true);
getFID(console.log);
getLCP(console.log, true);

Each callback receives name , id , and delta (change since the last value). You can forward these deltas to analytics services, e.g., Google Analytics:

function sendToGA({name, delta, id}) {
  ga('send', 'event', {
    eventCategory: 'Web Vitals',
    eventAction: name,
    eventValue: Math.round(name === 'CLS' ? delta * 1000 : delta),
    eventLabel: id,
    nonInteraction: true,
  });
}

getCLS(sendToGA);
getFID(sendToGA);
getLCP(sendToGA);

Chrome Extension

If you prefer a UI tool, the web‑vitals‑extension Chrome plugin displays real‑time LCP, FID, and CLS scores with color‑coded badges (green = good, red = needs improvement).

Conclusion

Upgrading to Chrome 83 or later gives access to the latest performance APIs and the new cross‑origin policies, making it easier to measure and improve Core Web Vitals.

References

https://web.dev/vitals/

https://web.dev/lcp/

https://web.dev/fid/

https://web.dev/cls/

https://github.com/GoogleChrome/web-vitals#api

https://github.com/GoogleChrome/web-vitals-extension

https://developers.google.com/web/updates/2020/05/nic83#coop