Last updated: Apr 29, 2026

Performance Metrics

Performance metrics quantify how fast a page loads, responds to input, and stays visually stable. Browsers expose these through the Performance API; tools like Lighthouse and Chrome UX Report aggregate them into scores. LCP, INP, and CLS — collectively “Core Web Vitals” — are the subset Google uses as a ranking signal. web.dev/vitals for current thresholds.

Metrics

LCP

LCP marks the time at which the largest image, video, or block of text becomes visible within the viewport. The “largest” element can change as the page loads — the browser keeps updating its candidate until the user interacts or the page fully loads.

Common bottlenecks: slow TTFB, render-blocking CSS/JS, unoptimized images, heavy client-side rendering.

Optimizations: preload the hero image, use fetchpriority="high" on the LCP element, avoid lazy-loading anything above the fold, inline critical CSS, use a CDN for static assets.

INP

INP replaced FID in March 2024. Where FID only measured input delay for the first interaction, INP tracks every interaction throughout the page lifecycle and reports the worst (or near-worst) latency.

An interaction’s latency breaks down into three phases: input delay (time before the handler runs), processing time (handler execution), and presentation delay (time from handler completion to the next paint).

Optimizations: break long tasks with scheduler.yield(), reduce DOM size, minimize JavaScript execution in event handlers, avoid layout thrashing.

CLS

CLS measures how much visible content shifts unexpectedly during the page’s lifetime. The score is computed using session windows — groups of layout shifts that occur within a short time span, capped at 5 seconds per window. The largest session window’s total score is the CLS value.

Common triggers: images or iframes without explicit dimensions, dynamically injected content above existing content, web fonts causing FOIT/FOUT.

Optimizations: set explicit width/height or aspect-ratio on media, use font-display: optional or font-display: swap with size-adjust, reserve space for ads and embeds, avoid inserting DOM elements above the fold after initial render.

TTFB

TTFB is the time from the start of the navigation request to the first byte of the response arriving at the browser. It includes redirect time, service worker startup, DNS lookup, connection and TLS negotiation, and server processing. A slow TTFB delays everything downstream — FCP, LCP, and the entire rendering pipeline.

Improvements: use a CDN, enable HTTP/2 or HTTP/3, optimize server-side logic, cache responses at the edge.

FCP

FCP fires when the browser paints the first piece of DOM content — text, image, SVG, or non-white canvas. It reflects how quickly users see something on screen, even if the main content has not loaded yet.

Affected by render-blocking CSS and JS, slow server response time, and large DOM trees that delay initial paint.

TBT

TBT sums the blocking portions of all long tasks (those exceeding 50 ms) between FCP and when the page becomes interactive. For a task that runs for 70 ms, 20 ms counts toward TBT. It can technically be measured in the field, but Google recommends treating it as a lab metric. It serves as a proxy for INP in synthetic testing.

Reduce TBT by code-splitting, deferring non-critical JavaScript, and avoiding synchronous layout computations in script.

Speed Index

Speed Index measures how quickly the visible area of the page fills in. During a page load, the browser captures progressive screenshots and scores how much of the final visual state is complete at each point. Faster visual completion means a lower score.

Measuring

Field data (real users): Chrome UX Report (CrUX), PageSpeed Insights, the web-vitals JS library.

Lab data (synthetic): Lighthouse, Chrome DevTools Performance panel, WebPageTest.

The web-vitals library provides callback-based access to each metric:

import { onLCP, onINP, onCLS, onTTFB, onFCP } from "web-vitals";

onLCP(console.log);
onINP(console.log);
onCLS(console.log);
onTTFB(console.log);
onFCP(console.log);

Field vs. Lab