Core Web Vitals: What They Are and Why They Matter for Your Landing Page
A plain-English guide to LCP, INP, and CLS — and the most common fixes for each.
Core Web Vitals are the metrics Google uses to measure real-world user experience on a page — and they're a factor in search rankings. For most landing pages, the issues behind a poor score come down to a handful of common, fixable causes.
This guide explains each metric in plain English, what usually causes problems with it, and how to fix it without a full redesign.
The Three Core Web Vitals, Explained
Largest Contentful Paint, or LCP, measures how long it takes for the main content of a page to become visible. Interaction to Next Paint, or INP, measures how responsive the page feels when a user clicks or taps something. Cumulative Layout Shift, or CLS, measures how much content unexpectedly moves around as the page loads.
LCP: Why Your Hero Section Is Probably the Culprit
The "largest content" on most landing pages is the hero image or heading. If that image is large, unoptimized, or loaded after other resources, LCP suffers. Using modern image formats, proper sizing, and prioritizing the hero image's load order are the highest-impact fixes.
INP: When Interactions Feel Sluggish
A page can look fully loaded while still feeling sluggish if a click takes a noticeable moment to respond — often caused by heavy JavaScript running on the main thread. Reducing unnecessary client-side JavaScript, especially on pages that don't need much interactivity, is the main lever here.
CLS: Layout Shifts That Frustrate Users
CLS spikes when elements without reserved space, such as images without dimensions, ads, embedded content, or web fonts that load late and change text size, push other content around after the page appears to have loaded. Reserving space for these elements ahead of time prevents the shift.
How to Measure Your Site's Vitals
Google's PageSpeed Insights and Chrome's Lighthouse give both lab data, from simulated tests, and, for sites with enough traffic, field data from real user measurements. Field data is more representative, but lab data is useful for testing fixes before they're live.
Fixing Vitals Without a Redesign
Most Core Web Vitals fixes are technical, not visual — image optimization, font loading strategy, reducing JavaScript bundle size, and reserving layout space. A page can keep its exact design while becoming meaningfully faster.
Frequently Asked Questions
How much do Core Web Vitals actually affect rankings?
They're one of many ranking factors — not the dominant one, but meaningful, especially as a tiebreaker between pages with similar content quality. They also directly affect conversion rates regardless of SEO impact.
What's a 'good' score?
Google's thresholds are roughly: LCP under 2.5 seconds, INP under 200 milliseconds, and CLS under 0.1, all measured at the 75th percentile of real visits.
Can Next.js apps have Core Web Vitals issues?
Yes — Next.js provides the tools, like image and font optimization and code splitting, but they need to be used correctly. An unoptimized image or a large client-side bundle will still hurt vitals in a Next.js app.
Related Reading
Landing Page Sprint
Need a high-converting, blazing-fast landing page? We build custom, SEO-optimized Next.js sites in 3-5 days.
Want your landing page's vitals fixed?
Our Landing Page Sprint includes a Core Web Vitals pass as part of every build.
View Landing Page Sprint