Core Web Vitals at Enterprise Scale: A Next.js Field Guide

Core Web Vitals are now table stakes — they affect search ranking, conversion and user trust. Yet most enterprise applications we audit fail at least one vital. Here's the systematic path to green, drawn from dozens of Next.js engagements.

LCP: ship less, render sooner

Largest Contentful Paint failures usually trace to render-blocking chains and oversized hero media. Server components cut client JavaScript dramatically; priority hints and next/image sizing handle the media. Target: the LCP element requestable within the first round trips, no waterfall behind data fetching.

INP: the new frontier

• Break long tasks — anything over 50ms blocks interaction
• Move non-urgent work to transitions and idle callbacks
• Virtualize long lists; hydrate islands progressively
• Audit third-party scripts ruthlessly — tag managers are INP graveyards

CLS: reserve every pixel

Layout shift is a discipline problem: explicit dimensions on media, reserved space for dynamic content, font loading with proper fallback metrics. Our rule: nothing renders that might move later.

Keep it green with budgets

One-time fixes decay. Performance budgets in CI — bundle size limits, Lighthouse assertions on key pages — turn regressions into failed builds instead of quarterly surprises. Field data (CrUX, RUM) reviewed monthly closes the loop, because lab numbers lie about real users on real networks.