Next.js Performance Hacks — Performance Guide by make-it.run

Understanding and optimizing the metrics that matter for user experience and SEO

Core Web Vitals are a set of specific factors that Google considers important for a webpage's overall user experience. These metrics are part of Google's page experience signals used for ranking.

The Three Core Metrics

LCP

Largest Contentful Paint measures loading performance. Target: under 2.5 seconds.

INP

Interaction to Next Paint measures responsiveness. Target: under 200 milliseconds.

CLS

Cumulative Layout Shift measures visual stability. Target: under 0.1.

Optimization Decision Tree

When a metric is failing, follow this decision tree to identify and fix the issue:

Decision tree for Core Web Vitals optimization: diagnose which metric is failing, follow the appropriate optimization path

Supporting Metrics

While not "core" vitals, these metrics provide additional insights:

Metric	What It Measures	Good Score
FCP	First Contentful Paint - when first content appears	< 1.8s
TTFB	Time to First Byte - server response time	< 800ms
FID	First Input Delay (deprecated, replaced by INP)	< 100ms
TBT	Total Blocking Time - main thread blocking	< 200ms

Why Core Web Vitals Matter

SEO Impact

Google uses Core Web Vitals as ranking signals. Pages with poor scores may rank lower than competitors with better performance.

// Example: Check if your page passes Core Web Vitals
interface WebVitalsResult {
  lcp: number;  // Largest Contentful Paint in ms
  inp: number;  // Interaction to Next Paint in ms
  cls: number;  // Cumulative Layout Shift score
}

function passesWebVitals(metrics: WebVitalsResult): boolean {
  return (
    metrics.lcp <= 2500 &&
    metrics.inp <= 200 &&
    metrics.cls <= 0.1
  );
}

User Experience

Poor Core Web Vitals directly correlate with:

Higher bounce rates
Lower conversion rates
Reduced user engagement
Negative brand perception

Business Impact

Vodafone found that improving LCP by 31% led to an 8% increase in sales. Renault saw a 1-second LCP improvement generate 13% higher conversions. Performance optimization has direct ROI.

Next.js Performance Advantages

Next.js provides built-in optimizations that help with Core Web Vitals:

Automatic Code Splitting

// Each page only loads the JavaScript it needs
// pages/about.tsx only loads about-page code
export default function AboutPage() {
  return <div>About content</div>;
}

Image Optimization

import Image from 'next/image';

// Automatic WebP/AVIF, lazy loading, and proper sizing
export function HeroImage() {
  return (
    <Image
      src="/hero.jpg"
      alt="Hero"
      width={1200}
      height={600}
      priority // Loads immediately for LCP
    />
  );
}

Font Optimization

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

// Automatic font subsetting and self-hosting
const inter = Inter({
  subsets: ['latin'],
  display: 'swap', // Prevents CLS from font loading
});

Quick Wins Checklist

Add priority to LCP images Identify your largest above-the-fold image and add the priority prop.

Use next/font for all fonts Prevents layout shift and optimizes font loading.

Set explicit dimensions on images Always specify width and height to prevent CLS.

Defer non-critical JavaScript Use dynamic imports for components not needed immediately.

Enable static generation where possible Pre-rendered pages have better TTFB and LCP.

Measuring Your Metrics

Lab Data vs Field Data

Type	Source	Use Case
Lab Data	Lighthouse, DevTools	Development, debugging
Field Data	CrUX, RUM tools	Real user experience

Lab data doesn't capture real-world conditions like slow networks, old devices, or user behavior. Always validate with field data.

Recommended Tools

PageSpeed Insights - Quick analysis with both lab and field data
Chrome DevTools - Detailed performance profiling
Web Vitals Extension - Real-time metrics while browsing
Search Console - Site-wide Core Web Vitals report
Vercel Analytics - Built-in RUM for Next.js apps

Next Steps

Dive deep into each Core Web Vital:

Core Web Vitals Overview