Failing Core Web Vitals hurt both user experience and search ranking.
Google uses Core Web Vitals (LCP, INP, CLS) as ranking signals. LCP over 4 seconds, CLS above 0.1, or INP above 500ms puts pages in the 'Poor' category — affecting both ranking and user retention. Next.js has specific patterns that cause and fix each metric.
Core Web Vitals in Google Search Console showing 'Poor' or 'Needs improvement' — affecting search ranking and user experience
The three Core Web Vitals and their Next.js fixes:
LCP (Largest Contentful Paint) — target: < 2.5s
LCP measures how long it takes for the largest visible element (usually the hero image or headline) to render.
Common causes in Next.js:
- Hero image not using
next/image(unoptimized, no preloading) - Server-side rendering slow (slow database query on page load)
- CSS blocking render
Fixes:
// Use next/image with priority for above-the-fold images
<Image src="/hero.jpg" alt="Hero" priority width={1200} height={600} />
Server-side: optimize the data fetching that blocks the initial HTML response.
INP (Interaction to Next Paint) — target: < 200ms
INP measures response time to user interactions. Replaced FID in March 2024.
Common causes: heavy JavaScript executing on click, synchronous state updates blocking the main thread.
Fixes: useTransition for non-urgent updates, move heavy computation to web workers or server actions.
CLS (Cumulative Layout Shift) — target: < 0.1
CLS measures visual stability — how much the layout shifts as the page loads.
Common causes in Next.js:
- Images without dimensions (
<img>without width/height or aspect-ratio) - Fonts causing layout shift as they load (FOUT)
- Dynamic content inserted above existing content
Fixes:
// Always set width/height on next/image
<Image src="/photo.jpg" alt="..." width={800} height={600} />
For fonts: font-display: swap with pre-defined fallback metrics (Next.js next/font handles this automatically).
Core Web Vitals moved to 'Good' across LCP, INP, and CLS — via image optimization, font loading fixes, and server-side rendering
Image optimization
audit and next/image migration
Font loading
optimization with next/font
LCP element
analysis and fix
CLS elimination
(image dimensions, no layout-shifting content)
Performance testing
across mobile and desktop
One honest number to start.
Fixed-scope, fixed-price. The number below is the starting point — final scope is built from your brief.
Core Web Vitals moved to 'Good' across LCP, INP, and CLS — via image optimization, font loading fixes, and server-side rendering
Three steps, every time.
The same repeatable engagement on every project. No surprises, no mystery, no billable ambiguity.
Brief & discovery.
We send you questions, then get on a call. Output: a written scope with every step, feature, and integration listed.
Build & ship.
Fixed schedule, weekly reviews. No scope creep unless you change the scope — and if you do, we reprice it transparently.
Warranty & retainer.
30-day warranty on every launch. Most clients stay on a monthly retainer for ongoing features and maintenance.
Why Fixed-Price Matters Here
Core Web Vitals fixes are auditable from Search Console. Identify the issues, scope the fixes, fixed-price.
Questions, answered.
Google's ranking signals use data from the CrUX (Chrome User Experience Report) collected over the previous 28 days. Improvements show in Search Console within 2-4 weeks of deployment.
Yes — Core Web Vitals are a page-level signal. Each page is evaluated independently. Priority fix: the pages that rank and receive traffic.
Tell Ryel about your project.
Describe what you’re building and what outcome you need. You’ll have a written, fixed-price scope within the week.