How to fix low performance score on Next.js (Headless)

Steps for Next.js (Headless)

1. Replace every native <img> tag with Next.js <Image> from 'next/image', always supplying width, height, and a descriptive alt prop. For above-the-fold hero images set priority={true} to preload them; for everything else rely on the default lazy loading.
2. Audit third-party and custom scripts: move any <script> tags into Next.js <Script> from 'next/script' and set strategy='lazyOnload' (analytics, chat widgets) or strategy='afterInteractive' (tag managers). Never use strategy='beforeInteractive' unless absolutely required.
3. Enable the built-in font optimisation: import all Google/custom fonts via 'next/font' (next/font/google or next/font/local). This eliminates the render-blocking font request, self-hosts the font file, and injects an inline font-face declaration automatically.
4. Reduce JavaScript bundle size: run 'next build && next analyze' (add @next/bundle-analyzer to next.config.js) to spot large dependencies, then code-split heavy components with dynamic(() => import('./HeavyComponent'), { ssr: false }) so they are not part of the initial bundle.
5. Configure next.config.js for maximum asset optimisation: enable the 'swcMinify' option (default in Next 13+), add image 'formats' (['image/avif','image/webp']), set appropriate 'deviceSizes' and 'imageSizes', and add 'Cache-Control' headers via the 'headers()' function to maximise CDN caching.
6. Improve Core Web Vitals (LCP, CLS, INP): ensure the LCP image uses priority={true} + explicit dimensions to avoid layout shift, wrap dynamically sized ad/embed containers in a fixed aspect-ratio shell to eliminate CLS, and defer all non-critical data fetching to avoid blocking the main thread.

What is low performance score?

The Lighthouse Performance Score (shown in Google's PageSpeed Insights tool) is a single number from 0–100 that summarises how fast your web page loads and responds for real users — especially on mobile. It is calculated from five timing metrics, with the three Core Web Vitals (Largest Contentful Paint, Interaction to Next Paint, and Cumulative Layout Shift) carrying the most weight. A score below 50 is considered "Poor" by Google; a score above 90 is "Good." Think of it as a health-check report card for your page's speed: every point you gain means real customers are waiting less and leaving less.

Google officially uses page experience signals — including Core Web Vitals — as a ranking factor, meaning a very low score can directly suppress your position in search results and reduce organic traffic. Beyond rankings, a slow page destroys conversions: industry data consistently shows that each additional second of load time drops conversion rates by 10–20 %, and mobile shoppers are the most sensitive. A score of 8/100 on mobile means the vast majority of your mobile visitors are likely bouncing before they even see your products, costing you both ad spend and organic sales. Closing this gap is one of the highest-ROI technical improvements an ecommerce store can make.

See the complete Low performance score guide for every platform and the full background.