How We Took a Next.js Site's PageSpeed Score from ~50 to 98

BRANDLUMEO LLP — Thu, 27 Aug 2026 05:56:01 +0000

While auditing one of our own agency's sites (built as a Next.js static export), we found the mobile PageSpeed score sitting around 50 — not great for a site meant to represent a digital marketing agency. Here's what we changed to get it to 98.

1. Converted images to WebP

Most of the images on the site were still JPG/PNG. Converting them to WebP alone cut file sizes significantly without any visible quality loss.

2. Migrated to `next/image`

Instead of plain <img> tags, we moved every image to Next.js's built-in Image component. This gave us automatic:

Lazy loading
Responsive sizing
Better format negotiation

Here's a simplified example of the approach:

import Image from 'next/image'

<Image
  src="/hero.webp"
  alt="Hero banner"
  width={1200}
  height={600}
  priority
/>

3. Optimized Google Fonts with `next/font`

We were loading Google Fonts the traditional way (via <link> tags), which adds render-blocking requests. Switching to next/font/google self-hosts the fonts and eliminates that extra network round-trip.

Simplified example:

import { Poppins } from 'next/font/google'

const poppins = Poppins({
  subsets: ['latin'],
  weight: ['400', '600'],
})

4. Cleaned up legal/meta pages

Missing pages and broken links were quietly hurting the crawl experience and, indirectly, the performance audit. Adding proper legal pages (privacy policy, terms) closed that gap.

Result

Mobile PageSpeed score: ~50 → 98

Takeaway

If your Next.js site is scoring low, check these three things first — they're usually the biggest wins for the least effort:

Image format + next/image usage
Font loading strategy
Missing/broken pages affecting crawl

We're BrandLumeo, a digital marketing agency working across Kerala and Dubai — handling everything from Meta Ads to web development. Would love to hear how others have tackled similar performance issues!

DEV Community: BRANDLUMEO LLP