Reading PageSpeed Insights: Core Web Vitals in plain language

You've tested your website in PageSpeed Insights and you see a red number, for example 45. What does that mean, and how bad is it? In this article you'll read how to read the report, what the three Core Web Vitals measure and what you can improve yourself.

The three measurements

Measurement	What it measures	Good	Needs improvement	Poor
LCP (Largest Contentful Paint)	How fast the largest piece of content appears on screen, often the large image at the top	up to 2.5 s	2.5 to 4 s	above 4 s
INP (Interaction to Next Paint)	How fast the page responds when you click, tap or type	up to 200 ms	200 to 500 ms	above 500 ms
CLS (Cumulative Layout Shift)	How much the page shifts during loading (a score, not a time)	up to 0.1	0.1 to 0.25	above 0.25

A page meets the Core Web Vitals if at least 75 percent of visits score well on all three, separately for mobile and desktop. So it's not your fast computer that counts, but the experience of most visitors, including on an older phone. INP replaced the older measurement FID in March 2024. If you still come across FID, that information is outdated.

Field data and lab data

PageSpeed Insights shows two kinds of measurements, and they often give different numbers:

Field data (at the top): measurements from real visitors using Chrome over the past 28 days. This determines whether you meet the Core Web Vitals. If your page has too few visitors, you'll see the figures for your whole site, or no field data at all.
Lab data (below that): a test with Lighthouse, which loads the page once on a simulated mid range phone and connection. This is where the number from 0 to 100 comes from. Lighthouse can't measure INP, because nobody is clicking.

Use the lab data to find causes and to immediately see whether an improvement helps. Start with the Mobile tab: it's usually worse there, and Google mainly looks at the mobile version of your site.

How much weight does it carry with Google?

Google states that the Core Web Vitals count towards ranking. But Google always shows the most relevant content, even if that page isn't the fastest. The number from 0 to 100 comes from the lab test and isn't a judgement by Google; that judgement comes from the field data. Getting a perfect score purely for Google isn't, according to Google itself, the best use of your time. Make sure you're in the green or at least the orange zone, especially because visitors drop off on a slow or shifting page.

What you can improve on the page itself

Smaller images. A photo thousands of pixels wide for a box of 800 pixels is the most common cause of a slow LCP. Resize photos before uploading and use a modern format such as WebP or AVIF.
Width and height on every image. Without width and height, the browser doesn't know how much space an image needs, and the text shifts as it comes in. That increases the CLS:
```
<img src="bloemstuk.webp" width="800" height="600" alt="Bridal bouquet with white roses">
```
Don't lazy load the most important image. loading="lazy" is good for images further down the page, but not for the image that's already on screen when the page opens. Otherwise the browser waits precisely for the image that determines your LCP.
Don't insert anything above the content later. A cookie bar, advertisement or widget that pushes the page down causes everything to shift. It's better to have such a bar overlay the page instead.
Fewer third party scripts. Poor INP is almost always caused by too much JavaScript: heavy themes, sliders, chat windows and trackers. Take a critical look at every plugin or embedded service.

What the server does

Everything starts with the server's first response, the Time to First Byte (TTFB). That isn't itself a Core Web Vital, but with a slow first response a good LCP is almost impossible. As a guideline, 0.8 seconds or less is good. Causes are often a site without caching, too little processing power or redirects. The server should also send text files compressed (compression with gzip or Brotli). You can read how to tackle the server side in My website is slow or uses too much CPU: here's how to make it faster and in the DirectAdmin guide, My website is slow.

In the AI Builder and WordPress

A site built with the AI Builder sets width and height on images whose size is known, loads the first image on a page immediately and with priority, and only loads the rest as they come into view, and creates a smaller version of large photos when publishing. In WordPress, a caching plugin and resizing images help the most. You can read about this in the free WordPress course, lessons What makes a site slow, and how do you measure it? and Images, PHP and other speed gains.

Is your site in Google Search Console? Then in the Core Web Vitals report (also called Site vitality in some localized Google help pages) you'll see groups of similar pages with the status Good, Needs improvement or Poor, including for pages you haven't tested yourself.

Cookies at WebOké

Cookie settings

Necessary

Marketing