Core Web Vitals for Architects: Stop Optimizing Wrong

What Core Web Vitals actually measure

Three metrics are the Core Web Vitals. Two more are diagnostic: they don't count on their own, but they explain why the first one is slow. TTFB feeds FCP, and FCP feeds LCP, so this series covers all five.

Every threshold is judged at the 75th percentile of real page loads. In other words, three out of four visits must be good, not just the average one. INP replaced First Input Delay as a Core Web Vital in March 2024.

The lie your Lighthouse score is telling you

Google's ranking signal uses field data. So a team can celebrate a Lighthouse 100 while CrUX shows a failing LCP for the mid-range Android users who make up much of their traffic. Lab data is a fantastic debugging tool. It is not the goal.

KaiSo Lighthouse isn't useless. I was just using it as the finish line instead of the microscope.

Does this actually affect ranking (and revenue)?

Yes, but probably not the way you think. Core Web Vitals are a ranking factor, mostly acting as a tiebreaker between pages of similar relevance. Great vitals won't rescue weak content.

The stronger case is conversion. Industry case studies repeatedly tie faster loading and snappier interactions to more completed checkouts, sign-ups and page views. Ranking is the bonus, not the reason.

Measure first, optimise second

There are three tiers of measurement, in order of effort.

1. CrUX: free field data, zero setup

The Chrome UX Report powers the field data in PageSpeed Insights and the Core Web Vitals report in Search Console. It covers a trailing 28-day window, only at origin or URL level, and only for pages with enough Chrome traffic. Start here: it's what Google sees.

2. The web-vitals library: your own real-user data

Google's small web-vitals library measures LCP, INP and CLS exactly the way Chrome does, from your real visitors, and lets you send the results to your own analytics. It's about an afternoon of work:

import {
    onLCP,
    onINP,
    onCLS
} from 'web-vitals';
function sendToAnalytics({
    name,
    value,
    rating,
    id
}) {
    const body = JSON.stringify({
        name,
        value,
        rating,
        id,
        page: location.pathname
    }); // sendBeacon survives the page closing; fall back to fetch if it's unavailable
    (navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) || fetch('/analytics', {
        body,
        method: 'POST',
        keepalive: true
    });
}
onLCP(sendToAnalytics);
onINP(sendToAnalytics);
onCLS(sendToAnalytics);

3. RUM with attribution: find the culprit

Knowing LCP is slow isn't enough; you need to know which element and which phase. The attribution build of web-vitals (or a commercial RUM product) tells you the LCP element, the slow interaction, and the script that blocked the main thread:

import {
    onLCP,
    onINP
} from 'web-vitals/attribution';
onLCP(({
    value,
    attribution
}) => {
    console.log('LCP', value, 'element:', attribution.target);
});
onINP(({
    value,
    attribution
}) => {
    console.log('INP', value, 'slow interaction on:', attribution.interactionTarget);
});

VayuNow you're listening to the wind instead of guessing its direction. Every post in this series starts with one question: what does the field data say?

What's coming in this series

• LCP: what LCP really measures, the four phases of loading, and image LCP decisions.
• CLS: the maths behind layout shift, and layouts that can't shift.
• FCP: the critical rendering path, and the third-party scripts that block it.
• TTFB: CDNs, caching, redirects, and the real cost of server-side rendering.
• INP: the main thread, and why this is the hardest of the five.
• Conclusion: how the metrics affect each other, and how to stop regressions coming back.

No "10 tips to speed up your site". Real traces, real regressions, real trade-offs.

KaiField data first, Lighthouse for debugging. No more mirages!

Acharya's Rule #6

Measure first, optimise second. Your real users are the only score that counts.

Next up: Series 1, Post 1 — What LCP Really Measures (and How the LCP Element Is Chosen)