𝗡𝗲𝘅𝘁.𝗷𝗦 𝗣𝗲𝗿𝗳𝗼𝗿𝗺𝗮𝗻𝗰𝗲: 𝗛𝗼𝘄 𝘁𝗼 𝗛𝗶𝘁 𝟭𝟬𝟬 𝗟𝗶𝗴𝗵𝘁𝗵𝗼𝘂𝘀𝗲

𝗡𝗲𝘅𝘁.𝗷𝗦 𝗣𝗲𝗿𝗳𝗼𝗿𝗺𝗮𝗻𝗰𝗲: 𝗛𝗼𝘄 𝘁𝗼 𝗛𝗶𝘁 𝟭𝟬𝟬 𝗟𝗶𝗴𝗵𝘁𝗵𝗼𝘂𝘀𝗲

You can hit a 100 Lighthouse score with Next.js. Simply using the framework is not enough. Common mistakes keep many scores stuck in the 70s.

Lighthouse scores depend on five main metrics:

• Total Blocking Time (TBT): 30% weight. Target < 200ms. • Largest Contentful Paint (LCP): 25% weight. Target < 2.5s. • Cumulative Layout Shift (CLS): 15% weight. Target < 0.1. • First Contentful Paint (FCP): 10% weight. Target < 1.8s. • Speed Index: 10% weight. Target < 3.4s.

Focus on TBT first. It measures how much JavaScript blocks the main thread.

Optimize your images. Use the Next.js Image component to prevent layout shifts and serve WebP files. Only use the priority property on your LCP image. Using it on too many images ruins your performance.

Fix your fonts. Do not use standard link tags for Google Fonts. This blocks rendering. Instead, use next/font/google to self-host fonts. This removes layout shifts and flashes of unstyled text.

Watch your bundle size. Use @next/bundle-analyzer to see what slows you down.

Replace heavy libraries with native code:

• Swap Moment.js for the native Intl API.
• Swap Lodash for native JavaScript methods.

Use static rendering whenever possible. Static pages load much faster from a CDN. Use ISR to refresh data on a schedule. Avoid forcing dynamic rendering unless you need cookies or headers.

Lazy load heavy components. Use next/dynamic for charts, maps, or text editors. This keeps them out of your initial bundle.

Control third-party scripts. Use next/script to manage when scripts load:

• Use afterInteractive for analytics.
• Use lazyOnload for social widgets.
• Use beforeInteractive only for consent managers.

Stop layout shifts (CLS):

• Always provide width and height for images.
• Use fixed positions for cookie banners.
• Match skeleton loader heights to your actual content.

Final tips:

• Run Lighthouse in incognito mode to ignore browser extensions.
• Test on a throttled 4G connection.
• Use preconnect for critical external origins.

Source: https://dev.to/thekitbase/nextjs-performance-best-practices-how-to-hit-100-lighthouse-in-2026-2k9e