How to fix page speed warning on Next.js (Headless)

Steps for Next.js (Headless)

1. Use next/image for ALL product and hero images — set `priority` on above-the-fold images, always supply `width`/`height` or `fill`, and configure `remotePatterns` in `next.config.ts` so images are auto-converted to WebP/AVIF and lazy-loaded by default.
2. Eliminate render-blocking fonts by switching to `next/font` (e.g. `next/font/google`). Call the font loader at the module level, apply the returned `className` to your root layout, and remove any manual `<link rel='stylesheet'>` font imports from `app/layout.tsx`.
3. Enable HTTP response compression and long-lived caching headers in `next.config.ts`: set `compress: true`, add `Cache-Control` headers for static assets via the `headers()` async function, and leverage Next.js's built-in ISR (`revalidate`) to avoid full SSR on every request.
4. Code-split and lazy-load heavy below-the-fold components (carousels, modals, review widgets) with `next/dynamic` and `{ ssr: false, loading: () => <Skeleton /> }` so their JS is not part of the critical bundle.
5. Add a `<link rel='preconnect'>` and `<link rel='dns-prefetch'>` for every third-party origin (CDN, analytics, payment scripts) inside `app/layout.tsx` via the Next.js `<Head>` equivalent metadata exports or direct JSX in the root layout.
6. Run `next build && next start` and audit with Lighthouse / `@next/bundle-analyzer` — set `ANALYZE=true` in `.env.local`, identify large chunks, and either tree-shake or dynamically import them.

What is page speed warning?

Page load time is how long it takes for a visitor's browser to fully display your store page after they click a link or type your URL. When a page takes more than 1.5–2 seconds to load, visitors experience a noticeable delay before they can see and interact with your content. A load time of 3 seconds or more (like the example finding) is considered slow by both Google and modern shoppers. Page speed is measured by several signals — the most important being Google's Core Web Vitals, which assess how fast your content appears, how quickly it becomes interactive, and how stable the layout is as it loads.

Google has officially made page speed and Core Web Vitals a direct ranking factor for all pages. Slow pages rank lower in search results, meaning fewer people find your store organically — costing you traffic and revenue before a visitor even arrives. For shoppers who do visit, studies consistently show that every additional second of load time reduces conversions: a 3-second page loses a significant portion of mobile shoppers to bounce before they see a single product. Slow stores also perform poorly in Google's mobile-first index, which evaluates your mobile experience first when deciding your rankings. Fixing page speed is one of the highest-ROI improvements an ecommerce store can make — it simultaneously boosts your SEO rankings, increases conversion rates, and improves accessibility for users on slower connections or lower-end devices.

See the complete Page speed warning guide for every platform and the full background.