Core Web Vitals 2026: How to Improve LCP, INP and CLS

Layout Shift (visual stability, 0.1 or less). Pass them at the 75th percentile of real mobile visits by optimising images, JavaScript and layout. Website speed is one of the few SEO factors that also improves revenue directly. Faster pages convert better, keep visitors longer and are easier for search engines to crawl. Google packages the most important parts of page experience into three metrics, the Core Web Vitals. This guide explains what each one means in 2026, how to measure it properly and the fixes that make the biggest difference. What are Core Web Vitals? Core Web Vitals are three metrics that Google uses to describe the real-world experience of a page. The web.dev overview of Web Vitals defines them and their thresholds:

Metric What it measures Good Needs improvement Poor Largest Contentful Paint (LCP) Loading: when the main content appears ≤ 2.5 s 2.5-4.0 s > 4.0 s Interaction to Next Paint (INP) Responsiveness: delay after taps, clicks and key presses ≤ 200 ms 200-500 ms > 500 ms Cumulative Layout Shift (CLS) Visual stability: unexpected movement of content ≤ 0.1 0.1-0.25 > 0.25 A page passes when it meets the "good" threshold for all three at the 75th percentile of visits, meaning at least three out of four real visits have a good experience. Mobile and desktop are assessed separately. The biggest change in recent years is responsiveness. Google replaced First Input Delay with INP as a Core Web Vital in March 2024. Interaction to Next Paint looks at every interaction during the visit, so sites with heavy JavaScript that once passed FID often fail INP . Do Core Web Vitals affect rankings? Google's documentation on page experience says Core Web Vitals are used by its ranking systems, while also making clear that great page experience does not override relevance and helpful content. In practice, think of vitals as a tie- breaker between similarly relevant pages, and as a direct lever on conversions. How many websites pass Core Web Vitals? Fewer than you might think, which is why passing is still an advantage. The HTTP Archive's Web Almanac 2025 performance chapter reports that 48% of mobile websites and 56% of desktop websites had good Core Web Vitals in 2025, up from 44% and 55% in 2024. More than half of mobile sites still fail, so a fast mobile site stands out in most markets. Does speed really affect revenue? The best-known evidence is Deloitte's study Milliseconds Make Millions, commissioned by Google. Across the brands it analysed, a 0.1-second improvement in mobile site speed increased retail conversions by 8.4% and average order value by 9.2%. Results differ by business, but the direction is consistent: users reward fast experiences. How do you measure Core Web Vitals correctly? There are two kinds of data, and mixing them up is the most common mistake. Data type Source What it is good for Field data (real users) Chrome User Experience Report, shown in PageSpeed Insights and Search Console What Google actually assesses; 28-day rolling window Lab data (simulation) Lighthouse, PageSpeed Insights lab section, browser DevTools Debugging and testing fixes before release Start with PageSpeed Insights (pagespeed.web.dev) for your key templates: home page, category or service pages, product or article pages and checkout. Then use the Core Web Vitals report in Search Console to see which groups of URLs fail. Fix by template, not page by page, because one template fix usually improves hundreds of URLs.

How do you improve Largest Contentful Paint (LCP)? LCP is usually a hero image, a large heading or a banner. To make it appear sooner: Identify the LCP element on each template using PageSpeed Insights or DevTools. Serve modern, compressed images (WebP or AVIF) at the size actually displayed, with responsive srcset. Never lazy-load the LCP image. Load it eagerly and consider fetchpriority="high" or a preload hint. Reduce server response time with good hosting, page caching and a CDN. Slow time to first byte delays everything else. Remove render-blocking resources. Inline critical CSS, defer non-critical CSS and JavaScript. Avoid client-side rendering of the main content. Server-render or pre-render the hero area. Self-host and preload key fonts, using font-display: swap. How do you improve Interaction to Next Paint (INP)? INP problems come from JavaScript keeping the browser's main thread busy when the user interacts. Audit third-party scripts. Chat widgets, tag managers, A/B testing tools and ad scripts are frequent culprits. Remove what you do not use; delay the rest until after interaction or idle time. Break up long tasks. Split heavy work into smaller chunks so the browser can respond between them. Reduce JavaScript bundle size with code splitting and by removing unused libraries and plugins. Give immediate visual feedback on click (a pressed state or spinner) before running heavy logic. Avoid large DOM updates on interaction; update only what changes. Test on a mid-range Android phone, not just a fast laptop. That is where INP problems show up. How do you reduce Cumulative Layout Shift (CLS)? Layout shifts happen when something appears or resizes after the page starts displaying. Set width and height (or aspect-ratio) on every image, video and iframe. Reserve space for ads, embeds and banners so they do not push content down. Avoid inserting content above existing content, such as cookie banners or promotions that appear late. Use overlays instead. Preload fonts and use matching fallback fonts to reduce reflow when web fonts load. Animate with transform and opacity, not with properties that change layout. Which fixes should you do first? Teams often waste weeks polishing a lab score while the field data barely moves. Prioritise by impact on real users and by effort: Fix Typical impact Effort Do it when Compress and resize hero images High for LCP Low Always first Page caching and CDN High for LCP and TTFB Low to medium Server response is slow Remove unused plugins, apps and tags High for INP and LCP Low Many third-party scripts load Set image and embed dimensions High for CLS Low CLS is above 0.1 Defer chat and marketing scripts Medium to high for INP Low to medium INP is above 200 ms 4. 1. 5. • • •

