DEV Community

Dasun Madusanka
Dasun Madusanka

Posted on

How I Optimize Next.js Apps to Get 90+ PageSpeed Score (Step-by-Step)

#nextjs #webperf #webdev #typescript

Is your Next.js website scoring below 70 on Google PageSpeed Insights? You're not alone — and in this article, I'll show you the exact steps I use to push sites to 90+ scores.

Why PageSpeed Matters

A slow website doesn't just frustrate users — it hurts your Google ranking. Core Web Vitals are now a direct ranking factor. If your site is slow, you're losing both traffic and customers.

Step 1: Fix Your Images With next/image

The biggest performance killer in most Next.js apps is unoptimized images.

Replace standard img tags with Next.js's built-in Image component:

import Image from 'next/image'
Enter fullscreen mode Exit fullscreen mode

This automatically handles:
✅ WebP conversion
✅ Lazy loading
✅ Correct sizing per device

Step 2: Reduce Your Bundle Size With Dynamic Imports

Large JavaScript bundles slow down your LCP score. Use dynamic imports for components that aren't needed on first load:

import dynamic from 'next/dynamic'

const HeavyChart = dynamic(() => import('../components/HeavyChart'), {
  loading: () => 

Loading...

,
  ssr: false
})
Enter fullscreen mode Exit fullscreen mode

Step 3: Remove Render-Blocking Fonts

Many developers load Google Fonts — which blocks rendering:

Use Next.js font optimization instead:

// ✅ Good
import { Inter } from 'next/font/google'

const inter = Inter({ subsets: ['latin'], display: 'swap' })
Enter fullscreen mode Exit fullscreen mode

Step 4: Enable Gzip / Brotli Compression

In your next.config.js:

module.exports = {
  compress: true,
}
Enter fullscreen mode Exit fullscreen mode

If you're on Vercel, this is automatic. For custom servers, configure compression at the server level.

Step 5: Fix Cumulative Layout Shift (CLS)

CLS is often caused by images without dimensions or fonts that swap. Always define width and height for images, and use font-display: swap.

Results You Can Expect

After applying all these optimizations, I consistently see scores jump from 40–60 range up to 90–99 on both Mobile and Desktop.

Need Professional Help?

If you want all of this done for your site in 24 hours — without touching the code yourself — I offer a professional Next.js Speed Optimization service on Fiverr where I guarantee 90+ PageSpeed score.

🔗 https://www.fiverr.com/s/8zkQx2r

Drop your questions in the comments — happy to help! 🚀

Top comments (0)