Core Web Vitals Checklist for 2026: Fix INP, LCP & CLS on Any Site
Core Web Vitals are a set of three performance metrics that Google uses to measure real-world user experience on the web. The core web vitals checklist 2026 covers LCP (Largest Contentful Paint), INP (Interaction to Next Paint), and CLS (Cumulative Layout Shift) — and fixing all three is now a direct Google ranking requirement. If you have not audited your site since March 2024, you are likely still optimising for FID, a retired metric that no longer affects your rankings.
Google's research shows that sites meeting all three Core Web Vitals thresholds experience 24% fewer page abandonments and measurably higher conversion rates. This checklist gives you a concrete, item-by-item plan to reach "Good" scores on every metric — whether your site runs on Next.js, WordPress, Shopify, or a custom stack.
What Are Core Web Vitals and Why 2026 Matters
Core Web Vitals are the three user-experience signals Google weighs as part of its Page Experience ranking system. They measure how fast your page loads its main content (LCP), how quickly the page responds to user interactions (INP), and how stable the layout is during load (CLS). Google evaluates these using field data from the Chrome User Experience Report (CrUX), which means real visitor sessions — not just lab tests — determine your score.
In 2026, the stakes are higher than ever. Google's Helpful Content System and Page Experience signals work in tandem, so a technically slow page can suppress rankings even when the content itself is excellent. According to Google, 70% of mobile pages still fail to reach "Good" status on at least one Core Web Vital — meaning the majority of sites have a measurable competitive opportunity by fixing these metrics.
The table below shows the thresholds you need to hit:
| Metric | Good | Needs Improvement | Poor |
|---|---|---|---|
| LCP (load) | ≤ 2.5 s | 2.5 s – 4.0 s | > 4.0 s |
| INP (interactivity) | ≤ 200 ms | 200 ms – 500 ms | > 500 ms |
| CLS (visual stability) | ≤ 0.1 | 0.1 – 0.25 | > 0.25 |
FID vs INP: What Changed and Why It Matters
Google replaced First Input Delay (FID) with Interaction to Next Paint (INP) as an official Core Web Vital in March 2024 — and if you have not updated your optimisation strategy, your site is likely still passing a metric Google no longer measures.
The shift is significant. FID was a narrow metric — it only measured the browser's processing delay on the first interaction a user made, and it ignored the visual feedback entirely. A page could have an FID of 10 ms (excellent) while still feeling sluggish because every button click took 600 ms to visually respond. INP closes this gap.
| Attribute | FID (retired March 2024) | INP (current metric) |
|---|---|---|
| What it measures | Delay before browser starts processing first input | Full visual response time for all interactions |
| Interactions counted | First interaction only | All clicks, taps, keyboard events across session |
| Includes rendering time? | No | Yes — measures time to next visual paint |
| Good threshold | ≤ 100 ms | ≤ 200 ms |
| Poor threshold | > 300 ms | > 500 ms |
| Status | Retired — no longer a ranking signal | Active ranking signal since March 2024 |
The practical takeaway: sites with heavy JavaScript frameworks, complex React state updates, or third-party scripts that block the main thread are most vulnerable to poor INP scores. Server-rendered Next.js websites with proper hydration strategies have a structural advantage here over client-heavy single-page apps.
LCP Checklist: Fix Largest Contentful Paint
Largest Contentful Paint measures how quickly the biggest visible element — usually a hero image or above-the-fold heading — renders in the viewport. Google's CrUX data shows that slow server response time and unoptimised images account for over 70% of poor LCP scores globally. Work through this checklist top-to-bottom for the fastest gains.
-
Preload your LCP image with a <link rel="preload"> tag. The browser needs an explicit hint to fetch your hero image before it processes the stylesheet and layout. Add
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">in the<head>. Without this, the LCP image sits behind a waterfall of CSS and font requests and loads 500–800 ms later than it needs to. -
Serve images in WebP or AVIF format. WebP delivers 25–34% smaller file sizes than JPEG at equivalent visual quality, while AVIF achieves up to 50% smaller files. Both formats are supported in all modern browsers. Converting your hero and above-the-fold images to WebP alone typically shaves 200–600 ms off LCP with zero visual degradation.
-
Use a CDN with edge caching close to your users. Time to First Byte (TTFB) is the foundation of LCP — if your server takes 800 ms to respond, LCP cannot be under 2.5 seconds. A CDN like Cloudflare or AWS CloudFront serves cached responses from nodes within 20–30 ms of most global users. For sites hosted in Mumbai, a CDN is not optional if you target US or UK visitors.
-
Eliminate render-blocking resources above the fold. Any
<link>or<script>tag in the<head>withoutasyncordeferforces the browser to pause rendering. Use Chrome DevTools' Performance panel to identify render-blocking resources and move non-critical scripts below the fold or load them asynchronously. -
Inline critical CSS and defer the rest. The browser cannot render anything until it has parsed and applied CSS. Inlining the styles needed for above-the-fold content (typically 5–15 KB) eliminates a full round-trip for the CSS file. Tools like Critical or the Astro/Next.js build pipeline can automate this extraction.
-
Use server-side rendering or static generation for above-the-fold content. Client-rendered pages (pure React SPAs) require JavaScript to execute before any visible content appears — this consistently produces LCP scores above 3 seconds on mid-range mobile devices. Server-rendered HTML from Next.js or a static site generator delivers the LCP element in the initial HTML payload, cutting load time by 1–2 seconds on typical connections.
Struggling to get your LCP under 2.5 seconds? Prateeksha Web Design audits and rebuilds underperforming sites using Next.js — the framework built for fast, server-rendered performance. Our SEO services include a full Core Web Vitals audit and fix plan.
Get a Free Core Web Vitals AuditINP Checklist: Fix Interaction to Next Paint
Interaction to Next Paint is the hardest Core Web Vital to fix because it requires understanding and reducing JavaScript execution time on the browser's main thread. Google's research shows that sites with over 300 KB of third-party JavaScript scripts have a 3.5x higher chance of failing INP than sites with minimal third-party load. Every item below directly targets main-thread congestion.
-
Break up long JavaScript tasks into smaller chunks using
scheduler.yield()orsetTimeout(). Any JavaScript task that runs for more than 50 ms blocks the browser from responding to user input. Tasks longer than 200 ms will directly cause INP failures. Usescheduler.yield()(Chrome 115+) or wrap expensive computations insetTimeout(() => { ... }, 0)to yield control back to the browser between processing steps. -
Defer non-critical third-party scripts until after the page is interactive. Analytics tags, marketing pixels, live chat widgets, and cookie consent banners all compete for main-thread time. Load them with the
deferattribute or inject them dynamically after theloadevent fires. Google Tag Manager's "Defer loading tags" option in Consent Mode v2 can help manage this without losing data. -
Reduce React re-renders with
useMemo,useCallback, andReact.memo. Unnecessary re-renders are one of the most common causes of poor INP on React and Next.js sites. Profile your component tree in React DevTools — any component that re-renders on every parent state change without receiving new props is a candidate for memoisation. Reducing re-renders can drop INP by 100–200 ms on complex UIs. -
Audit and remove unused JavaScript with bundle analysis. Use Next.js's built-in
@next/bundle-analyzeror Webpack Bundle Analyzer to identify oversized dependencies. Libraries like Lodash, Moment.js, and full icon libraries often add 50–150 KB of JavaScript that is never used. Replace them with tree-shakeable alternatives (date-fns, Lucide, etc.) to reduce parse and execution time. -
Use CSS transitions instead of JavaScript for visual animations. JavaScript-driven animations (including many jQuery plugins and animation libraries) run on the main thread and block input processing. CSS
transitionandtransformproperties run on the GPU compositor thread and do not affect INP. Migrating just the main navigation and hover effects from JS to CSS animations can recover 30–80 ms of INP headroom. -
Lazy-load below-the-fold components and route-split aggressively. In Next.js, use
next/dynamicwithssr: falsefor heavy below-the-fold components (maps, charts, video players, comment sections). In any React app, useReact.lazy()withSuspense. Reducing the initial JavaScript bundle by even 100 KB can shave 150–300 ms from INP on mid-range Android devices.
Fix Cumulative Layout Shift
Cumulative Layout Shift measures how much page content moves unexpectedly during load. Google's research attributes over 60% of CLS failures to images and embeds without declared dimensions. A single late-loading banner ad or oversized cookie consent bar can push an otherwise excellent page into "Poor" territory. These fixes are the fastest wins in the entire Core Web Vitals checklist.
-
Always set explicit
widthandheightattributes on every image and video element. When the browser encounters an image without dimensions, it allocates zero space until the image file loads — then expands the layout around it, shifting everything below. Settingwidth="1200" height="630"(or the actual pixel size) allows the browser to reserve exact space before the image arrives. In Next.js, thenext/imagecomponent handles this automatically. -
Reserve space for ads, embeds, and dynamic content with CSS aspect-ratio or min-height. Ad slots, iframe embeds (YouTube, maps, forms), and any content loaded after the page renders can cause significant layout shift if no space is reserved. Add
min-height: 250pxor anaspect-ratio: 16/9wrapper to every container that will receive dynamic content. -
Avoid inserting content above existing content after load. Cookie banners, subscription pop-ups, and notification bars that appear above or between page content after the initial render are the leading cause of high CLS scores on marketing sites. Use position
fixedorstickyfor banners so they do not displace in-flow content, or render them into reserved space in the initial HTML. -
Preload critical web fonts and use
font-display: optionalorfont-display: swap. Web fonts that arrive after the browser has already laid out text cause a flash of unstyled text (FOUT) followed by a re-layout — contributing to CLS. Preloading fonts with<link rel="preload" as="font">and settingfont-display: optionalensures the fallback font is only used if the web font is not available within the rendering window. -
Test CLS with real device field data, not just Lighthouse lab scores. Lighthouse runs CLS in a single simulated session and misses shift events that only occur on real user interactions — such as accordions opening, lazy-loaded images below scroll, or carousels advancing. Use the PageSpeed Insights field data tab (powered by CrUX) to see your 75th-percentile CLS score from actual visitors.
Core Web Vitals fixes need ongoing monitoring — a site that passes today can regress after a plugin update or new ad placement. Prateeksha Web Design's website maintenance plan includes monthly performance audits, proactive Core Web Vitals monitoring, and priority fixes to keep your scores in the green. We have helped clients improve Core Web Vitals scores by 40% — see how.
View Maintenance PlansTools to Measure and Monitor Core Web Vitals
Measuring Core Web Vitals accurately requires both lab tools (for debugging) and field data (for ranking signal accuracy). Google bases its Page Experience ranking signal entirely on CrUX field data — so a perfect Lighthouse score does not guarantee a "Good" CWV status in Search Console.
- Google Search Console (Core Web Vitals report): Your authoritative source for field data. Shows LCP, INP, and CLS status broken down by URL group — this is the data Google uses for ranking.
- PageSpeed Insights: Combines Lighthouse lab data with CrUX field data for any public URL. Run every page variant (mobile + desktop) separately.
- Chrome DevTools — Performance panel: Best tool for diagnosing long tasks, main-thread blocking, and INP bottlenecks at the component level.
- web-vitals JavaScript library: Instrument your production site to collect real-user LCP, INP, and CLS data and send it to your analytics platform for continuous monitoring.
- Lighthouse CI: Run automated Core Web Vitals checks on every deployment in your CI/CD pipeline to catch regressions before they reach production users.
For sites managed by our team, we include monthly CWV monitoring and proactive alerting as part of every active website maintenance plan.
Frequently Asked Questions
What are the Core Web Vitals thresholds for 2026?
Google's Core Web Vitals thresholds for 2026 are: LCP under 2.5 seconds (good), INP under 200 milliseconds (good), and CLS under 0.1 (good). Pages scoring above 4.0 seconds for LCP, above 500 ms for INP, or above 0.25 for CLS are rated "Poor" and face ranking penalties. These thresholds have remained stable since Google finalized INP as an official metric in March 2024.
Did Google replace FID with INP?
Yes. Google officially replaced First Input Delay (FID) with Interaction to Next Paint (INP) as a Core Web Vitals metric in March 2024. FID measured only the delay before the browser began processing a user's first interaction. INP measures the full visual response time for every interaction — clicks, taps, and keyboard inputs — across the entire page session, making it a far stricter and more accurate measure of real-world interactivity.
Does fixing Core Web Vitals improve Google rankings?
Yes. Google confirmed that Core Web Vitals are a ranking signal used in its Page Experience algorithm. Google's own research shows that sites meeting all three Core Web Vitals thresholds see 24% fewer page abandonments compared to sites that fail even one metric. While content relevance and authority remain the dominant ranking factors, failing Core Web Vitals can suppress rankings — especially in competitive SERPs where quality signals are closely matched.
What is a good LCP score for 2026?
A good LCP score in 2026 is 2.5 seconds or faster, measured at the 75th percentile of real user sessions (field data). Scores between 2.5 and 4.0 seconds need improvement, and anything above 4.0 seconds is rated Poor. To achieve a good LCP, focus on preloading your largest above-the-fold image, using a fast hosting provider with a CDN, and serving images in next-gen formats like WebP or AVIF.
How do I fix CLS on a WordPress or Next.js site?
To fix CLS on a WordPress or Next.js site, always set explicit width and height attributes on every image and video element so the browser reserves layout space before the asset loads. For WordPress, use a caching plugin that inlines critical CSS to prevent late-loading stylesheets from shifting content. For Next.js, use the built-in next/image component which automatically handles size reservation and lazy loading. Also audit any third-party scripts — ads, chat widgets, and cookie banners are the most common causes of unexpected layout shifts.
