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

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

You can hit a 100 Lighthouse score in Next.js. Using the framework is not enough. Many developers make mistakes that keep scores in the 70s.

Focus on these five metrics to win:

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

TBT is your biggest enemy. Large JavaScript bundles and third-party scripts cause this.

Fix your images. Do not use standard img tags. They cause layout shifts and slow loads. Use the Next.js Image component. Set width and height to prevent shifts. Use the priority property only for your LCP image.

Fix your fonts. Stop using external link tags for Google Fonts. They block rendering. Use next/font/google. It self-hosts fonts and removes layout shifts.

Stop heavy imports. A single bad import adds hundreds of kilobytes to your bundle. Avoid Moment.js. Use the native Intl API instead. Avoid full Lodash. Use native JavaScript methods. Install @next/bundle-analyzer to see what is bloating your app.

Optimize your rendering. Static pages load fast because they serve from a CDN. Use ISR to refresh data without making every page dynamic. Avoid force-dynamic unless you need cookies or headers.

Use dynamic imports. Do not load heavy components like charts or maps immediately. Use next/dynamic to load them only when they enter the viewport. This keeps your initial bundle small.

Control your scripts. Third-party marketing scripts kill your TBT. Use next/script to manage loading. Use afterInteractive for analytics. Use lazyOnload for social widgets.

Stop layout shifts (CLS). Always provide dimensions for images. Match skeleton loader heights to your actual content. Fix dark mode flashes with inline scripts instead of useEffect. Anchor cookie banners to the bottom with fixed positioning.

Final tips: • Run Lighthouse in incognito mode to ignore extensions. • Test on a throttled 4G connection. • Use Brotli compression.

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