June 2024, we noticed rankings dropping exclusively on mobile. Desktop rankings stayed strong. Our Lighthouse scores looked great on desktop—all greens. Mobile showed a different story. Largest Contentful Paint was hitting 6.8 seconds. Cumulative Layout Shift was 0.42. Google started flagging pages as having poor experience.
The gap existed because we tested on desktop with fast connections. Real mobile users on 3G networks had completely different experiences. Our hero images were 2.1MB, and we loaded custom fonts that blocked rendering. Mobile processors struggled with our animation libraries.
**What specific mistakes caused the performance gap?**First, responsive images weren't actually responsive. We served the same 1920px images to mobile devices, just CSS-scaled them down. Second, third-party scripts loaded synchronously. Our chat widget alone added 1.4 seconds to mobile LCP. Third, we had no priority hints. The browser didn't know what to load first.
We also discovered our CDN wasn't optimized for mobile networks. Cache hit rates on mobile were 34% lower than desktop because of how mobile carriers handle requests.
**How do you actually fix mobile Core Web Vitals?**We implemented proper srcset attributes with WebP and AVIF formats. Reduced our largest images from 2.1MB to 340KB without visible quality loss. Moved all third-party scripts to load after user interaction or with significant delay.
Font loading strategy changed completely. We used font-display swap and preloaded only critical font weights. Cut our font payload from 890KB to 120KB.
The real breakthrough was testing on actual mobile devices with throttled connections. Chrome DevTools mobile emulation wasn't enough. We bought mid-range Android devices and tested on real 3G networks. Rankings recovered within three months, mobile traffic increased 67%.