Next.js Performance Optimization: The Complete Guide

Q: What is a good Lighthouse score for a Next.js website?

Anything above 90 is considered good, above 95 is very good. Our projects regularly achieve 95–100. A score below 70 indicates structural performance issues that can be fixed with targeted optimization.

Q: Why is my Next.js site slow even though I'm using Next.js?

Next.js is no guarantee of performance — incorrect implementations can negate the advantages. Common causes: missing priority flags on images, too many client components instead of server components, external scripts blocking rendering, poor database queries in SSR.

Q: How long does a performance audit take?

A basic performance audit with improvement recommendations takes 2–4 hours. A full audit including implementation of the improvements takes 1–5 days depending on project size.

Q: Does performance really improve the conversion rate?

Yes, this is proven by numerous studies. Google and Amazon have shown: 100ms more load time means 1% fewer conversions. A page that loads 1 second faster typically converts 2–5% better.

Q: What does Next.js performance optimization cost?

A performance audit costs 490–990 €. Implementing the identified improvements depends on scope: 1,000–5,000 € for typical projects. Often, however, 20% of the measures are responsible for 80% of the performance gain.

Wito AI

Performance How-to11 min read

Performance How-to

Next.js Performance Achieve Lighthouse 95+

Concrete techniques for maximum Next.js performance: LCP under 1 second, CLS near zero, INP under 50ms. With these methods our projects consistently reach Lighthouse scores above 95.

Understanding Core Web Vitals

Google's Core Web Vitals are the decisive performance metrics for SEO and user experience: LCP (Largest Contentful Paint): How long does it take for the largest visible element on the page to load? Target: under 2.5 seconds, ideally under 1 second. INP (Interaction to Next Paint): How quickly does the page react to user input? Target: under 200ms, ideally under 50ms. CLS (Cumulative Layout Shift): How much do elements shift during loading? Target: under 0.1, ideally 0.02 or less. Next.js offers better out-of-the-box conditions for all three metrics than WordPress or classic SPAs — but incorrect implementations can nullify these advantages.

Google uses Core Web Vitals as a ranking factor. Pages with good vitals rank on average 15–25% better than comparable pages with poor vitals.

Image optimization with next/image

Images are the most common LCP killer. Next.js `` solves most issues automatically: Automatic WebP/AVIF conversion: Next.js delivers images in the best format the browser supports. AVIF is 40–60% smaller than JPEG at the same quality. Lazy loading: Images below the viewport load only when the user scrolls. Sets `loading="lazy"` correctly. Priority flag for LCP images: The main image (often the hero image) should have `priority` so it loads early. Missing this flag is a common LCP cause. Fixed dimensions: Always set `width` and `height` to prevent CLS caused by late-loading images. Blur placeholder: `placeholder="blur"` shows a blurred placeholder while loading and prevents visual jumps.

Common mistake: the hero image without the priority flag. Add priority to all above-the-fold images — this often improves LCP by 0.5–1.5 seconds.

Choosing the right rendering strategy

Next.js offers multiple rendering modes — the wrong choice costs performance: Static Generation (SSG): Pages are rendered at build time and delivered as static HTML files. Fastest possible load time. Suited for pages that rarely change (landing pages, blog posts). Incremental Static Regeneration (ISR): Static pages are refreshed in the background. Ideal for pages that change occasionally (product pages, news). The `revalidate` parameter controls update frequency. Server-Side Rendering (SSR): Pages are rendered on every request. Necessary for personalized content, but slower. Caution: using SSR for everything is a common performance mistake. React Server Components (RSC): With the App Router, components can render server-side — without shipping JavaScript to the client. Reduces bundle size and improves INP.

Performance issues in your Next.js project?

Optimize fonts and external scripts

next/font for Google Fonts Never embed Google Fonts directly via CDN. `next/font/google` loads fonts locally and eliminates the network request to Google's servers — saves 200–500ms and improves privacy. next/script for external scripts Analytics, chat widgets, A/B testing tools — always embed with `