Core Web Vitals SEO: Fix LCP, CLS, and INP for Better Rankings
Run npx unlighthouse to identify LCP/CLS/INP issues, then preload hero images, set width/height, use Next.js Image priority, add font-display swap and preload, and reserve layout space with skeletons.
Run npx unlighthouse, then apply the LCP and CLS fixes: preload hero images, set width/height, use Next.js Image priority, add font-display swap and preload, and reserve layout space with skeletons.
Summary
Core Web Vitals—LCP, CLS, and INP—are now ranking signals in Google search, with INP replacing FID in March 2024, so a fast, stable page is essential for SEO. React SPAs that render an empty `<div id="root">` can cause Googlebot to crawl before content loads, resulting in poor LCP scores and lower rankings. The article recommends running `npx unlighthouse --site https://your-site.com --reporter json` to identify routes that hurt LCP, CLS, or INP, and then applying targeted fixes. For LCP, preloading the hero image, eager‑loading it, setting explicit width and height, and using `fetchpriority="high"` or Next.js’s `Image` component with the `priority` prop can drop LCP from 4.2 s to 1.8 s. CLS offenders include images without dimensions, dynamic banners, web fonts, and async ad slots; fixing them involves using `font-display: swap` with font preloading and reserving layout space with skeleton components. The article also highlights that Next.js’s `priority` prop automatically sets `fetchpriority="high"` and disables lazy loading, simplifying the LCP fix. By addressing these issues, developers can improve both user experience and search rankings, ensuring that Core Web Vitals metrics stay within the target thresholds of LCP < 2.5 s, CLS < 0.1, and INP < 200 ms. The guide serves as a practical checklist for diagnosing and regressing Core Web Vitals in production sites.
Key changes
- Core Web Vitals (LCP, CLS, INP) are ranking signals; INP replaced FID in March 2024
- React SPAs rendering an empty root can cause Googlebot to crawl before content loads, hurting LCP
- Diagnostic command: `npx unlighthouse --site <url> --reporter json` identifies problematic routes
- Fix LCP by preloading hero image, eager‑loading, setting width/height, and using fetchpriority high or Next.js Image priority
- Next.js Image priority prop drops LCP from 4.2 s to 1.8 s
- CLS offenders include images without dimensions, dynamic banners, web fonts, async ad slots
- Fix fonts with font-display: swap and preload, and reserve layout space with skeleton components
- Meeting target thresholds: LCP < 2.5 s, CLS < 0.1, INP < 200 ms