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/