Optimizing Next.js Performance: A Practical Case Study (96+ Lighthouse Mobile)

Performance in Next.js is rarely about one “magic” trick. It’s usually the result of dozens of small architectural decisions made consistently. In this article, I’ll walk through the exact techniques that helped me achieve 96+ Lighthouse performance on mobile on a real production project built with Next.js (App Router). Real Production Example Instead of discussing performance in theory, let’s look at a real production case. Project: playtrust.net Type: Content-driven website Stack: Next.js, ASP.NET Core, Nginx Lighthouse (Mobile) result: This isn’t a minimal landing page. The page includes: A hero (LCP) image Dynamic content Analytics scripts Client components Server rendering External image sources Primary optimization focus: LCP image optimization Client bundle minimization Aggressive image caching Hydration control Let’s break down the exact technical decisions that led to this result. 1. Use font-display: swap Custom fonts often block rendering (FOIT — Flash of Invisible Text). If