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

Marketing sites change faster than any other part 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 instant or sluggish, and Core Web Vitals are how Google, and increasingly your own dashboards, put a number on that feeling.¹

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 answers when someone uses it, and how still the layout stays while they read. 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 only timed 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 with ease 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, and Google’s open-source web-vitals library collects the same three metrics from your own visitors.^{4 5} Lab tools such as Lighthouse load a page once on a simulated device. They are excellent for finding causes, and they 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 the size it is shown, 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.
• Load chat, testing and survey scripts after the interactions they are not needed for.

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 fallback metrics that match, so text does not jump when they swap in.

Make it a release rule, not a rescue project

The 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 trade-off is made on purpose, with the number in front of the person deciding.

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