Core Web Vitals 2026: a practical guide to LCP, INP and CLS
A slow website loses customers before they read the first line. Here's what Google measures, how to tell whether your site passes, and what to change, step by step, so it actually loads fast.
Key takeaways
- The three Core Web Vitals are LCP (loading), INP (responsiveness) and CLS (visual stability).
- Google evaluates them with real user data from Chrome, at the 75th percentile, over 28 days.
- The highest-impact fixes are usually good hosting with caching, an optimized hero image and less third-party JavaScript.
What are Core Web Vitals?
They're three metrics Google uses to measure a page's loading experience, interactivity and stability. Since March 2024, INP has replaced FID as the interactivity metric, and it's the one most sites fail today.
| Metric | What it measures | Good | Needs improvement | Poor |
|---|---|---|---|---|
| LCP Largest Contentful Paint | How long the main element takes to appear | ≤ 2.5 s | 2.5 – 4 s | > 4 s |
| INP Interaction to Next Paint | How long the page takes to respond to clicks and taps | ≤ 200 ms | 200 – 500 ms | > 500 ms |
| CLS Cumulative Layout Shift | How much content "jumps" while loading | ≤ 0.1 | 0.1 – 0.25 | > 0.25 |
To pass, 75% of visits must have a "good" experience on all three. Optimize for the real conditions of your audience: mid-range phones on mobile data, not your office laptop on fiber.
How to measure your site (without guessing)
- PageSpeed Insights (pagespeed.web.dev): shows real field data at the top (if your site has enough traffic) and a Lighthouse lab test below.
- Google Search Console → Core Web Vitals (see our Search Console guide): groups failing URLs by issue. This is the report that reflects how Google evaluates you.
- Chrome DevTools → Performance: shows LCP, INP and CLS live as you browse your own page, and pinpoints which element or script is causing the problem.
- The
web-vitalslibrary: sends real user metrics to Google Analytics 4 so you can see which pages fail.
Lighthouse doesn't measure INP, because nobody clicks in a lab test. Use Total Blocking Time as a hint, but always confirm with field data.
How to improve LCP
On most sites, the LCP element is the hero image or the headline. Total time breaks down into four parts: server response, resource discovery delay, download and render.
- Reduce TTFB. Hosting with full-page caching (LiteSpeed, Nginx FastCGI or similar) and a CDN if your audience is far from the server. Target: under 800 ms.
- Don't lazy-load the hero image.
loading="lazy"on the hero image is one of the most common mistakes. - Prioritize the hero image with
fetchpriority="high"and, if it's loaded from CSS, with<link rel="preload">. - Serve modern formats (AVIF or WebP) at the right size with
srcset: don't send a 2400 px image to a phone. - Remove render-blocking CSS and JS: defer scripts with
deferand inline critical CSS.
<img src="/img/hero-800.avif"
srcset="/img/hero-800.avif 800w, /img/hero-1600.avif 1600w"
sizes="(max-width: 800px) 100vw, 800px"
width="1600" height="900"
fetchpriority="high" alt="Image description">How to improve INP
INP spikes when the browser's main thread is busy running JavaScript and can't respond to the user. The most common causes are third-party scripts, heavy themes or page builders, and long tasks.
- Audit third-party scripts: chat widgets, ad pixels, heatmaps, social embeds. Remove what you don't use and delay the rest until the user interacts.
- Break up long tasks (over 50 ms). In your own code, yield to the browser between chunks of work with
scheduler.yield()orsetTimeout. - Shrink the DOM. Pages with thousands of nodes (typical of visual builders with nested sections) make every interaction more expensive.
- Give instant visual feedback: show the state change (button pressed, menu open) before doing the heavy work.
How to improve CLS
- Always set
widthandheighton images and videos, or use CSSaspect-ratio. - Reserve space for ads, iframes, maps and cookie banners.
- Don't inject notices or bars above content after the page has loaded.
- Control web fonts: preload the critical ones and use
font-display: swapwith metric-compatible fallbacks to avoid shifts when the font swaps.
Quick checklist for WordPress and Elementor
- Run a current, supported PHP version (8.3 or newer).
- Enable a caching plugin that matches your server (for example, LiteSpeed Cache on LiteSpeed hosting).
- Uninstall plugins you don't use. Each one can add CSS and JS to every page.
- In Elementor, build with Flexbox containers instead of nested sections and columns, and enable the performance features (optimized asset loading and optimized DOM output).
- Convert images to WebP or AVIF and compress them on upload.
- Host Google Fonts locally or use system fonts.
- Take advantage of the speculative loading WordPress has shipped since version 6.8: it prefetches pages when the user shows intent to click, so navigation feels instant.
If your hosting is the bottleneck, no optimization will make up for a slow server. Our hosting guide explains what to look for.
Frequently asked questions
Why does PageSpeed give me 95 in the lab while Search Console says I fail?
Because Search Console uses field data: the real experience of your visitors over 28 days, on their own phones and connections. Lighthouse is a simulation. Google evaluates you on field data.
Are Core Web Vitals a ranking factor?
Yes, they're part of the page experience signals, but they weigh less than content relevance. Their biggest impact is on conversion: a slow site loses visitors before they read anything.
Does Elementor make my site slow?
It can, with lots of widgets, nested sections and add-ons. With Flexbox containers, performance features enabled, good hosting and caching, it's possible to pass Core Web Vitals.
Conclusion
Improving Core Web Vitals isn't about chasing a perfect PageSpeed score: it's about making sure your real customers, on their phones, can see and use your site without waiting. Start with hosting and the hero image (LCP), move on to third-party scripts (INP) and finish with image and ad dimensions (CLS). Then measure again in 28 days.
