How to Optimize Web Vitals in Next.js App

What Is Web Vitals Initiative?

Google's Web Vitals initiative provides a standardized framework for measuring user experience through key performance signals. Web Vitals turns real user metrics into clear, measurable metrics.

This standardization enables site owners to consistently track their performance and understand how users experience their pages. Rather than introducing new optimization techniques, Web Vitals creates a common language and measurement system for evaluating web performance across different sites and contexts.

Core Web Vitals are a subset of Web Vitals, representing the metrics considered most important for user experience. They are part of Google's "Page Experience" signals, which affect a website's search ranking.

The three main metrics of Core Web Vitals are:

• Largest Contentful Paint (LCP),
• Interaction To Next Paint (INP),
• and Cumulative Layout Shift (CLS).

Largest Contentful Paint (LCP) (_loading_ performance)

LCP (Largest Contentful Paint) measures the time it takes for the largest content element visible in the viewport to become fully loaded and visible to the user. This element could be an image, video, or a sizeable block-level text.

LCP is a key metric for understanding how quickly a page's main content loads, which is a crucial part of the overall user experience. Pages that load faster engage users better and reduce bounce rates, positively influencing SEO rankings.

How to optimize LCP

Here are some common strategies to optimize Largest Contentful Paint (LCP) in Next.js apps:

• Optimize Images:

  Use WebP/AVIF format.

  Use next/image priority prop for above-the-fold images.

  Lazy load non-critical images (done automatically by next/image)

  Use srcset attribute to size the image appropriately (done automatically by next/image)

• Preload Resources:

 Use <link rel="preload"> for early fetching essential resources. Evaluate which resources are critical for the first render and preload only those.

• SSR:

 Enable server-side rendering to quicken initial content visibility.

• Critical CSS:

 Inline necessary above-the-fold CSS.

• Preconnect:

 Establish early connections to crucial third-party domains.

Interaction To Next Paint (INP) (_interactivity_)

Interaction To Next Paint (INP) is a critical user-centric performance metric used to track a web page's responsiveness. It measures the delay between a user's interaction with a page, such as clicking a link or tapping a button, and the time the browser can begin processing event handlers in response.

A lower INP score means a more responsive site, which matters because responsiveness directly impacts user satisfaction. A webpage that reacts swiftly to user inputs feels more fluid and natural, improving the overall user experience.

How to optimize INP?

• Selective Hydration with Suspense: Use React 18's selective hydration features to make parts of your page interactive without loading the entire JavaScript bundle.
• Lazy Loading: Use lazy loading for images, scripts, and components that aren't essential to the initial user interaction.
• Optimize JavaScript Bundling: Code-splitting with dynamic imports helps reduce JavaScript bundle size.
• Use CSS for animations: Where possible, use CSS instead of JavaScript for animations and transitions.
• Throttle and Debounce Event Handlers: For events that trigger frequently, implement throttling or debouncing.
• Reduce DOM Complexity: Simplify the DOM structure and keep it lean.
• Use Web Workers: Offload heavy computations to web workers.
• Implement Efficient Data Fetching: Optimize data fetching strategies using SWR or React Query.
• Prioritize Content and Interactions: Use the startTransition API to mark certain updates as non-urgent.

Cumulative Layout Shift (CLS) (_visual stability_)

CLS (Cumulative Layout Shift) measures a website's visual stability by tracking unexpected content shifts during loading. A high CLS score can frustrate users, as shifting elements may cause accidental clicks.

How to optimize CLS

• Specify Image Dimensions: Use the Next.js Image component to enforce setting height and width properties.
• Use Layout Component: Implement a consistent layout across all pages.
• Skeleton Screens: Implement skeleton UIs to maintain layout stability as content loads.
• Prevent Ad Layout Shifts: Place ad containers in the Layout component.
• Correct Handling of Fonts: Use font-display settings or preload key fonts.
• Stable Styled Components: Utilize the babel-plugin-styled-components and ServerStyleSheet.
• Preload key fonts and critical CSS.

Other Web Vitals

First Contentful Paint (FCP)

FCP measures how quickly a page displays the first piece of content to users. Ideally, sites should achieve an FCP of 1.8 seconds or less.

How to optimize FCP:

• Minimize critical CSS
• Defer non-critical JavaScript code
• Use efficient caching strategies
• Handle fonts properly

Total Blocking Time (TBT)

TBT measures how long the main thread is blocked by long tasks, preventing the page from responding to user interactions. It is measured between FCP and Time to Interactive (TTI).

Time to First Byte (TTFB)

TTFB measures the duration from when a resource request is made until the first byte of the response is received.

Deprecated metrics

Time To Interactive (TTI) — removed from Lighthouse 10, replaced by LCP, TBT, and INP.

First Input Delay (FID) — replaced by INP because INP captures the latency of all interactions within a session, not just the first one.

Metrics Weight in Lighthouse

Metric  |  Abbreviation  |  Weighting

First Contentful Paint  |  FCP  |  10%

Speed Index (SI)  |  SI  |  10%

Largest Contentful Paint (LCP)  |  LCP  |  25%

Total Blocking Time (TBT)  |  TBT  |  30%

Cumulative Layout Shift (CLS)  |  CLS  |  25%

Strategic Focus for Optimization:

• High-Impact Metrics: TBT (30%) and LCP (25%) should be your primary focus.
• Secondary Metrics: CLS (25%) is also critical.
• Supportive Metrics: FCP (10%) and SI (10%) are less weighted but still important.

Keypoints

1. Web Vitals is a standardized framework by Google that measures user experience based on real user metrics.
2. LCP Optimization Strategies include image optimization, resource preloading, SSR, inlining critical CSS, and early connection establishment.
3. INP Optimization Techniques involve selective hydration, lazy loading, reducing JS execution, CSS-based animations, throttling event handlers, simplifying DOM, and using Web Workers.
4. CLS Optimization Methods include defining image dimensions, using consistent layouts, skeleton UI, preventing ad layout shifts, preloading fonts, and server-side styling.
5. Deprecated Metrics: Time to Interactive (TTI) and First Input Delay (FID) have been replaced by more accurate alternatives like INP and TBT.