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. 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?

You can measure it for your own site: compare loading time and conversion rate before and after an optimisation in your web analytics.

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.

Wito AI

Performance How-to11 min read

Performance How-to

Next.js performance: shorter load times, step by step

For development teams and operators of Next.js projects: concrete techniques for load time (LCP), layout stability (CLS) and responsiveness (INP), so your site gets faster and you do not have to hunt for the cause for long.

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.

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. At the same quality, AVIF files are usually considerably smaller than JPEG. 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 `