Fix PageSpeed Score on Vercel

Last updated: April 2026

Vercel handles compression automatically. The main PageSpeed improvements come from correct cache headers and Next.js optimisations.

Cache headers via vercel.json

{
  "headers": [
    {
      "source": "/_next/static/(.*)",
      "headers": [{ "key": "Cache-Control", "value": "public, max-age=31536000, immutable" }]
    },
    {
      "source": "/images/(.*)",
      "headers": [{ "key": "Cache-Control", "value": "public, max-age=2592000" }]
    },
    {
      "source": "/api/(.*)",
      "headers": [{ "key": "Cache-Control", "value": "no-store" }]
    }
  ]
}

Next.js image optimisation

// next.config.js
module.exports = {
  images: {
    formats: ['image/avif', 'image/webp'],
    minimumCacheTTL: 2592000, // 30 days
  },
};

// Use next/image for automatic optimisation
import Image from 'next/image';
<Image src="/hero.jpg" width={1200} height={600}
  priority fetchPriority="high" alt="Hero" />

Preload LCP font

// app/layout.tsx
import { Inter } from 'next/font/google';
const inter = Inter({ subsets: ['latin'], display: 'swap' });
// next/font automatically adds preload link