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.
Top comments (0)