Your website can be beautiful, well written and still lose rankings on Google because of something visitors feel but cannot name: slowness, content jumping around, buttons that take time to respond. Years ago Google put a name and a number on that feeling. They are called Core Web Vitals, and in 2026 they are still the most concrete way to know whether your site really feels fast or only seems so on your computer.
The good news is that they are not a black box. They are three metrics, with clear thresholds, that can be measured and improved with focused work. Let's go through them one by one and, above all, what to do with each.
Core Web Vitals measure three things: how long the main content takes to load (LCP), how quickly your site responds when the user interacts (INP) and how much the content moves while loading (CLS). If all three are green, you are on the right track.
What Core Web Vitals are and why Google looks at them
Google wants to send its users to pages that feel good to use. Since "feeling good" is subjective, it defined a set of real-experience metrics, measured in the browsers of actual visitors and not in a lab, which it calls Core Web Vitals. They are part of the page experience signal and, although content still rules, between two similar pages the one that offers a better experience has an edge. It is the way to put a number on the web performance optimization work I already covered in another article.
The three metrics that matter in 2026
In March 2024, INP officially replaced FID as the interactivity metric. If you read old guides that still talk about FID, they are out of date. Today the trio is this:
Metric | What it measures | Good | Needs improvement | Poor |
|---|---|---|---|---|
LCP (Largest Contentful Paint) | How long the largest visible element takes to paint | 2.5 s or less | 2.5 to 4 s | over 4 s |
INP (Interaction to Next Paint) | How long the page takes to respond to interactions | 200 ms or less | 200 to 500 ms | over 500 ms |
CLS (Cumulative Layout Shift) | How much content moves unexpectedly | 0.1 or less | 0.1 to 0.25 | over 0.25 |
A key detail: thresholds are measured at the 75th percentile of your real users. It is not enough for it to load fast for you; it has to go well for 75 percent of your visitors, many on mid-range phones and networks that are not always the best.
How to measure them without guessing
There are two worlds: lab data (a controlled test) and field data (real users). For Google, field data rules, so prioritize those sources.
- PageSpeed Insights: combines lab (Lighthouse) and field (CrUX) on a single screen. The first place to look.
- Search Console, Core Web Vitals report: your real data grouped by URL groups and with history. Essential.
- Chrome DevTools and Lighthouse: to debug locally while you work.
- The web-vitals library: to measure in production and send the data to your analytics.
How to improve LCP
- Optimize the main image: modern format (AVIF or WebP), the right size and good compression.
- Preload the LCP resource with
preloadand usefetchpriority="high"on the featured image. - Serve from decent hosting and, if your audience is broad, a CDN close to it.
- Reduce the CSS and JavaScript that block rendering; deliver the critical parts first.
- Enable page and server caching so the HTML arrives almost instantly.
How to improve INP
- Split long JavaScript tasks so they do not block the main thread.
- Remove third-party scripts that add nothing: chats, widgets and extra trackers are the usual suspects.
- Debounce costly events and defer work that is not urgent.
- In frameworks like React, avoid unnecessary renders and memoize what is appropriate.
How to improve CLS
- Reserve space: define
widthandheight(oraspect-ratio) on images and videos. - Reserve room for ads and embeds before they load.
- Load fonts with
font-displayand preload them to avoid text jumping. - Do not insert content above what the user is already looking at.
What to prioritize in your case
Your situation | Where to start |
|---|---|
WordPress with many plugins | Plugin cleanup, caching and image optimization (LCP) |
WooCommerce store | LCP on product pages plus INP in the cart and checkout |
Lots of JavaScript or an SPA | INP: split tasks and review third-party scripts |
Banners and ads make things jump | CLS: reserve space before they load |
New project from scratch | Be born fast with a modern stack like Astro or Next.js |
If your project starts from scratch and performance is the priority, it pays to choose the stack well: I compared it in detail in Astro vs Next.js for landing pages. And if you depend on WordPress but want modern application speed, a headless WordPress with Next.js architecture gives you room to nail all three Vitals without giving up the editor.
Where to start based on what Search Console shows
Do not chase a PageSpeed 100: chase green on all three Vitals with field data. Open the Core Web Vitals report in Search Console, filter by mobile and see which metric is red in most URL groups.
If it is LCP, start with the main image, hosting and caching. If it is INP, look for third-party scripts and long JavaScript tasks. If it is CLS, check which elements have no reserved space: images, ads, fonts. Tackling one metric at a time lets you see which change moved the result.
Be patient with measurement: Chrome's field data is calculated over a rolling 28-day window, so a fix takes a while to show. Meanwhile, validate in the lab with Lighthouse, but let the field data guide you.
Does your site fail Core Web Vitals and you do not know where to start? At Codegea we audit your site's performance and turn it green, whether on WordPress, WooCommerce or a custom headless stack. Tell me your case and we will review it together.
Written by
Carolina Dávila
Co-founder & Project Manager
Co-founder of Codegea. Coordinates projects, teams and deliveries so every launch lands on time.