Time Pass Logo
Tech

How to Inline Critical CSS in Next.js 12 & Next.js 15

A concise guide to using the new inline CSS feature in Next.js 15, comparing it with Next.js 12, and exploring its benefits and limitations for performance

Introduction

When transitioning from Next.js 12 to Next.js 13, we were introduced to the new App Router, which supports server components. However, during the migration, one critical feature was noticeably missing: the option to inline critical CSS. In Next.js 12, we could easily inline critical CSS to improve performance, as shown in the example below
 

module.exports = {
  experimental: {
    optimizeCss: true,
  },
};



crafting_code_pro.webp

 

 


The Performance Impact of Losing Critical CSS Inlining

Without the ability to inline critical CSS in Next.js 13, metrics like FCP (First Contentful Paint) and LCP (Largest Contentful Paint) increased significantly, resulting in lower overall page performance. Although it’s possible to inline critical CSS using various workarounds, you cannot eliminate the extra network requests introduced by link tags.

This issue was widely discussed in various forums, as many developers who migrated to Next.js 13 experienced notable performance drops. Numerous community members raised concerns and looked for official solutions.


The Introduction of the inlineCss Feature in Next.js 15

After considerable feedback and criticism, Next.js 15 was released with an experimental feature to inline CSS. This update addresses the problem of high LCP and FCP by allowing you to eliminate additional network requests and significantly improve page load performance.


Github Discussion - https://github.com/vercel/next.js/discussions/59989


How to Use the Inline CSS Feature

To use the inline CSS feature, add the following configuration to your next.config.js file.

import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  experimental: {
    inlineCss: true,
  },
}

export default nextConfig


Benefits of Using Inline CSS

  • Improved Page Load Performance
    Inlining CSS reduces the time to render critical elements, improving key metrics like FCP and LCP.
     
  • Reduced LCP and FCP
    By removing external CSS requests, the browser can paint content faster.
     
  • Better Performance on Slow Connections
    With fewer network requests, pages load faster, even on slower networks.


When Not to Use Inline CSS

  • Large CSS Bundle Sizes
     Inlining large CSS bundles can bloat the HTML, increasing TTFB (Time to First Byte).
     
  • Dynamic CSS-Heavy Sites
    If your site relies on a lot of dynamic or frequently updated styles, inlining may cause redundant styling and unnecessarily large HTML files.

 

Visual Comparison (With Images)

Below, we will include images to illustrate the difference in how CSS was previously loaded in Next.js 15 initial version (relying on external stylesheets) and how it’s now handled in Next.js 15 with the inline CSS feature. These visuals will help you understand the performance improvements and the reduction in network requests.

Next.js 15 CSS Network request


Screenshot 2024-12-10 at 10.22.56 PM.png
 

Next JS Article - https://nextjs.org/docs/app/api-reference/config/next-config-js/inlineCss

How to inline critical CSS in Next.js
Next.js performance optimization guide
Benefits of inlining CSS in Next.js
Inline CSS configuration for Next.js 15
Reduce FCP and LCP with CSS inlining
inline css
inline css in next js

Read More