In this article, I will continue my walkthrough series of the issues and fixes on how I improved the performance scores of my site. In the previous parts, I covered various optimizations such as image optimization, CSS optimization, and leveraging modern web technologies.

Render Blocking Critical CSS

So basically what happens is your Stylesheets can block the page render time, which increases the overall page load time and increases the speed index scores. This is not good ! Low Speed index scores will speed up your site.

So as you can see,

in the Lighthouse insights:

and in Webpagetest report :

To Fix the Critical CSS issue, I decided to upgrade my Next.js version from 14 to 15. This upgrade not only helps with critical CSS but also brings several other performance improvements.

Why Upgrade to Next.js 15?

Next.JS 15 has brought significant performance improvements, especially with the introduction of Turbopack, a Rust-based bundler that offers faster builds and hot module replacement (HMR). By upgrading to Next.js 15, I aimed to take advantage of these enhancements to further improve my website's performance.

• Improved DX : Improved development experience with faster refresh times and better error overlays
• Build Performance: Improved build times and more efficient compilation processes
• Inline CSS: Automatic inlining of critical CSS for faster rendering (experimental)
• Improved Image Optimization: Enhanced image loading strategies and support for modern formats
• Support for React 19 latest Features
• Updated Metadata API

You can read more about the Next.js 15 features here and React 19 features here.

So in this guide, we will migrate our site from Next.js version 14 to version 15 and see how it improves our performance scores.

Automated Migrations

Next.js 15 includes an automated upgrade CLI to simplify migration:

# Automated upgrade
npx @next/codemod@canary upgrade latest

# Manually 
npm install next@latest react@latest react-dom@latest

So when i started the upgrade :

Detected installed versions:

• React: v18.3.1
• Next.js: v14.2.8

But, the migration with codemods failed due to some incompatible dependencies.

So I created a new Next.js 15 project and manually migrated my codebase.

Migration Steps

For manual migration you can follow the following official migration guide to version 15

1. Create new Next.js 15 project:

npx create-next-app@latest

2. or manually upgrade the packages:

3. Update Next.config.js:

inlineCSS

The inlineCSS is an experimental feature that automatically inlines critical CSS for faster rendering. To enable it, I added the following configuration to my next.config.js file:

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    inlineCss: true,
  },
}

module.exports = nextConfig

optimize packages

Since I was using lucide-react for icons, I also added optimizePackageImports to optimize the imports from this package:

Some packages can export hundreds or thousands of modules, which can cause performance issues in development and production.

Adding a package to experimental.optimizePackageImports will only load the modules you are actually using, while still giving you the convenience of writing import statements with many named exports.

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    inlineCss: true,
    optimizePackageImports: [
      'lucide-react',
    ]
  },
}

module.exports = nextConfig

Currently I have hosted the new upgraded version of the site at Dev Environment, so measuring its performance, will update the results here soon.

So let me show you what's the new difference, since i performed this test last, i also found that the new version after the upgrade to Next 15 needs some more improvements when compared to the old one :

Lighthouse Scores:

So the major difference that you can see is that we have successfully eliminated the blocking time after the upgrade.

For Desktop

Prod (https://sujaykundu.com):

Total Blocking Time: 40 ms

Dev (https://dev.sujaykundu.com):

Total Blocking Time: 0 ms

For Mobile

Prod (https://sujaykundu.com)

Total Blocking Time: 10 ms

Dev (https://dev.sujaykundu.com):

Total Blocking Time: 0 ms

Chrome Performance

Then I ran performance tests using Chrome Profiler, and found out that though we have fixed the render blocking issue, we got a decrease on the Core Web Vitals scores.

Some of the issues that occured :

• Increase in LCP and how i fixed it