Next.js performance tuning: practical fixes for better Lighthouse scores

‍

3. Code Splitting with import() (Dynamic Imports for Functions)
   
   • Next.js automatically code-splits JavaScript files based on import() statements.
   • The function is not loaded until loadHeavyFunction is called.
   • Keeps the initial bundle lightweight.

async function loadHeavyFunction() {
  const { heavyFunction } = await import("../utils/heavyFunction");
  heavyFunction();
}

4. Visualising bundle heaviness

• While code splitting and dynamic imports help reduce load times, identifying heavy components/dependencies is crucial. Tools like Next.js’s built-in analyser or FoamTree provide interactive visualisations to pinpoint bottlenecks:
  
  • Using @next/bundle-analyzer provides a simple, interactive treemap chart.
    
• install @next/bundle-analyzer

npm install @next/bundle-analyzer

‍

• Configure in next.config.js

const withBundleAnalyzer = require("@next/bundle-analyzer")({
  enabled: process.env.ANALYZE === "true",
});

module.exports = withBundleAnalyzer({});

‍

• Run the analyser

ANALYZE=true npm run build

‍

• Using Hierarchy Visualisation Tools like FoamTree:

1. Install FoamTree (or an Alternative)

npm install @carrotsearch/foamtree
or
yarn add @carrotsearch/foamtree

‍

2. Generate a bundle analysis report
   
   • First, generate a Webpack stats file (since Next.js uses Webpack under the hood):

npx next build --profile

‍

• This creates .next/analyze/ with stats files.

‍

3. Parse & visualise with FoamTree
   
   • Create a utility to convert Webpack stats into a FoamTree-compatible hierarchy:

// utils/analyzeBundle.ts
import FoamTree from "@carrotsearch/foamtree";

export async function visualizeBundle() {
  // Fetch Webpack stats (generated from `next build --profile`)
  const stats = await fetch("/.next/analyze/client.json").then((res) =>
    res.json()
  );

  // Transform stats into hierarchical data for FoamTree
  const foamtreeData = {
    groups: Object.entries(stats.chunks).map(([chunkId, chunk]: [string, any]) => ({
      label: `Chunk ${chunkId} (${(chunk.size / 1024).toFixed(2)} KB)`,
      weight: chunk.size,
      groups: chunk.modules.map((module: any) => ({
        label: `${module.name} (${(module.size / 1024).toFixed(2)} KB)`,
        weight: module.size,
      })),
    })),
  };

  // Render FoamTree
  const foamtree = new FoamTree({
    id: "foamtree-visualization",
    dataObject: foamtreeData,
    rolloutDuration: 1000,
    pullbackDuration: 1000,
  });
}

‍

4. Create a visualisation component

// components/BundleVisualization.tsx
"use client"; // Required since FoamTree uses browser APIs

import { useEffect } from "react";
import { visualizeBundle } from "../utils/analyzeBundle";

export default function BundleVisualization() {
  useEffect(() => {
    visualizeBundle();
  }, []);

  return (
    <div>
      <h3>Bundle Heaviness Visualization</h3>
      <div
        id="foamtree-visualization"
        style={{ width: "100%", height: "600px" }}
      />
    </div>
  );
}

‍

5. Usage in your app

// app/analyze/page.tsx
import dynamic from "next/dynamic";

// Dynamically load FoamTree (since it's heavy and client-side only)
const BundleVisualization = dynamic(
  () => import("@/components/BundleVisualization"),
  { ssr: false }
);

export default function AnalyzePage() {
  return (
    <div>
      <h1>Performance Analysis</h1>
      <BundleVisualization />
    </div>
  );
}

‍‍

       Pros:

• Pinpoint bottlenecks - Interactive treemaps (like @next/bundle-analyzer) expose heavy dependencies at a glance.
• Data-driven optimisation - Quantify exact bundle impact (KB/MB) of each component/library.
• No guesswork - Replace assumptions with visual proof of costly third-party code.
• Built into Next.js - @next/bundle-analyzer requires zero config beyond setup.
  ‍

       Cons:

• Setup overhead - FoamTree requires manual Webpack stats parsing (vs. @next/bundle-analyzer’s simplicity).
• Dev-only utility - Tools like FoamTree can’t run in production environments.
• Build-time snapshot - Analyses static bundles, won’t catch runtime lazy-loaded chunks.

5. Minify CSS, JS, and HTML

1. Next.js automatically minifies CSS, JavaScript, and HTML when running next build.

• During the build process, Next.js uses:
  
  • Terser - Minifies JavaScript.
  • CSSNano - Minifies CSS.
  • HTML Minifier - Optimises HTML output.

2. Remove unused CSS (PurgeCSS)

