Next.js and Sanity cms Mobile Core Vitals Optimization

My production-ready Next.js/Sanity site performs well on desktop, but the mobile scores are being pulled down by a slow Largest Contentful Paint. That hero image is the culprit: it already loads lazily, yet Lighthouse still shows LCP, FCP, TBT and Speed Index outside the “good” range for smartphones.

I’m looking for a specialist who knows how to squeeze every millisecond out of a React/Next.js build—someone comfortable profiling with Lighthouse, WebPageTest, and Chrome DevTools, then applying surgical fixes rather than generic advice. I want mobile LCP to drop below 2.5 s without harming layout or SEO.

Current setup
• Next.js (latest) with dynamic routing
• Lazy loading enabled via next/image
• Cloudflare CDN in front of Vercel hosting

What I expect from you
• Diagnose why the main hero image remains slow even with lazy loading
• Implement image-focused techniques: smart compression, properly sized responsive variants, priority hints, preload where beneficial, or switching formats (e.g., AVIF/WebP)
• Remove or defer non-critical JS/CSS that blocks first paint to improve FCP and TBT
• Provide a short report explaining each change and before/after Lighthouse mobile scores

Acceptance criteria
1. Mobile LCP ≤ 2.5 s on live URL (90+ score in Lighthouse mobile).
2. FCP, Speed Index and TBT all in the green zone.
3. No visual regressions, broken links, or console errors.

If you have a track record of boosting Core Web Vitals on image-heavy Next.js sites, I’d love to see your approach and a timeline.