Web Performance on a Budget — Real Experience Score 95+

A slow website loses users before they read a single word. On mobile 4G in India, every 100ms of extra load time costs you roughly 1% of conversions.

Here's exactly how I get 95+ Real Experience Scores on every Next.js project I ship.

The biggest wins

1. Image format. Switch to AVIF. Next.js Image does this automatically when you set formats: ["image/avif", "image/webp"] in next.config. Saves 40–60% over JPEG.

2. Font loading. Use next/font with display: swap. Never load a Google Font via <link> in 2024.

3. JavaScript bundle size. Run next build and check the bundle analyser. In my experience, a single unoptimised import (like import * from 'lodash') can add 70KB.

4. No layout shift. Every <Image> needs explicit width and height, or fill with a sized parent. CLS is the sneakiest Core Web Vital to fail.

5. Preload the LCP image. The largest contentful paint image should have priority prop on the Next.js Image component.

None of these require paid tools. Just discipline and a good Lighthouse habit.