How to Achieve 100/100 PageSpeed on Next.js 15 using ImageKit, ISR, and Partial Prerendering

Introduction: Why Speed is the Only Currency That Matters in 2026

In the competitive world of SEO, speed is no longer just a "plus point"—it is a survival requirement. If your blog takes more than two seconds to load, Google’s algorithms will push you down the search results, and users will bounce before even reading your first sentence.

As a developer working a demanding 10-hour labor job in Saudi Arabia, I faced a unique challenge while building Wisemix Media. I didn't have the luxury of expensive high-end servers or a massive budget for premium CDNs. I needed a way to make my site fly on a zero-dollar budget. By combining Next.js 15, Incremental Static Regeneration (ISR), and ImageKit, I achieved the "holy grail" of web development: a perfect 100/100 score on Google PageSpeed Insights.

In this guide, I will share the exact architecture I used to make my blog, categories, and tools feel instant.

1. The Power of ISR (Incremental Static Regeneration)

One of the main reasons websites slow down is because they fetch data from a database (like PostgreSQL with Prisma) every single time a user requests a page. This is called Server-Side Rendering (SSR), and while it’s dynamic, it’s slow.

Incremental Static Regeneration (ISR) is the secret sauce. It allows you to pre-render your pages at build time and then update them in the background as new data comes in.

Why I use ISR for Blog and Category Pages:

On Wisemix Media, I use ISR for every individual blog post and category list. When a user visits a page, they get a static HTML file from the Vercel Edge network—not a loading spinner.

• Speed: Sub-millisecond response times.

• SEO: Googlebot loves static HTML because it’s easy to crawl and index.

• Scalability: Your database doesn't crash when you get a sudden spike in traffic.

If you are still setting up your environment, I recommend reading my guide on how to start your first Nextjs project from installation to hello world to get the foundations right.

2. Next.js 15 and Partial Prerendering (PPR)

Next.js 15 has introduced Partial Prerendering (PPR), and it’s a game-changer for blogs. PPR allows you to combine static and dynamic content on the same page.

Imagine your blog post content is static (lightning-fast), but your "Related Posts" or "Comments" section is dynamic. In older versions, you had to choose one or the other. With PPR, the static "shell" of your page is served instantly, while the dynamic parts are streamed in. This ensures your Largest Contentful Paint (LCP) stays under 1 second.

I’ve implemented this on my Next.js Mastery category pages to ensure that even with heavy data, the user sees the content immediately.

3. Image Optimization: The ImageKit Strategy

Images are usually the biggest reason for a low PageSpeed score. If you host high-resolution images directly on your server, your site will crawl. This is why I moved all media to ImageKit.

How ImageKit Boosts My Score:

1. Automatic Format Selection: It detects the browser and serves WebP or AVIF automatically.

2. Real-Time Resizing: Instead of loading a 1200px image on a mobile screen, I use ImageKit to request a 400px version on the fly.

Before uploading images, I always use my own image-compressor and image-resizer to pre-optimize the files. This double-layered optimization ensures that my ImageKit bandwidth stays low and speed stays high.

4. Database Optimization: Prisma and PostgreSQL

Even with ISR, your "revalidation" process needs to be fast. If your database query takes 5 seconds, your static page generation will fail or be slow.

On Wisemix Media, I use Prisma to talk to my PostgreSQL database. By writing clean, indexed queries, I ensure that my ISR background tasks finish in milliseconds. If you want to know why I chose this specific database stack, you can read my article on why PostgreSQL with Prisma is the ultimate choice for Next.js.

5. Practical SEO: Automatic Sitemaps

Speed is useless if Google doesn't know your page exists. A high PageSpeed score combined with a dynamic sitemap is the ultimate SEO strategy. Because I use ISR, my pages are updated frequently, and my sitemap needs to reflect that.

I built a custom solution for this, which I detailed in how to build an automatic SEO sitemap in Nextjs 15 with Prisma. This ensures that every time ISR regenerates a page, the sitemap is ready for Google to crawl.

6. The "Human" Side: Managing Tech While Working Labor

People often ask me how I manage to optimize a site to 100/100 while working 10 hours of manual labor in Saudi Arabia. The truth is, limitations breed creativity.

When you have limited time, you don't waste it on slow architectures. You look for the most efficient way to build. This journey hasn't been easy, but building tools like the PDF generator or the 600 DPI converter helped me realize that high-performance code can solve real problems for real people.

I've shared more about my daily routine and how I find time to code in my blog: how i manage 10 hours of labor and 4 hours of coding every day.

Summary Checklist for 100/100 PageSpeed:

• Use Next.js 15 for the latest performance patches and PPR support.

• Implement ISR for all static-content pages (Blogs, Categories, Tech guides).

• Offload Media to ImageKit to ensure images don't block the main thread.

• Optimize Fonts using next/font to eliminate Layout Shift (CLS).

• Minimize Third-Party Scripts to only what is absolutely necessary.

Conclusion

A 100/100 PageSpeed score is not a myth—it is a result of intentional engineering. By leveraging ISR for data-heavy pages and ImageKit for media, you can build a professional, lightning-fast CMS without spending a penny on hosting.

Whether you are building a simple portfolio or a professional SEO optimized CMS, speed should be your foundation.

Stay tuned to Wisemix Media for more deep dives into Next.js mastery.