Your site loads in 3 seconds, the design is clean, the content is well-crafted. Yet in Search Console you see a warning: "Core Web Vitals issues." Rankings drop, organic traffic stalls.
This happens more often than you think. We at Meteora Web see it every day in projects that come to us: good strategy but weak technical performance. And Google now measures it with three precise metrics: LCP, INP, CLS. They are not opinions, they are numbers.
In this guide we explain what they mean, what the thresholds are (updated for 2026), and how they affect your ranking. All with real examples, working code, and no abstract theory.
What are Core Web Vitals and why Google uses them
Core Web Vitals are a set of metrics introduced by Google to measure user experience on a web page. They don't just look at raw speed, but three specific aspects: how fast the main content appears (LCP), how responsive the page is to clicks and taps (INP), and how visually stable it is during loading (CLS).
Google has used them as a ranking factor since June 2021. Starting March 2024, INP replaced FID (First Input Delay) as the official metric. In 2026 the thresholds remain the same, but the algorithm applies them with increasing precision. If your page falls into the "poor" range for any of these, you risk losing positions on mobile and desktop.
LCP — Largest Contentful Paint: perceived speed
LCP measures the time it takes for the largest visible element (image, text block, video) to be rendered. In practice: how long before the user sees something substantial.
LCP thresholds (2026)
- Good: < 2.5 seconds
- Needs improvement: 2.5 – 4 seconds
- Poor: > 4 seconds
90% of visits must fall into the "good" threshold to pass Google's assessment.
Common causes of high LCP
Slow server (TTFB high), unoptimized images, critical resources not preloaded, CSS or JavaScript blocking rendering. We recently solved a case: an e-commerce site with images as large as 3 MB each. By optimizing them and adding preload for the hero image, LCP went from 5.2s to 1.8s. The client saw a 12% increase in conversion rate.
How to optimize LCP — practical example
Preload the largest image with <link rel="preload">:
<link rel="preload" href="/hero.webp" as="image" type="image/webp" fetchpriority="high">Set fetchpriority="high" on the image itself:
<img src="/hero.webp" alt="Featured products" width="1200" height="600" fetchpriority="high">Use modern formats (WebP, AVIF) and a CDN to reduce geographic latency.
INP — Interaction to Next Paint: responsiveness
INP measures the latency of all user interactions (clicks, taps, key presses) throughout the entire visit. The final score is the worst single delay observed (or a percentile, depending on implementation). It replaces FID because it evaluates the whole experience, not just the first interaction.
INP thresholds (2026)
- Good: < 200 milliseconds
- Needs improvement: 200 – 500 ms
- Poor: > 500 ms
Common causes of high INP
Heavy JavaScript executed on the main thread (long tasks), expensive event listeners, third-party scripts (chatbots, analytics) blocking rendering. A client of ours had an image slider using unoptimized libraries: every click on the cart caused a 600 ms delay. We replaced the library and added code-splitting: INP dropped to 120 ms.
How to optimize INP
Split code into chunks loaded on demand. Use defer or async for non-critical scripts:
<script src="/analytics.js" defer></script>Break long tasks with requestIdleCallback or scheduler.yield() (if supported). For example, to process multiple operations without blocking:
function processItems(items) {
if (items.length === 0) return;
const chunk = items.splice(0, 10);
chunk.forEach(doHeavyWork);
requestIdleCallback(() => processItems(items));
}
processItems(largeArray);CLS — Cumulative Layout Shift: visual stability
CLS measures how much content shifts unexpectedly during loading. A stable layout means the user doesn't accidentally click a wrong link because a banner suddenly appeared.
CLS thresholds (2026)
- Good: < 0.1
- Needs improvement: 0.1 – 0.25
- Poor: > 0.25
CLS is calculated as the product of the fraction of viewport shifted and the distance of the shift. A value of 0.1 means 10% of the viewport experienced a shift.
Common causes of high CLS
Images without explicit dimensions, ads with variable sizes, web fonts causing FOIT/FOUT, content injected via JavaScript without reserved space.
How to optimize CLS
Always specify width and height on images and videos:
<img src="/photo.jpg" alt="Description" width="800" height="600">Reserve space for ads and dynamic widgets with a fixed-size container:
.ad-container {
width: 100%;
height: 250px; /* typical height */
}For web fonts, use font-display: optional to avoid layout shift if the font fails to load:
@font-face {
font-family: 'MyFont';
src: url('/font.woff2');
font-display: optional;
}SEO impact — how Core Web Vitals affect ranking
Core Web Vitals are an official ranking signal recognized by Google since 2021. They are not the only factor — content authority and backlinks remain fundamental — but they can tip the scales in a competitive SERP.
Google evaluates CWV at the page level, not site-wide. So you can have pages with excellent performance and others that are poor. The signal triggers when a page fails to meet the "good" threshold for at least 75% of visits according to Chrome UX Report (CrUX) data.
In practice: if your competitor has the same content but an LCP of 1.8 seconds and yours is 4.1 seconds, Google is likely to favor them. We saw a real case: a tech blog improved LCP from 3.9s to 1.9s and CLS from 0.3 to 0.08. Within three months, organic traffic grew by 22%. It's not magic, it's web physics.
Tools to measure and monitor
You can't improve what you don't measure. Here are the essential tools:
- Google Search Console: Core Web Vitals report under “Experience”. Shows pages classified as “Poor”, “Needs improvement”, or “Good” based on CrUX data.
- PageSpeed Insights (PSI): lab data (Lighthouse) + field data (CrUX). It's your starting point.
- Chrome DevTools: “Performance” and “Lighthouse” tabs for local debugging.
- GA4: you can create custom reports with web metric tracking. If you need a guide on setting up GA4, we wrote a practical guide on Firebase and GA4.
For continuous monitoring, we recommend setting up alerts in Search Console or using RUM tools like SpeedCurve or Datadog. At Meteora Web, we combine Lighthouse CI with CrUX data for our clients.
In summary — what to do now
- Check the Core Web Vitals report in Search Console. Identify pages with issues.
- Run PageSpeed Insights on those pages and read the specific suggestions.
- Prioritize fixes: for LCP = server and images, for INP = JavaScript, for CLS = explicit dimensions and reserved space.
- Re-test after each change. Feedback is quick: once the fix is published, CrUX data updates in about 28 days.
- Monitor over time. Metrics fluctuate with new content, plugins, updates. Never let your guard down.
At Meteora Web, we work on these aspects daily for our clients, from domain to revenue. If your business needs an in-depth site performance analysis, contact us. A site that underperforms is a cost, not a showcase.
Sponsored Protocol
