Auditing a Next.js App from 45 to 98 Lighthouse Score

A client came to us with a Next.js app sitting at a Lighthouse performance score of 45. The brief was simple: get it to 90+ without a rewrite. Twelve days later it was at 98. Here's the ordered hit-list.

The Audit Checklist

• check_circleReplace all <img> with next/image — eliminates CLS from unspecified dimensions
• check_circleUse next/font for all typefaces — zero layout shift on font swap
• check_circleEnable Partial Pre-rendering (experimental.ppr) for shell + streamed content
• check_circleTree-shake heavy icon libraries with optimizePackageImports
• check_circleMove analytics and chat scripts to next/script with strategy='lazyOnload'

const nextConfig = {
  experimental: {
    ppr: "incremental",
    optimizePackageImports: ["lucide-react", "@radix-ui/react-icons"],
  },
  images: {
    formats: ["image/avif", "image/webp"],
    deviceSizes: [640, 750, 828, 1080, 1200],
  },
};