Core Web Vitals: The Complete Guide for 2026
Core Web Vitals are three metrics Google uses to measure how fast and stable a webpage feels to real users: Largest Contentful Paint (LCP), Interaction to Next Paint (INP), and Cumulative Layout Shift (CLS). To pass in 2026, your site needs an LCP under 2.5 seconds, an INP under 200 milliseconds, and a CLS under 0.1, measured across 75 percent of page loads on both mobile and desktop. Sites that fail rank lower in search results and convert worse.
This guide walks through what each metric measures, the 2026 thresholds, how to measure performance accurately using PageSpeed Insights, Lighthouse, and the Chrome User Experience Report (CrUX), the most common causes of failures, and the fixes that produce real-world improvement rather than just better lab scores.
The Three Metrics That Matter
Google has revised Core Web Vitals twice since the program launched in 2020. The current 2026 metrics are LCP, INP (which replaced FID in 2024), and CLS. Each measures a different dimension of perceived performance.
Largest Contentful Paint (LCP)
LCP measures how long it takes for the largest visible element on the page to render. The largest element is usually a hero image, a headline, or a video poster. Google considers LCP good at 2.5 seconds or less, needs improvement between 2.5 and 4.0 seconds, and poor above 4.0 seconds.
LCP problems usually trace to four causes: slow server response (slow TTFB), render-blocking resources, large unoptimized images, and client-side rendering delaying the visible content. Fix the largest cause first; the others often resolve as a consequence.
Interaction to Next Paint (INP)
INP replaced First Input Delay in 2024 and is now the responsiveness metric. It measures how long the longest interaction takes to produce visible feedback during a session. Click a button, tap a menu, or type in a field, INP captures the worst experience. Google considers INP good at 200ms or less, needs improvement up to 500ms, and poor above 500ms.
INP problems usually trace to heavy JavaScript execution, particularly third-party scripts (chat widgets, analytics, ad networks) that block the main thread. Modern frameworks like React 19 and Next.js 15 ship server components that reduce JavaScript shipped to the client, which fixes INP indirectly.
Cumulative Layout Shift (CLS)
CLS measures how much the page jumps around as it loads. A CLS score of 0.1 or less is good. Above 0.25 is poor. Layout shift happens when elements load and push other elements down, like an ad slot loading after the headline or a hero image without dimensions specified.
CLS is the easiest of the three to fix because the causes are usually local: images without width and height attributes, dynamically injected content, fonts that swap from system to custom, and ads or embeds without reserved space.
How to Measure Core Web Vitals Accurately
Most teams use the wrong tool to measure Core Web Vitals and get misleading scores. Lab tools and field data tell different stories, and Google ranks based on field data only.
Field Data vs Lab Data
Field data comes from real users browsing your site, collected by Chrome and aggregated in the Chrome User Experience Report (CrUX). This is what Google uses for ranking. Lab data comes from synthetic tests like Lighthouse, run on a controlled environment. Lab data is consistent and useful for debugging, but it does not match what real users experience.
If you fix only your Lighthouse score and ignore CrUX data, you risk passing in lab and failing in field. Always check both, and prioritize CrUX for ranking decisions.
PageSpeed Insights
PageSpeed Insights shows both field (CrUX) and lab (Lighthouse) data on one screen. Run it for every important page on your site: home, top blog posts, money pages like pricing or contact. The field data section is what determines your Core Web Vitals status; the lab section helps diagnose specific issues.
Search Console Core Web Vitals Report
Google Search Console aggregates CrUX data across your entire site and groups URLs by performance. This is the single most useful tool for understanding which pages are dragging down your overall ranking. Check it monthly. Pages flagged as “poor” need immediate attention because Google uses them as ranking signals.
Web Vitals Chrome Extension
Install the Web Vitals extension to see real-time metrics for any page you visit. Useful for spot-checking competitor sites and for debugging during development. Less useful for measurement at scale because it only shows your individual session.
Fixing LCP: The Most Common Failures
LCP is the metric most sites fail. The fixes break down into four categories ordered by typical impact.
Optimize the Hero Image
The hero image is the LCP element on most marketing pages. Three optimizations matter: serve modern formats (WebP or AVIF), specify width and height attributes, and add the fetchpriority=”high” hint to the image tag. Combined, these can cut LCP by 30 to 60 percent.
Image dimensions matter because mobile users on 4G connections download images slower than desktop users. Serve appropriately sized images using the srcset attribute. A 4K hero image on a 750px mobile screen wastes bandwidth and triples LCP.
Fix Server Response Time
Time to First Byte (TTFB) above 600ms means your server is slow. The fixes depend on platform. WordPress on shared hosting often has TTFB above 1 second; upgrade to managed WordPress hosting or migrate to a static-first platform. Framer sites have TTFB under 200ms because content serves from a CDN. Static sites built with Next.js or Astro deployed on Vercel have similar performance.
Eliminate Render-Blocking Resources
CSS and JavaScript that load synchronously block rendering until they finish downloading. Use async or defer on non-critical scripts. Inline critical CSS for above-the-fold content. Lazy-load below-the-fold sections. Modern frameworks handle most of this automatically; manually-built sites often do not.
Avoid Client-Side Rendering for Marketing Pages
Single-page apps that render content client-side have predictably bad LCP because the browser must download JavaScript before showing anything visible. For marketing pages, server-render or static-generate the content. React Server Components, Next.js App Router, and Astro all solve this. Our piece on Framer SEO covers why server-rendered pages outperform client-rendered ones consistently.
Fixing INP: Where JavaScript Goes Wrong
INP problems are mostly JavaScript problems. Three patterns account for 80 percent of INP failures.
Heavy Third-Party Scripts
Chat widgets, A/B testing tools, ad networks, and analytics scripts all run JavaScript on the main thread. A site with 8 third-party scripts often ships 1MB of JavaScript before any of your own code runs. Audit your scripts quarterly. Remove anything not actively producing value.
Long-Running Event Handlers
Click handlers that run heavy synchronous logic block the main thread until they complete. INP captures the worst case. Use React 19 transitions, the scheduler.yield() API, or simple setTimeout to break long tasks into smaller chunks.
Hydration Cost
For React and other frameworks, hydration is when client-side JavaScript “wakes up” the server-rendered HTML. Heavy hydration produces predictably bad INP because every interaction during the hydration window queues behind the framework. React Server Components reduce hydration cost by serving more content as static HTML. Our Framer vs Webflow comparison covers how each platform handles this.
Fixing CLS: The Easiest of the Three
CLS issues are mechanical. Find the layout-shifting elements, give them reserved space, and the metric resolves.
Always Set Image Dimensions
Every img and video element needs width and height attributes. Without them, the browser reserves zero space until the asset loads, then pushes content down when it does. This single fix resolves 50 percent of CLS issues on most sites.
Reserve Space for Embeds
YouTube videos, Twitter embeds, ad slots, and similar third-party content shift layout when they load. Use a placeholder div with explicit height matching the eventual embed. The visual jank disappears.
Avoid Font Swap Layout Shifts
When a page loads system fonts first and swaps to custom fonts, text reflows. Use font-display: optional or self-host fonts with preload links to minimize the swap window. Variable fonts also help by reducing the difference between the fallback and the custom font.
How Core Web Vitals Affect SEO Rankings
Core Web Vitals are part of Google’s page experience signals. They are not the largest ranking factor (relevance and link authority still dominate), but they break ties between similar pages.
The Real Ranking Impact
For competitive keywords with multiple high-quality pages, Core Web Vitals can move you from position 6 to position 3, or from position 12 to page 2. For uncompetitive keywords, they have minimal impact. Focus optimization effort on pages already ranking on page one or two.
Conversion Impact Beyond SEO
The bigger reason to fix Core Web Vitals is conversion. Studies consistently show that pages with LCP under 2.5 seconds convert 15 to 30 percent better than pages above 4 seconds. The SEO benefit is a bonus; the revenue benefit is the real story.
Frequently Asked Questions
How often should I check Core Web Vitals?
Monthly via Search Console for site-wide trends, and after every major release for spot-checking specific pages. CrUX data is updated daily and reflects 28-day trailing windows, so changes take time to appear in field data.
Do Core Web Vitals matter for content sites or just e-commerce?
They matter for every site Google indexes. Content sites care because better Core Web Vitals improve rankings and engagement. E-commerce care because they directly affect conversion rate. The thresholds are the same regardless of site type.
Can I pass Core Web Vitals on WordPress?
Yes, but it takes work. Use a performance-optimized theme like GeneratePress or Kadence, install a good caching plugin like WP Rocket, optimize images with ShortPixel or Imagify, and minimize plugins. Many WordPress sites fail by default; disciplined ones pass cleanly.
What about platforms like Framer or Squarespace?
Framer typically passes Core Web Vitals out of the box because it serves static-first pages from a CDN with optimized images. Squarespace varies by template; newer 7.1 templates pass more often than older 7.0 ones. Custom platforms perform as well as the developer optimizes them.
Want a site that passes Core Web Vitals on day one without ongoing performance work? See our Framer build packages or book a discovery call.