How We Optimized a Next.js Website to Score 100 on PageSpeed Insights

We recently optimized a client’s Next.js website that had terrible mobile performance despite looking visually great.

The main issues were:

oversized images

heavy animations

unnecessary JavaScript

blocking third-party scripts

Here are the 3 fixes that made the biggest difference.

1. Using next/image

Some images were over 2MB.

Switching to optimized WebP assets with Next.js image optimization improved loading speed immediately.

import Image from "next/image";

1. Lazy Loading Components

Several below-the-fold sections loaded instantly even when users never reached them.

Dynamic imports reduced the initial bundle size significantly.

const Testimonials = dynamic(() => import("./Testimonials"));

1. Delaying Third-Party Scripts

Analytics and chat widgets were hurting performance badly.

Using lazy loading for non-essential scripts reduced Total Blocking Time almost completely.

Final Results

Metric Before After

Mobile Score 61 98

Desktop Score 82 100

LCP 4.8s 1.3s

Most Next.js performance issues are not caused by the framework itself — they usually come from bad asset optimization and unnecessary JavaScript.

We now use this workflow in our production builds at https://peakxelstudio.com/