Web & Software
Core Web Vitals for Next.js: Understanding LCP, INP and CLS
Identify slow loading, delayed interactions and shifting layouts, then connect each symptom to a focused Next.js improvement.
Measure the experience, not just the build
A Next.js application can build successfully and still feel slow on a phone. Core Web Vitals describe three aspects of that experience: Largest Contentful Paint measures loading of the largest eligible visible content, Interaction to Next Paint measures responsiveness and Cumulative Layout Shift measures unexpected visual movement.
Google's published good thresholds are LCP within 2.5 seconds, INP at or below 200 milliseconds and CLS at or below 0.1. Field assessment looks at the 75th percentile, separated by device type. One fast laptop run does not show that real visitors meet those thresholds.
LCP: make the important content arrive sooner
Find the LCP element in a performance trace before changing code. It may be a large heading or image, not the asset you expected. Slow server response, delayed discovery, transfer size and rendering work can all contribute. Optimize the part of the timeline that is actually slow.
For a Next.js article page, render the title and introduction without waiting for a client-side request. Use appropriate image dimensions and optimization for raster content. Next.js documents its Image component's sizing and delivery behavior; check the version-specific guidance before prioritizing an above-the-fold image. Do not eagerly load every image in a long article index.
INP: leave time for the browser to respond
Interaction delay often comes from JavaScript occupying the main thread when someone clicks or types. A large calculation, repeated rendering or a third-party script can delay visible feedback. Measure a representative search, menu or tool interaction rather than judging only the initial page load.
Keep client components as small as the interaction allows, and leave static article content on the server. For a long text input, avoid parsing the entire document on every keystroke if an explicit action would meet the task better. When animation follows a pointer, bound the work and avoid a continuous loop when nothing changes.
CLS: reserve space before content arrives
Unexpected movement makes reading and interaction harder. Reserve an image's dimensions or aspect ratio, avoid inserting a banner above content after load and check how fallback fonts affect wrapping. A button moving just as someone taps it is a usability defect even when a synthetic score looks acceptable.
Test the first load, not only a warm repeat visit. For example, an article illustration that starts at zero height and expands after loading shifts everything below it. Giving it a stable aspect ratio addresses the cause; adding a fade animation does not reserve the missing space.
Use lab and field evidence together
Lighthouse is useful for a repeatable lab baseline, especially when the environment and throttling are recorded. Its Total Blocking Time can help diagnose responsiveness, but a navigation run is not a measurement of real-user INP across a visit. Search Console and Chrome UX Report data, where available, provide a different view of field experience.
Compare changes on the same routes and devices with several runs, then check the trace for the cause of a regression. Record transferred JavaScript and major third-party work as well as headline scores. Improve the slowest meaningful step first and repeat the actual interaction: optimization should make the page easier to use, not merely produce a more attractive report.
Primary references
Sources checked 1 November 2026. Follow the current documentation for changes to features, limits and pricing.