How to fix low performance score on Headless / Custom (I build in code)

Steps for Headless / Custom (I build in code)

1. Run Lighthouse in CI (GitHub Actions or similar) on every deploy using the lighthouse-ci npm package so regressions are caught automatically.
2. Implement Next.js Image component (next/image) or equivalent framework image optimisation — it handles WebP conversion, lazy loading, and prevents CLS via reserved space automatically.
3. Code-split aggressively: use dynamic imports for non-critical components (modals, chat, reviews carousels) so the initial JS bundle is minimal.
4. Serve from a CDN edge (Vercel Edge Network, Cloudflare Workers, AWS CloudFront); set Cache-Control headers on static assets: 'public, max-age=31536000, immutable'.
5. Inline critical CSS for above-the-fold content at build time using tools like critical (npm) and load the rest with <link rel='preload' as='style'>.
6. Use <link rel='preconnect'> and <link rel='dns-prefetch'> in <head> for every third-party origin (fonts, analytics, payment SDKs) to reduce connection setup latency.
7. Add explicit width and height to all <img> tags or use aspect-ratio CSS to reserve layout space and eliminate CLS.
8. Monitor real-user Core Web Vitals via web-vitals npm package reporting to your analytics or Google Search Console.

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.