Page speed advice is 90% noise. "Minify your CSS" saves 2ms. "Serve images in AVIF" saves 2 seconds. Here are the 10 changes that actually move the needle, ranked by impact.
The big three (do these first)
1. Image optimization (saves 1–5 seconds)
Use next/image with formats: ["image/avif", "image/webp"] in next.config. Set priority on the hero image (LCP element). Set loading="lazy" on everything below the fold. This single change has the largest impact on most sites.
2. Third-party script deferral (saves 0.5–3 seconds)
Load GTM, analytics, and chat widgets with strategy="lazyOnload". Never use beforeInteractive for anything except critical functionality. Third-party scripts are the #1 cause of slow LCP on otherwise fast sites.
3. Static generation (saves 0.5–2 seconds)
Use SSG (static generation) for marketing pages, blog posts, and any content that doesn't change per-request. Static HTML served from a CDN is the fastest possible delivery. Dynamic pages add server response time.
The next seven
- Font display: swap. Prevents invisible text while fonts load. Add
display: "swap"to next/font/google config. - DNS prefetch. Add
<link rel="dns-prefetch">for external domains (image CDNs, analytics). Saves 50–150ms per external request. - Reduce CLS. Set explicit dimensions on images and embeds. Use font display: swap. Reserve space for lazy-loaded content.
- Code splitting. Next.js does this automatically per-route. Don't import heavy libraries at the root layout — import them in the pages that use them.
- Remove unused dependencies. Run
npx depcheckto find packages in package.json that no file imports. Each unused dependency adds to the install and potentially the bundle. - Minimize main thread work. Long JavaScript tasks (>50ms) block the main thread and increase INP. Use React.lazy for heavy components. Defer non-critical initialization.
- Preconnect to critical origins. Add
<link rel="preconnect">for your API domain and image CDN. Different from dns-prefetch — preconnect establishes the full connection (DNS + TCP + TLS).
How to measure
- PageSpeed Insights: lab data + field data (if available). Test on mobile.
- Chrome DevTools → Performance tab: record a page load, look for long tasks and late LCP.
- Vercel Analytics: real-user CWV data across all pages.
- WebPageTest: filmstrip view shows exactly what loads when. The most revealing tool for debugging load sequences.