Increase Your Performance in Next.js App: Advanced Optimization Techniques

🗑️ 1. Remove Unnecessary Polyfills

Next.js automatically injects polyfills for older browsers. If your application targets modern browsers, you are shipping dead code to users. You can optimize this by updating your browserslist.

// Add this to your package.json
"browserslist": [
  "last 2 Chrome versions",
  "last 2 Firefox versions",
  "last 2 Safari versions",
  "last 2 Edge versions",
  "not dead"
]

This simple change prevents Next.js from aggressively polyfilling modern ES features (like Promise.allSettled or Object.assign), significantly reducing your base JS bundle size.

🖼️ 2. Prioritize LCP Image Fetching

Your Largest Contentful Paint (LCP) element is almost always the Hero Image. Waiting for the browser to discover, download, and render this image kills your Lighthouse score. Tell the browser to aggressively fetch it first.

import Image from 'next/image';

export default function Hero() {
  return (
    <Image 
      src="/hero-banner.jpg" 
      alt="Hero Banner"
      fill
      priority={true} // Bypasses lazy loading
      fetchPriority="high" // 👈 The magic attribute
    />
  );
}

The fetchPriority="high" property signals the browser scheduler to load this image concurrently with critical CSS/JS, drastically improving LCP times.

⚡ 3. Skip Initial Render Animations on LCP Elements

Animating your Hero section text/images with Framer Motion looks great, but rendering them at opacity: 0 initially causes the browser to record a massive delay on the LCP.

"use client";
import { motion } from "framer-motion";
import { useEffect, useState } from "react";

export default function HeroContent() {
  // Check if it's the initial page load to skip animation
  const [isFirstRender, setIsFirstRender] = useState(true);
  
  useEffect(() => {
    setIsFirstRender(false);
  }, []);

  return (
    <motion.h1
      initial={isFirstRender ? false : { opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
    >
      Fast LCP Rendered Without Delay
    </motion.h1>
  );
}

🌲 4. Tree-Shake Heavy Libraries

Icon libraries like lucide-react or @heroicons/react can bloat your JavaScript chunk if not imported optimally. You can enforce aggressive tree-shaking natively via Next.js configuration.

// next.config.ts
import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  experimental: {
    optimizePackageImports: [
      'lucide-react',
      'date-fns',
      'lodash'
    ],
  },
};
export default nextConfig;

This forces the Next.js compiler to ONLY bundle the exact icons/functions you import, rather than downloading the entire barrel file mapping.

📸 5. Enable AVIF Image Compression

Next.js optimizes images to WebP by default. However, AVIF offers a 20% to 50% reduction in file size compared to WebP with similar or better quality.

// next.config.ts
const nextConfig = {
  images: {
    formats: ['image/avif', 'image/webp'],
  },
};
export default nextConfig;

The Next.js image optimization API will now analyze the user's browser, and serve AVIF if supported, falling back to WebP otherwise.

⏳ 6. Lazy-Load Below-the-Fold Components

If your landing page has complex components (like interactive maps, heavy charts, or 3D models) that sit entirely below the fold, you shouldn't force the browser to render them on initial load.

import dynamic from 'next/dynamic';

// Next.js will chunk this code separately
const HeavyChart = dynamic(() => import('@/components/HeavyChart'), {
  loading: () => <p className="h-64 animate-pulse bg-gray-100 dark:bg-gray-800" />,
  ssr: false // Optional: Disable Server Side Rendering for pure client libs
});

export default function LandingPage() {
  return (
    <div>
      <Hero />
      <Features />
      {/* Chart will only load when the user scrolls near it */}
      <HeavyChart />
    </div>
  );
}

🔗 7. Preconnect to Analytics Third-Parties

Establishing DNS lookups, TCP handshakes, and SSL negotiations with third-party servers (like Google Analytics, Stripe, or Vercel Web Analytics) takes valuable time.

Add preconnect declarations to your global layout.tsx to instantiate these connections early in the page lifecycle:

// app/layout.tsx
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head>
        <link rel="preconnect" href="https://www.google-analytics.com" />
        <link rel="preconnect" href="https://api.stripe.com" />
        <link rel="dns-prefetch" href="https://vitals.vercel-insights.com" />
      </head>
      <body>{children}</body>
    </html>
  );
}

✒️ 8. Zero CLS with next/font

Cumulative Layout Shift (CLS) happens when custom fonts load late and text suddenly resizes. Next.js natively solves this via next/font by automatically self-hosting your Google Fonts and applying generic font fallbacks pre-calculated to have the exact same CSS dimensions as your target font.

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

const inter = Inter({ 
  subsets: ['latin'],
  display: 'swap', // Important for immediate rendering
});

export default function RootLayout({ children }) {
  return (
    <html lang="en" className={inter.className}>
      <body>{children}</body>
    </html>
  );
}