Achieving 100/100 Lighthouse Scores in Next.js

A perfect Lighthouse score is not vanity, it is a proxy for how the site feels on a mid-range phone with a mediocre connection. Most of the wins come from shipping less.

Fix images first

Images are usually the largest payload on the page. Serve modern formats at the right size, lazy-load below the fold, and give every image dimensions so the layout never shifts.

1<Image
2  src="/hero.webp"
3  alt="Dashboard"
4  width={1200}
5  height={630}
6  priority
7  sizes="(max-width: 768px) 100vw, 1200px"
8/>

Split code by route and interaction

Heavy components that only appear on interaction should not be in the initial bundle. Dynamic imports with ssr disabled for client-only widgets cut first-load JavaScript dramatically.

Mind fonts and third parties

• •Self-host fonts with display swap and subset to the glyphs you need.
• •Defer analytics and chat widgets until after first paint.
• •Audit every third-party script yearly, they accumulate silently.

Set a performance budget

Scores drift without a number to defend. Cap total JavaScript, image weight, and third-party requests, and enforce the budget in CI so a heavy pull request fails before it ships instead of after users feel it.

1[
2  {
3    "resourceType": "script",
4    "budget": 170
5  },
6  {
7    "resourceType": "image",
8    "budget": 250
9  },
10  {
11    "resourceType": "third-party",
12    "budget": 200
13  }
14]

Measure on real devices

• •Test on a mid-range Android phone, not just a flagship and a laptop.
• •Throttle to 4G speeds, since office wifi flatters every site.
• •Watch field data next to lab scores, users live in the field.

A perfect score held for a year beats a perfect score held for a week. Budgets, real devices, and regular audits are what keep the green numbers green.