Core Web Vitals — What You Must Know

11. Core Web Vitals — What You Must Know

This is a direct SE conversation topic. Customers want to improve their scores.

11.1 LCP — Largest Contentful Paint

What it is: Time until the largest image or text block is visible.

Common causes of poor LCP:

• Large hero images not optimised
• Server-side rendering delay (slow TTFB)
• Render-blocking resources

Vercel/Next.js fixes:

// 1. Use next/image (auto-optimises, lazy loads, WebP conversion)
import Image from 'next/image';
<Image src="/hero.jpg" alt="Hero" priority width={1200} height={600} />
// Note: `priority` on above-the-fold images disables lazy loading

// 2. Preconnect to third-party origins
<link rel="preconnect" href="https://fonts.googleapis.com" />

// 3. Use next/font (zero layout shift, inline CSS)
import { Inter } from 'next/font/google';
const inter = Inter({ subsets: ['latin'] });

11.2 CLS — Cumulative Layout Shift

What it is: How much the layout shifts as content loads (buttons jumping, text reflowing).

Common causes:

• Images without width/height dimensions (browser doesn't reserve space)
• Fonts loading after text renders
• Dynamically injected content above existing content

Fixes:

// next/image automatically sets aspect ratio — prevents CLS
<Image src="/photo.jpg" alt="" width={800} height={600} />

// next/font loads inline — zero CLS
const geist = Geist({ subsets: ['latin'] });

11.3 INP — Interaction to Next Paint

What it is: How fast the browser responds to user input (replaced FID in 2024).

Common causes:

• Large JavaScript bundles blocking the main thread
• Too many Client Components (unnecessary hydration)
• Expensive third-party scripts

Fixes:

• Move Client Components down the tree (only 'use client' where truly needed)
• Code split with dynamic() imports
• Defer third-party scripts with next/script and strategy="lazyOnload"