Core Web Vitals Optimisation in Next.js

Why Core Web Vitals Matter

Google's Core Web Vitals directly affect your search ranking. A slow website costs you clients before they even read your first sentence.

The three metrics that matter: LCP (Largest Contentful Paint) — target under 2.5s. CLS (Cumulative Layout Shift) — target under 0.1. INP (Interaction to Next Paint) — target under 200ms.

1 — Optimise Images with next/image

import Image from "next/image"

<Image
  src="/hero.jpg"
  alt="Hero"
  width={1200}
  height={600}
  priority
  quality={85}
/>

The priority prop preloads the image. Only use it on your first visible image.

2 — Lazy Load Heavy Components

import dynamic from "next/dynamic"

const HeavyChart = dynamic(() => import("./HeavyChart"), {
  loading: () => <div className="h-64 bg-gray-100 animate-pulse" />,
  ssr: false,
})

3 — Add Security Headers

const securityHeaders = [
  { key: "X-Frame-Options",       value: "SAMEORIGIN" },
  { key: "X-Content-Type-Options", value: "nosniff"   },
]

module.exports = {
  async headers() {
    return [{ source: "/(.*)", headers: securityHeaders }]
  },
}

4 — Analyse Your Bundle

pnpm add -D @next/bundle-analyzer
ANALYZE=true pnpm build

Conclusion

A well-optimised Next.js site can hit 95-100 on all four PageSpeed categories. If you need help getting your site to that level, reach out.