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

Peakxel Studio — Wed, 20 May 2026 17:48:48 +0000

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.

Some images were over 2MB.

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

import Image from "next/image";

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"));

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/

DEV Community: Peakxel Studio