Optimizing Next.js app performance with Cloudflare CDN and edge functions

Performance work is mostly about removing round trips and work the browser does not need to do. A CDN and edge functions help with the first; discipline helps with the second.

Measure before optimizing

Start with the three numbers that map to user experience:

1. Largest Contentful Paint (LCP) under 2.5s
2. Interaction to Next Paint (INP) under 200ms
3. Cumulative Layout Shift (CLS) under 0.1

Anything else is a proxy.

Make the CDN useful

A CDN only helps if responses are cacheable. Set explicit headers on anything static.

return new Response(body, {
  headers: {
    "Cache-Control": "public, max-age=3600, s-maxage=31536000, immutable",
  },
});

Long s-maxage with a content hash in the URL is the safe combination.

Do work at the edge only when it is cheap

Edge compute is close to the user, not free. Good candidates:

• Geo or locale redirects
• Auth token validation for a cached page
• Header rewriting and A/B assignment

Poor candidates:

• Large database queries
• Anything requiring a warm process

Ship less JavaScript

The fastest request is the one you never make.

const Playground = dynamic(() => import("./playground"), { ssr: false });

Code-split anything the initial view does not need: charts, rich editors, maps, games.

Cache images and fonts correctly

• Serve modern formats and let the platform negotiate them
• Give images explicit dimensions to prevent layout shift
• Self-host fonts so the first paint does not wait on a third party

Every millisecond you save at the edge, you can lose back in one unoptimized image. Audit both.

Cache the static, compute the dynamic, and measure the result.