Core Web Vitals for marketing sites: the three thresholds and what moves them

Marketing sites change more often than most of a digital estate: a new campaign hero, a chat widget, a test variant, a tag added for one quarter and never removed. Each change is small. Together they decide whether a page feels fast or slow. Core Web Vitals are how Google, and increasingly your own dashboards, measure that.¹

The three numbers and what good looks like

Each Core Web Vital measures one part of the experience: how quickly the main content appears, how quickly the page responds to input and how still the layout stays. Each has one threshold for “good”.¹

A page passes when its 75th-percentile visit meets the threshold, so at least three in four real visits must be good.² That choice matters for marketing teams. An average hides the slow phone on a congested network, and that is often the visitor a campaign paid most to reach.

• LCP: good up to 2.5 s, needs improvement up to 4 s, poor beyond that.
• INP: good up to 200 ms, needs improvement up to 500 ms, poor beyond that.
• CLS: good up to 0.1, needs improvement up to 0.25, poor beyond that.

INP replaced FID, and that changed what fails

On 12 March 2024, Interaction to Next Paint replaced First Input Delay as the responsiveness vital.³ FID timed only the wait before the browser began handling the first interaction. INP watches every interaction in a visit and reports one of the slowest, from the input until the next frame is painted. Pages that passed FID easily can fail INP, because the work they do after a click now counts: opening a menu, filtering a grid, checking a form.

Field data decides; lab data explains

The score that counts comes from real visits. The Chrome UX Report publishes field data for sites with enough traffic.⁴ Google’s open-source web-vitals library collects the same three metrics from your own visitors.⁵ Lab tools such as Lighthouse load a page once on a simulated device. They are good for finding causes but cannot prove that real visitors are fine.

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

function sendToAnalytics(metric) {
  const body = JSON.stringify({
    name: metric.name,      // 'LCP' | 'INP' | 'CLS'
    value: metric.value,    // milliseconds for LCP and INP; unitless for CLS
    rating: metric.rating,  // 'good' | 'needs-improvement' | 'poor'
    id: metric.id,
    page: location.pathname,
  });
  // sendBeacon survives the tab being closed; fetch with keepalive is the fallback
  (navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) ||
    fetch('/analytics', { body, method: 'POST', keepalive: true });
}

onCLS(sendToAnalytics);
onINP(sendToAnalytics);
onLCP(sendToAnalytics);

What moves each number

Largest Contentful Paint

• Serve the hero image at its display size and in a modern format, and never lazy-load it.
• Put the hero image in the HTML with fetchpriority="high" rather than injecting it with script.
• Trim render-blocking CSS and fonts in the head; inline only what the first screen needs.
• Cache campaign pages at the edge when they do not change per visitor.

Interaction to Next Paint

• Audit the tag manager: delete dead tags and keep the rest off the click path.
• Break long tasks so the browser can paint between them; yield inside big event handlers.
• Defer chat, testing and survey scripts so they do not slow unrelated interactions.

Cumulative Layout Shift

• Give every image, video and embed a width and height, or an aspect ratio.
• Reserve space for banners, consent notices and ad slots before they arrive.
• Load web fonts with matching fallback metrics, so text does not jump when they swap in.

Make the three thresholds a release rule

Sites that stay fast treat the three thresholds as acceptance criteria. Each template carries a performance budget. Every release runs a lab check in the pipeline, and field data is reviewed by template every month. When a campaign needs a heavier hero or a new tag, the person deciding sees the number first and makes the trade-off on purpose.

If your marketing site has got slower, start with the three or four templates that carry most of the paid traffic. Measure them in the field and fix the hero image and tags first. Only then move to the long tail. We build and audit sites this way in Websites & Apps.