How We Built a High-Performance Next.js Website That Scores 95+ on PageSpeed Insights

Raafi Infotech — Mon, 25 May 2026 14:30:26 +0000

How We Built a High-Performance Next.js Website That Scores 95+ on PageSpeed Insights

Website performance is no longer just a “nice-to-have” feature. In 2026, speed directly impacts SEO rankings, user experience, engagement, and conversion rates.

At Raafi Infotech, we recently worked on optimizing our own Next.js website with a strong focus on Core Web Vitals, mobile performance, and real-world loading speed. The result was a website consistently achieving 95+ PageSpeed scores while maintaining modern UI/UX and rich animations.

In this article, I’ll share the optimization techniques, architecture decisions, and performance strategies we used to achieve those results.

Why Performance Matters More Than Ever

A slow website affects:

SEO rankings
Bounce rate
User engagement
Conversion rate
Mobile experience
Crawl efficiency

Even though Next.js provides excellent performance out of the box, many websites still suffer from:

Large JavaScript bundles
Poor image handling
Excessive animations
Render-blocking resources
Third-party script overload
Layout shifts

Performance optimization requires intentional engineering decisions.

Our Optimization Approach

Instead of relying on a single trick, we focused on improving every layer of the application.

1. Optimizing Images Properly

Images are often the largest contributor to slow loading times.

We used the next/image component extensively to:

Automatically resize images
Serve modern formats like WebP
Lazy load offscreen images
Deliver responsive images for different devices

Example:

import Image from "next/image";

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

Additional Improvements

Converted PNG/JPG assets to WebP
Removed unnecessary large background images
Used compressed thumbnails for mobile devices

This significantly improved Largest Contentful Paint (LCP).

2. Reducing JavaScript Bundle Size

One of the biggest reasons many Next.js sites score poorly is excessive client-side JavaScript.

We optimized this by:

Using dynamic imports
Avoiding unnecessary libraries
Minimizing client components
Splitting large modules
Removing unused packages

Example:

import dynamic from "next/dynamic";

const HeavyComponent = dynamic(() => import("./HeavyComponent"), {
  ssr: false,
});

This reduced initial page load time and improved Interaction to Next Paint (INP).

3. Using Server Components Strategically

Next.js App Router provides powerful server component capabilities.

Instead of rendering everything on the client side, we moved non-interactive sections to server components wherever possible.

Benefits included:

Smaller JS bundles
Faster rendering
Better SEO
Improved caching efficiency

4. Font Optimization

Fonts can easily become hidden performance bottlenecks.

We optimized fonts using:

next/font
Limited font weights
Preloading important fonts
font-display: swap

Example:

import { Poppins } from "next/font/google";

const poppins = Poppins({
  subsets: ["latin"],
  weight: ["400", "500", "600"],
  display: "swap",
});

This helped reduce layout shifts and improve CLS scores.

5. Eliminating Layout Shifts (CLS)

Unexpected movement during loading creates a poor user experience.

We fixed CLS issues by:

Defining explicit image dimensions
Reserving space for dynamic content
Avoiding late-loading UI elements
Optimizing font rendering

A stable layout improved both usability and Core Web Vitals.

6. Optimizing Animations Carefully

Modern UI animations look great, but they can hurt performance if implemented incorrectly.

We optimized animations by:

Avoiding heavy animation libraries where unnecessary
Reducing excessive motion effects
Using GPU-friendly transitions
Lazy loading animation-heavy sections

The goal was balancing visual appeal with performance.

7. Improving Caching & Delivery

Performance is not just frontend optimization.

We also improved:

Browser caching
CDN delivery
Compression
Asset minification
Cache headers

Using modern hosting infrastructure and caching strategies dramatically improved repeat visits and global loading speed.

Tools We Used

We continuously tested performance using:

Google PageSpeed Insights
Lighthouse
Chrome DevTools
Core Web Vitals reports

Instead of optimizing only for synthetic scores, we focused on real-world usability.

Key Lessons We Learned

After multiple optimization cycles, here are the biggest takeaways:

1. Performance is Continuous

Optimization is not a one-time task.

Every new feature, dependency, or animation can affect performance.

2. Less JavaScript = Better UX

Reducing unnecessary client-side code had the biggest impact overall.

3. Image Optimization Matters More Than Most Developers Think

Even small image improvements can drastically improve mobile performance.

4. Third-Party Scripts Are Dangerous

Analytics, chat widgets, tracking scripts, and external embeds can severely impact performance if not managed carefully.

Final Results

After implementing these optimizations, we achieved:

95+ PageSpeed scores
Improved mobile usability
Faster Largest Contentful Paint (LCP)
Lower Cumulative Layout Shift (CLS)
Better SEO performance
Improved overall user experience

Most importantly, the website feels significantly faster in real-world usage.

Final Thoughts

Next.js is an incredibly powerful framework, but achieving high performance requires thoughtful engineering decisions.

A fast website is not only good for SEO — it directly improves user trust, engagement, and conversions.

At Raafi Infotech, we focus on building high-performance web applications using modern technologies like Next.js, Laravel, Flutter, and scalable cloud infrastructure.

If you're interested in performance-focused development, feel free to explore our work:
https://www.raafiinfotech.com/

Thanks for reading.

DEV Community: Raafi Infotech

How We Built a High-Performance Next.js Website That Scores 95+ on PageSpeed Insights

How We Built a High-Performance Next.js Website That Scores 95+ on PageSpeed Insights

Why Performance Matters More Than Ever

Our Optimization Approach

1. Optimizing Images Properly

Additional Improvements

2. Reducing JavaScript Bundle Size

3. Using Server Components Strategically

4. Font Optimization

5. Eliminating Layout Shifts (CLS)

6. Optimizing Animations Carefully

7. Improving Caching & Delivery

Tools We Used

Key Lessons We Learned

1. Performance is Continuous

2. Less JavaScript = Better UX

3. Image Optimization Matters More Than Most Developers Think

4. Third-Party Scripts Are Dangerous

Final Results

Final Thoughts