Google's Core Web Vitals directly impact your search rankings and user experience. A client's e-commerce platform was scoring 38 on Lighthouse — and losing an estimated $200K/year in organic traffic. Here's how we fixed it.
The Starting Point
- LCP (Largest Contentful Paint): 6.8s (should be under 2.5s)
- FID (First Input Delay): 340ms (should be under 100ms)
- CLS (Cumulative Layout Shift): 0.42 (should be under 0.1)
- Lighthouse Score: 38/100
Optimization 1: Image Strategy (LCP: 6.8s → 2.1s)
The hero image was a 2.4MB unoptimized JPEG loaded via CSS background. We switched to next/image with priority prop, converted to WebP with AVIF fallback, and added responsive sizes. LCP dropped by 70%.
Optimization 2: Bundle Analysis (FID: 340ms → 85ms)
Using @next/bundle-analyzer, we found three massive libraries loaded on every page: moment.js (300KB), lodash (70KB), and an unused charting library (400KB). We replaced moment with dayjs (2KB), imported specific lodash functions, and lazy-loaded charts. Total JS shipped dropped from 1.2MB to 380KB.
Optimization 3: Font Loading (CLS: 0.42 → 0.05)
Web fonts were causing massive layout shifts. We used next/font with display: swap and size-adjust to match fallback font metrics. Added explicit width and height to all images and skeleton loaders for dynamic content.
Optimization 4: Third-Party Scripts
Analytics, chat widgets, and ad scripts were blocking the main thread. We moved everything to next/script with strategy="lazyOnload" and deferred non-critical third-party scripts until after user interaction.
Optimization 5: Server-Side Rendering
Converted key pages from client-side rendering to SSR with streaming. The server sends the HTML shell immediately while data-heavy sections stream in progressively.
Final Results
- LCP: 6.8s → 1.8s
- FID: 340ms → 45ms
- CLS: 0.42 → 0.03
- Lighthouse Score: 38 → 96
- Organic traffic: +34% within 3 months
Is your site underperforming on Core Web Vitals? We can audit and optimize it.
