# Next.js Performance Optimization: How I Boosted My Google PageSpeed Insights Score from Orange to Green Using inlineCss

If you’ve been struggling to push your **Next.js app** from the dreaded **orange zone (80s)** into the **green zone (90+)** on **Google PageSpeed Insights**, you’re not alone.

I tried every common performance tweak:

* Optimizing **next.config.js**
    
* Profiling heavy components and splitting code
    
* Using `dynamic()` with `suspense` for lazy loading
    
* Applying **Next.js Image Optimization**
    

And still, my app hovered around **82/88 performance score**.

The real breakthrough came when I discovered the **experimental** `inlineCss` **feature** in Next.js.

## What is `inlineCss` in Next.js?

According to the [Next.js documentation](https://nextjs.org/docs/app/api-reference/config/next-config-js/inlineCss)

* **Definition**: `inlineCss` inlines CSS directly into the rendered HTML instead of linking to external `.css` files.
    
* **Benefit**: Eliminates extra network requests for CSS, which reduces **render-blocking resources**.
    
* **Performance Gains**: Improves **First Contentful Paint (FCP)** and **Largest Contentful Paint (LCP)** — two critical **Core Web Vitals**.
    
* **Best Use Cases**:
    
    * Small-to-medium apps (e.g., portfolios, landing pages, dashboards)
        
    * Projects where **fast initial render** is more important than keeping HTML payload smaller
        
* **Caution**: For apps with huge global stylesheets, HTML size may increase.
    

## How to Enable `inlineCss` in Next.js

Add the following to your `next.config.js` (or `next.config.ts`):

```javascript
// next.config.js
const nextConfig = {
 experimental: {
 inlineCss: true,
 },
}
export default nextConfig
```

  
After enabling `inlineCss`, my Next.js app finally broke through into the **green zone (90+ score)** on Google PageSpeed Insights 🎉.

**Before:**

* Score: 88–89 (orange)
    
* FCP/LCP: slowed by CSS request
    

**After:**

* Score: 90+ (green)
    
* Faster **First Contentful Paint (FCP)**
    
* Improved **Largest Contentful Paint (LCP)**
    
* More stable rendering, reduced layout shift  
    After enabling this, my app jumped into the **green zone (90+)**.
    

## Why This Matters

For developers aiming to **improve Next.js performance** and **optimize Core Web Vitals**, CSS delivery is often an overlooked bottleneck.

My application: [Me Portfolio](https://me-portfolio.adelpro.us.kg), get if from [Gumroad](https://gumroad.adelpro.us.kg/l/aehleb?layout=profile)

![](https://dqy38fnwh4fqs.cloudfront.net/UHNNB8PRR8QMGOAIN98L7BPMP667/blog/blog-content-image-0cb26534-f012-4875-b847-18c5fcf6a117.webp align="left")

### Key Takeaways

1. Don’t stop at image optimization and dynamic imports.
    
2. Test **experimental features**—sometimes they solve the exact bottleneck.
    
3. `inlineCss` is especially powerful for smaller apps, where CSS size isn’t huge.
    
4. Always re-test with **Google PageSpeed Insights** after each change.
    

Sometimes it’s not about piling more optimizations, but finding that one bottleneck and in my case, it was CSS delivery.