Starting State: Lighthouse 34, FCP 8.2 Seconds
The site: a Next.js 13 ecommerce platform with 500+ product pages, 15,000 monthly visitors, and a 68% bounce rate. The client had noticed conversion dropping sharply above 3 seconds. Their average page load was 8.2 seconds.
Step 1: Images — LCP 11.4s to 3.8s
47 product images served as unoptimised JPEGs, averaging 1.4MB each — 65MB total initial page payload. Migrating to next/image with automatic WebP conversion, responsive srcsets, lazy loading, and priority={true} on the above-fold hero image cut LCP from 11.4 seconds to 3.8 seconds. Single change, largest impact.
Step 2: Bundle Analysis — TBT 2,800ms to 680ms
The JavaScript bundle included the full Lodash library for three utility functions and a date formatting library for one date display. Analytics scripts were loading synchronously in the document head, blocking rendering for 1.1 seconds. Tree-shaking and next/script afterInteractive for analytics resolved both issues.
Step 3: Incremental Static Regeneration — TTFB 2.1s to 45ms
Product pages were server-rendered on every request despite product data changing at most twice per day. ISR with revalidate: 3600 moved TTFB from 2.1 seconds to 45 milliseconds for cached responses.
Step 4: Edge Functions for Personalisation
Personalised content computed in us-east-1 added 380ms of network latency for UK visitors before the server even started generating a response. Vercel Edge Functions eliminated the geography penalty entirely.
Final Result: Lighthouse 94
FCP 0.8s. LCP 1.4s. TBT 80ms. Bounce rate: 68% to 45%. Add-to-cart conversion up 18%. The site is now the fastest in its competitive set per CrUX field data.