# How I Cut LCP from 3.5s to 1.2s on a Next.js E-Commerce Site By Govind Bajaj · 2025 Tags: next.js, core-web-vitals, lcp, performance, web-performance Lighthouse was at 65. LCP sat at 3.5 seconds. Two weeks of focused Core Web Vitals work brought Lighthouse to 95 and LCP to 1.2s. Here's the exact checklist. The Sans Herbals homepage had a Lighthouse score of 65 and an LCP of 3.5 seconds when I ran the first audit. The hero image was a 2.1MB JPEG. The product thumbnails were unoptimized PNGs. The custom font loaded via @import blocked rendering for 800ms. And the analytics script loaded synchronously in the head. Two weeks later: Lighthouse 95, LCP 1.2 seconds. No redesign, no feature cuts. Just systematic performance optimization. Here is the exact checklist I used. ## What LCP Actually Measures Largest Contentful Paint tracks how long the largest visible element takes to render. For most e-commerce sites, this is the hero image or the main product image. Google wants it under 2.5 seconds. In 2025, only 62% of mobile sites meet this threshold. The rest are leaving money on the table — slow LCP correlates with 8-35% worse conversion rates depending on the study. ## Step 1: Fix the Hero Image (Biggest Impact) The hero image was 2.1MB, 3840px wide, served as a JPEG. The viewport is 1440px wide on desktop, 375px on mobile. ```tsx // Before: unoptimized img tag Herbal products // After: Next.js Image component with sizing import Image from 'next/image' Herbal products ``` The Next.js Image component automatically converts to WebP (30% smaller than JPEG), generates responsive sizes for different viewports, adds lazy loading (except with priority), and prevents layout shift by reserving space. Result: 2.1MB to 87KB WebP. LCP improved by 1.4 seconds. ## Step 2: Preload Critical Resources The browser discovers resources by parsing HTML. For below-the-fold images, this is fine. For the LCP element, you want the browser to start loading as early as possible. ```tsx // app/layout.tsx import { preload } from 'react-dom' export default function RootLayout({ children }) { preload('/hero.jpg', { as: 'image' }) return ( {children} ) } ``` With priority on the Next.js Image component, this happens automatically. But for custom elements or fonts, manual preloading matters. ## Step 3: Fix Font Loading The custom font loaded via CSS @import, which blocks rendering until the font file downloads. ```css /* After: font-display swap with preload */ @font-face { font-family: 'Inter'; src: url('/fonts/Inter-var.woff2') format('woff2'); font-weight: 100 900; font-display: swap; /* Show fallback font immediately, swap when loaded */ } ``` font-display: swap prevents invisible text during font loading. The user sees content immediately with a fallback font, then the custom font replaces it when loaded. This eliminates the font blocking time from LCP. ## Step 4: Defer Non-Critical Scripts Third-party scripts are performance killers. Analytics, chat widgets, cookie banners — they all compete for bandwidth and CPU during initial load. ```tsx // After: Next.js Script component with lazy loading import Script from 'next/script'