What causes slow Largest Contentful Paint in Next.js websites and how do I fix it?
Quick Answer: Slow Largest Contentful Paint (LCP) in Next.js usually comes from rendering the hero content too late, shipping too much JavaScript, or blocking the browser with unoptimized images, fonts, and third-party scripts. The fix is to get the LCP element onto the initial HTML faster, reduce hydration and bundle cost, prioritize critical assets, and eliminate render-blocking dependencies above the fold.
Detailed Explanation
In Next.js, poor LCP is typically a symptom of delayed server response, excessive client-side rendering, or oversized critical assets competing for the browser’s first paint budget. Common culprits include hero images that are not preloaded or optimized, large JavaScript bundles that delay hydration, fonts that block text rendering, data fetching that happens only on the client, and third-party tags that occupy the main thread during startup. The fastest improvements usually come from making the above-the-fold content available in the initial HTML via SSR or streaming, compressing and resizing the LCP image, using Next.js Image with priority where appropriate, loading fonts with proper preconnect and swap behavior, and deferring nonessential scripts until after the page becomes interactive.
Key Technical Drivers
- Audit the LCP element in Chrome DevTools or PageSpeed Insights, then trace whether the delay is caused by TTFB, resource load delay, or render delay; fix the largest stage first.
- Optimize the critical path by server-rendering hero content, reducing client components above the fold, code-splitting heavy modules, and removing unnecessary third-party scripts from the initial load.
- Prioritize the LCP asset: use next/image with correct dimensions and priority, compress to modern formats, preload critical fonts, and ensure CSS required for above-the-fold rendering is delivered early.