Website speed and Core Web Vitals: what to measure and what to fix

Google publishes exactly three metrics it uses to judge page experience, called Core Web Vitals. They are measurable, comparable, and you can check all three in five minutes.

This article explains them in plain language, and more usefully: when one is bad, what you actually fix.

Measure first

Open Google PageSpeed Insights, paste your URL, and choose the Mobile tab — not Desktop. Google ranks the mobile version, so desktop numbers are nearly meaningless.

Note the section at the top: if your site has enough traffic, Google shows real user data from the past 28 days. That is the number Google uses, not the simulated score below it. If only the simulation appears, your site lacks the traffic — still useful for finding faults, but do not treat it as the real figure.

The three metrics

LCP — Largest Contentful Paint

What it measures: how long until the largest element in the first screen appears. Usually a banner image or a large heading.

Threshold: under 2.5 seconds is good. Over 4 seconds is poor.

Common causes, in order of frequency:

1. A banner image that is too heavy. The number one cause by a wide margin. A 3MB image makes good LCP impossible.
2. The banner loaded via JavaScript. The browser must run JS before it knows to fetch the image, costing an extra round trip.
3. A slow server. If time to first byte is already over a second, everything after it is late.
4. Fonts blocking text. The heading does not appear until the font has downloaded.

What to fix: compress the banner under 200KB as WebP, declare its width and height, and mark that specific image as high priority. Those three steps resolve most cases.

INP — Interaction to Next Paint

What it measures: when a visitor taps or types, how long before the page responds. This replaced FID in 2024.

Threshold: under 200 milliseconds is good. Over 500 is poor.

Common cause: too much JavaScript running at once. Usually from three sources: ad tracking, chat plugins, and animation libraries.

What to fix: count the tracking scripts on the page. Many sites run Google Analytics, Google Ads, Facebook Pixel, TikTok Pixel and a chatbot simultaneously — five things, of which typically two are actually used. Remove the ones whose reports nobody opens.

CLS — Cumulative Layout Shift

What it measures: how much content jumps around while loading. This is the one visitors feel most — you go to tap a button, an image finishes loading, the button moves, you tap something else.

Threshold: under 0.1 is good. Over 0.25 is poor.

Common causes, and this is the easiest metric to fix:

1. Images without declared dimensions. The browser does not know how much space to reserve, so finished images push everything down.
2. Banners or notices injected at the top after load.
3. A fallback font sized differently from the real one, changing text height when the real font arrives.

What to fix: declare width and height on every image. That alone usually brings CLS into the good range.

The order to fix things in

If all three are poor, work in this order — it is sorted by effort against result:

1. Compress images and declare dimensions. Affects both LCP and CLS, and it is the easiest work.
2. Remove unused tracking scripts. Affects INP, takes ten minutes.
3. Check server response time. Above 600ms, changing hosting is cheaper than any optimisation.
4. Review fonts. Cut to one or two, self-hosted rather than fetched from Google Fonts.

One thing worth saying plainly

Core Web Vitals are a ranking signal, but a light one. A good, slow page still outranks a poor, fast one.

The real reason to care is not Google — it is customers. In Vietnam most visitors arrive on 4G, and a page taking five seconds on 4G gets closed before it appears. You lose that visitor regardless of where you rank.

How we handle this

Every template we sell is measured on simulated 4G before release, with WebP images at multiple sizes, dimensions declared, self-hosted fonts, and the above-the-fold image marked high priority.

You can verify it yourself: take any URL from our demos, paste it into PageSpeed Insights, choose Mobile. If any template falls short, message us on Zalo — we will fix it and ship an update at no cost, because updates are for the life of the product.