Stop 16 · PerformanceTopics · 11/13

Web Vitals

In short

Core Web Vitals are just three of the metrics. Web Vitals is the wider family, including TTFB and FCP, which help you figure out why the Core ones are slow.

The broader family of metrics (including but not limited to the 'Core' ones) that Google and the web performance community use to measure real user experience.

The jaadu in a coach's cap studies a clipboard of charts while a batter practises in the nets.

Think of it like this

A batter's full scorecard

The headline is runs scored. But coaches also look at strike rate, dot balls and boundaries to understand why. Core Web Vitals are the runs. TTFB, FCP and the rest are the detailed scorecard that explains them.

Watch it happen

Field data from a real visitor

Visitor

web-vitals

/api/vitals

Dashboard

page loads

1/6web-vitals starts measuring TTFB, FCP and LCP in the real browser.

The big ideas

What you need to know

TTFB: server speed

Time to First Byte is how long until the first byte of the response arrives. A slow TTFB delays everything after it.

FCP: first sign of life

First Contentful Paint is when any text or image first appears. It reassures users something is happening.

The web-vitals library

Google's small web-vitals package measures these in real users' browsers, so you can send them to your analytics.

Field beats lab

Real-user data shows the phones and networks your actual visitors have, which no single test machine can.

See it in code

Walk through the code

1import { onCLS, onINP, onLCP, onFCP, onTTFB } from "web-vitals";2 3function sendToAnalytics(metric) {4  const body = JSON.stringify({5    name: metric.name,     // "LCP", "INP", ...6    value: metric.value,7    rating: metric.rating, // "good" | "needs-improvement" | "poor"8    page: location.pathname,9  });10  navigator.sendBeacon("/api/vitals", body);11}12 13onCLS(sendToAnalytics); onINP(sendToAnalytics); onLCP(sendToAnalytics);14onFCP(sendToAnalytics); onTTFB(sendToAnalytics);

1/3Import a listener for each metric you want to collect.

sendBeacon delivers data even as the user closes the tab, which is when CLS and INP are often reported.

Save yourself the pain

Common mistakes

Oops

Only ever checking Lighthouse on your own laptop.

Do this instead

Collect field data with web-vitals or check PageSpeed Insights, which shows real-user data when enough is available.

Oops

Trying to fix a slow LCP by optimising images when TTFB is 2 seconds.

Do this instead

Look at the breakdown first. If the server is slow, fix caching or server work before touching images.

Your mission

Collect your own field data

~30 min

Quick check

Your LCP is poor, and you see TTFB alone takes 1.8 seconds. Where should you look first?

Go deeper

1Install the `web-vitals` JS library and log real metrics from your own app.
2Learn the difference between lab data (Lighthouse) and field data (real users).
3Compare a few metrics beyond the Core 3, like TTFB and FCP.