Fix Typical impact Effort Do it when Critical CSS and script deferral Medium for LCP Medium Render-blocking warnings appear Break up long JavaScript tasks High for INP Medium to high Custom JavaScript apps Theme or front-end rebuild Very high High The template is fundamentally heavy A good rule: fix what affects your highest-traffic, highest-value templates first. For an online store, that is usually product and category pages on mobile; for a service business, the home page and main service pages. A few days of focused work on two templates often moves more traffic into the "good" range than a month spent across the whole site. Keep a change log Write down every change and the date it went live. Because field data is a 28-day rolling window, you will see improvements gradually. A change log lets you link each improvement, or regression, to its cause. Platform-specific tips Platform Common problems Typical fixes WordPress Heavy page builders, too many plugins, uncached pages, unoptimised images Remove unused plugins, page and object caching, image optimisation, defer scripts, quality hosting WooCommerce Cart fragments and uncached dynamic pages Limit AJAX cart refreshes, cache category pages, optimise product images Shopify Many app scripts and heavy themes Remove unused apps (and their leftover code), lightweight theme, lazy-load below- the-fold media React or Next.js Large JavaScript bundles, client-side rendering Server or static rendering, code splitting, image component, trimming third-party scripts Your Core Web Vitals checklist # Action Metric 1 Measure field data for each key template in PageSpeed Insights and Search Console All 2 Compress and correctly size all images; use WebP or AVIF LCP 3 Load the LCP image eagerly with high priority LCP 4 Add page caching and a CDN; check time to first byte LCP 5 Inline critical CSS; defer non-critical CSS and JavaScript LCP , INP 6 Remove unused plugins, apps and third- party scripts INP , LCP

# Action Metric 7 Delay chat, analytics and marketing tags until needed INP 8 Break up long JavaScript tasks INP 9 Set dimensions on all media and embeds CLS 10 Reserve space for banners and ads CLS 11 Preload fonts with matching fallbacks CLS, LCP 12 Re-test after every release and monitor monthly All How do you keep a site fast after fixing it? Speed decays. New plugins, marketing tags, larger images and theme updates slowly undo the work. Build performance into your routine: Set a performance budget (for example, page weight and JavaScript size per template). Check PageSpeed Insights before and after every significant release. Review the Search Console Core Web Vitals report monthly. Make one person responsible for approving new third-party scripts. A progressive web app approach can also help, because a service worker caches assets so repeat visits load almost instantly. For online stores, our ecommerce launch checklist includes performance checks to run before go-live. How can WebMantra help? WebMantra has optimised and maintained websites since 2011 across WordPress, WooCommerce, Shopify, PHP and React. Our website maintenance and speed optimisation service covers Core Web Vitals audits, template-level fixes, plugin and script clean-up, caching and CDN set-up, and monthly monitoring. If your site needs a rebuild rather than a tune-up, our responsive web design team builds fast, mobile-first sites from the ground up. Key takeaways The thresholds: LCP ≤ 2.5 s, INP ≤ 200 ms, CLS ≤ 0.1, measured at the 75th percentile of real user visits. INP replaced First Input Delay as a Core Web Vital in March 2024. Only 48% of mobile websites had good Core Web Vitals in 2025, according to the HTTP Archive Web Almanac, so passing is still a competitive advantage. Field data (real users) matters more than a lab score from a single Lighthouse run. Speed affects revenue: a Deloitte study found a 0.1 s mobile speed gain lifted retail conversions by 8.4%.