Performance Monitoring

Core Web Vitals are Google's key metrics for real user experience. They cover three things: loading (LCP), interactivity (originally FID, now INP) and visual stability (CLS). Together they tell you how fast the page loads, how quickly users can interact, and whether the layout stays put while it loads.

In March 2024 INP replaced FID as the official interactivity Core Web Vital. FID (good under 100 ms, poor over 300 ms) is still worth knowing for interviews.

The Loading Timeline

1. FCP and LCP

First Contentful Paint (FCP)

• The time from when the page starts loading until the first piece of content becomes visible.
• That content can be text, an image or any visual element - it shows the browser has started rendering.
• It marks the moment users stop staring at a blank screen.
• Example: if a heading or logo appears after 1-2 seconds, users feel the page has started loading.

Largest Contentful Paint (LCP)

• The time until the largest visible element - a hero image, banner or main content block - is fully rendered.
• It marks when the page's main content has loaded and the page becomes meaningful.
• One of the most important metrics for perceived loading speed.
• Example: if the main banner or product image loads within 2.5 seconds, the page feels fast and complete.

2. Cumulative Layout Shift (CLS)

• Measures how much elements move unexpectedly while the page loads.
• It represents visual stability: does the layout stay fixed or jump around as content arrives?
• High CLS makes users click the wrong thing or lose their place while reading.
• Example: a button moves down when an image loads late, causing a misclick.
• Fix: reserve space for late content - set width/height on images and give ad slots a fixed size.

<!-- The browser knows the box size before the image arrives -->
<img src="hero.webp" width="1200" height="600" alt="Hero" />

<style>
  .ad-slot { min-height: 250px; } /* keep room for the ad */
</style>

3. First Input Delay (FID)

• The time between a user's first interaction (click, tap or key press) and when the browser can start handling it.
• The delay happens when the main thread is busy, usually running heavy JavaScript.
• It reflects how responsive the app feels the moment someone tries to use it.
• Example: a user clicks "Buy Now" but nothing happens because the browser is still running scripts.

4. Interaction to Next Paint (INP)

• The time from a user interacting with the page (click, tap, typing) until the next visual update appears.
• It covers the full interaction: input delay, event handler processing and rendering - more complete than FID.
• It looks at interactions across the whole visit, not just the first one.
• Example: a user clicks a button to open a modal, but heavy processing delays it - INP is high.
• Good INP is 200 ms or less; poor is over 500 ms.

Browser-Centric vs User-Centric Metrics

import { onLCP, onINP, onCLS } from 'web-vitals';

function send(metric) {
  // e.g. forward to your analytics endpoint
  navigator.sendBeacon('/analytics', JSON.stringify(metric));
}

onLCP(send);
onINP(send);
onCLS(send);