Key takeaways
- Google measures Core Web Vitals at the 75th percentile of real visits: LCP under 2.5 s, INP under 200 ms, and CLS under 0.1.
- Render the first screen on the server with React Server Components and ship less client JavaScript.
- Give the LCP image priority, reserve space for all media, and self-host fonts with
next/font. - Cache deliberately: static by default, time-based or on-demand revalidation for content that changes.
- Monitor field data, not only Lighthouse, so regressions appear before rankings or conversions drop.
Why does Next.js performance matter for SEO and revenue?
Performance is a product feature. Core Web Vitals are part of Google's page experience signals, and slow pages lose visitors before they read a word. When Largest Contentful Paint slips or the layout jumps under a user's thumb, conversion and trust suffer even if the business logic is perfect.
Next.js gives teams excellent defaults, but defaults do not survive contact with real content, third-party scripts, and marketing requests. These are the nine patterns our web development team applies on every project to keep sites fast after launch.
What are the Core Web Vitals thresholds?
Google evaluates three metrics using field data from real Chrome users, at the 75th percentile of page loads:
- Largest Contentful Paint (LCP): how fast the main content appears. Good is 2.5 seconds or less.
- Interaction to Next Paint (INP): how quickly the page responds to taps, clicks, and key presses. Good is 200 milliseconds or less. INP replaced First Input Delay in March 2024.
- Cumulative Layout Shift (CLS): how much visible content moves unexpectedly. Good is 0.1 or less.
1. Render the first screen on the server
With the App Router, components are React Server Components by default. They render to HTML on the server and send zero JavaScript for their own code. We keep interactive islands, like a menu toggle or a form, as small client components, and keep data fetching on the server so the first screen never waits for a client-side request waterfall.
For slower data, we stream: the page shell and above-the-fold content arrive first, and a Suspense boundary fills in the rest. Users see meaningful content quickly instead of a blank screen.
2. Treat images as a performance budget
The LCP element is usually a hero image or a headline. We use next/image so every image gets correct sizes, modern formats such as AVIF or WebP, and lazy loading below the fold.
- Mark only the LCP image as high priority. Prioritizing everything prioritizes nothing.
- Always provide width and height (or a fixed aspect ratio) so the browser reserves space and CLS stays near zero.
- Keep decorative gradients in CSS or inline SVG so they never block rendering.
3. Self-host fonts with next/font
Web fonts loaded from a third-party stylesheet add DNS lookups and often cause text to flash or shift. next/font downloads fonts at build time, serves them from your own domain, and generates fallback metrics that minimize layout shift. For multilingual sites, subset each font to the scripts you actually use, for example Latin and Arabic.
4. Ship less JavaScript to protect INP
INP suffers when the main thread is busy. The biggest wins come from sending less code: move logic into Server Components, import heavy widgets dynamically, and audit dependencies with a bundle analyzer. We regularly find date libraries, icon packs, or charting tools pulling in far more code than a page needs.
For interactions that trigger expensive updates, we use useTransition so the UI stays responsive, and we break long tasks into smaller chunks.
5. Control third-party scripts
Analytics, chat widgets, and tag managers are frequent causes of poor INP. Load them with next/script using the afterInteractive or lazyOnload strategy, remove tags nobody uses, and question every new script in code review. Our SEO & analytics setups use lean tracking that respects consent without slowing the page.
6. Cache on purpose
Most marketing and content pages can be static. For content that changes, we choose explicit caching boundaries:
- Time-based revalidation for data that can be a few minutes old, such as blog listings or catalogs.
- On-demand revalidation with
revalidateTagorrevalidatePathwhen an editor publishes, so updates appear instantly without rebuilding the site. - Dynamic rendering only for truly personalized pages, such as dashboards or carts.
Pair this with a CDN and correct cache headers. Our cloud & DevOps team sizes hosting so the edge serves most traffic.
7. Design for layout stability
CLS is often a design problem, not a code problem. Cookie banners that push content, ads without reserved slots, and late-loading web fonts are the usual culprits. Our UI/UX designers specify skeletons and fixed dimensions for every dynamic area, so the page is stable from the first paint.
8. Monitor real users, not just the lab
Synthetic checks catch broken deploys; real-user monitoring shows what customers feel on mid-range phones and mobile networks. We report Web Vitals from the browser with the useReportWebVitals hook and alert when the 75th percentile crosses a threshold.
9. Make performance part of the release process
Performance erodes one feature at a time. We add bundle-size and Lighthouse checks to CI, review Web Vitals in sprint demos, and include a performance review in our maintenance & support plans. The same observability mindset applies to AI features, as we explain in taking AI from pilot to production.
Planning a high-traffic launch or migration? We can audit your route map, bundle graph, and CDN configuration, then deliver a prioritized backlog. Contact us to schedule a review.
Frequently asked questions
What is a good LCP score in Next.js?
A good Largest Contentful Paint is 2.5 seconds or less at the 75th percentile of real visits. Server rendering, a prioritized hero image, and self-hosted fonts usually get Next.js sites well under that threshold.
Does Next.js automatically make a site fast?
It provides strong defaults such as Server Components, image optimization, and font optimization, but third-party scripts, oversized images, and heavy client components can still make a Next.js site slow.
How do I improve INP in a React application?
Reduce client-side JavaScript, move logic to the server, lazy-load heavy components, defer third-party scripts, and use transitions for expensive state updates so the main thread stays free to respond.
Are Core Web Vitals a ranking factor?
Yes. They are part of Google's page experience signals. They rarely outweigh relevance, but between similar pages, a better experience helps, and faster pages convert better regardless of rankings.
OSTORDEV Engineering Team
Senior engineers at OSTORDEV, a web, mobile, and AI development agency in Casablanca, Morocco. We write about problems we solve in client projects.