• Next.js automatically removes unused CSS when using Tailwind CSS or other frameworks with PostCSS.
• PurgeCSS removes unused CSS from your stylesheets, reducing file sizes and improving page speed.
  
  • Reduces CSS file size - Faster load times.
  • Improves Largest Contentful Paint (LCP).
  • Eliminates render-blocking CSS.

       Pros:

• Automatic Size Reduction - Terser (JS), CSSNano (CSS), and HTML Minifier strip 20-60% of file bloat without manual effort.
• Built-In Performance Boost - Eliminates render-blocking resources by default in production builds.
• Dead Code Elimination - PurgeCSS + Tailwind auto-removes unused CSS (up to 90% reduction in CSS size).
• Improved LCP & TTI - Smaller files = faster parsing/execution (direct Lighthouse impact).
  ‍

       Cons:

• Debugging Difficulty - Minified code lacks readable variable names/line breaks (use source maps for debugging).
• Limited Customisation - Next.js’s default minifiers can’t be configured without ejecting/modifying the build chain.
• CSS Purge False Positives - PurgeCSS may accidentally remove dynamic classes (requires safelist configuration).

6. Font optimisation

• Optimising fonts in Next.js helps improve performance, Lighthouse scores, and First Contentful Paint (FCP). By properly preloading and optimising fonts, you ensure that text renders quickly without layout shifts or render-blocking delays.

       Pros:

• Faster text rendering - next/font eliminates render-blocking requests, improving FCP by 200- 500ms.
• Zero layout shifts - Preloaded fonts with display: swap prevent CLS (Cumulative Layout Shift).
• Reduced payload - Automatic subsetting removes unused glyphs (e.g., Latin-only fonts are 60% smaller).
• Privacy-first - Self-hosted fonts avoid third-party tracking (vs. Google Fonts).
• Built-In best practices - next/font handles preloading, compression, and cache headers automatically.
  ‍

       Cons:

• Setup complexity - Manual font hosting requires file management (vs. CDN simplicity).
• Limited dynamic control - next/font doesn’t support runtime font switching without full reload.
• FOIT risk - Missing display: swap may cause Flash of Invisible Text on slow networks.

‍

1. Preload fonts for faster rendering

• Preloading tells the browser to fetch fonts early, preventing delays in rendering. It reduces Flash of Invisible Text
• Ensures fonts load quickly and don’t delay rendering.
• Preloading only applies to fonts used above the fold (e.g., headings).

import { Html, Head, Main, NextScript } from "next/document";

export default function Document() {
  return (
    <Html lang="en">
      <Head>
        {/* Preload Font File */}
        <link rel="preload" href="/fonts/Inter-Variable.woff2" as="font" type="font/woff2" crossOrigin="anonymous" />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

‍

2. Use next/font for Automatic Optimisation

• next/font is a built-in Next.js feature that automatically optimises fonts, reducing unused styles and enabling subsetting.
• No need for external requests (e.g., Google Fonts).
• Loads only the required characters & styles, reducing font file size.
• Enables font preloading automatically.
• Improves Lighthouse scores (FCP & LCP).

import { Inter } from "next/font/google";

// Load Inter font with only required subsets
const inter = Inter({ subsets: ["latin"] });

export default function Home() {
  return (
    <div className={inter.className}>
      <h1>Optimized Google Font</h1>
      <p>Text rendered with optimised font loading.</p>
    </div>
  );
}

3. Using next/font/local for Custom Fonts

• If you're using self-hosted fonts, next/font/local is the best option.
• Self-hosted fonts load faster than fetching from a CDN.
• No external network requests - Better privacy and performance.
• Supports font weights, styles, and display properties.

import { NextFont } from "next/dist/compiled/@next/font";
import localFont from "next/font/local";

// Load Inter font locally
const inter: NextFont = localFont({
  src: "./Inter-Variable.woff2",
  weight: "400",
  style: "normal",
  display: "swap",
});

export default function Home() {
  return (
    <div className={inter.className}>
      <h1>Self-Hosted Font Optimization</h1>
      <p>Using locally hosted fonts for better performance.</p>
    </div>
  );
}

‍

4. Font Display Strategies for Performance

const roboto = Inter({
  subsets: ["latin"],
  display: "swap", // Ensures text is visible immediately
});

‍
‍

<Head>
  {/* Preload LCP image */}
  <link
    rel="preload"
    href="/hero.webp"as="image"
    imagesrcset=".../hero-800.webp 800w, .../hero-1200.webp 1200w"
    imagesizes="100vw"
	 />

  {/* Preload LCP font */}
  <link
    rel="preload"
    href="/fonts/Inter-Bold.woff2"
    as="font"
    type="font/woff2"
    crossOrigin="anonymous"/>
</Head>

// Images with explicit dimensions
<Image
	src="/product.webp"
	width={600}
	height={400}
	alt="Product"
	style={{
    aspectRatio: '600/400',  // Modern backup
    objectFit: 'cover'
  }}
/>