Core Web Vitals Optimization

1 post · Aug 2022 – Jan 2026

What this trail covers

Vercel's platform provides tools and guidance for optimizing website performance, focusing on key metrics like Core Web Vitals. This includes detailed explanations and optimization strategies for metrics such as First Input Delay (FID) and Interaction to Next Paint (INP), enabling developers to improve user experience and site responsiveness. React 18's concurrent features (Transitions, Suspense, React Server Components) are highlighted as key enablers for reducing long tasks and improving TBT. The platform also introduces new tools like `await-interaction-response` to help developers manage complex interactions and ensure responsiveness by separating user interaction acknowledgment from expensive rendering tasks.

All Vercel trails

Jan 2026Introducing: React Best PracticesThis post introduces a structured framework for identifying and fixing common React performance issues, including async waterfalls, large client bundles, and unnecessary re-renders. It categorizes these issues into eight performance categories (Eliminating async waterfalls, Bundle size optimization, Server-side performance, Client-side data fetching, Re-render optimization, Rendering performance, Advanced patterns, and JavaScript performance) and assigns an impact rating (CRITICAL to LOW) to each rule. The framework is designed to be followed consistently, including by AI agents, and provides code examples for incorrect and correct patterns. Specific examples include combining loop iterations, parallelizing awaits, and lazy state initialization. The framework is also packaged as Agent Skills for AI agents.
May 2025How v0 is building SEO-optimized sites by defaultThis post details how v0 generates SEO-optimized sites by default by leveraging Next.js optimizations for Core Web Vitals (image optimization, font optimization, smart JavaScript bundling/prefetching). It highlights built-in support for SEO metadata (title, meta description, Open Graph, Twitter Cards, JSON-LD) and mobile-first responsive design. The post also emphasizes the use of accessible components as a ranking signal. It reiterates that v0 deployments run on Vercel's infrastructure, benefiting from edge caching, ISR, and Vercel Analytics/Speed Insights for privacy-friendly measurement. Server-Side Rendering (SSR) with Next.js App Router and Server Components is a default, providing full HTML for crawlers and improving LCP/INP scores.
Jun 2024Demystifying INP: New tools and actionable insightsThis post introduces the `await-interaction-response` module, a new tool for developers to manage complex user interactions by separating the acknowledgment of user input from the subsequent rendering or data fetching operations. It explains the nuances of the Interaction to Next Paint (INP) metric, detailing its anatomy and common pitfalls. The post provides strategies for optimizing INP by minimizing blocking code, shortening event handlers, and reducing browser render times, with a specific focus on the latter two phases and a practical example using a language picker component.
Sep 2023First Input Delay (FID) vs. Interaction to Next Paint (INP)This post introduces Interaction to Next Paint (INP) as the successor to First Input Delay (FID) for Core Web Vitals. It details the differences between FID and INP, explaining that INP measures the entire interaction lifecycle (input delay, processing delay, and presentational delay) across all user interactions, not just the first one. The post provides optimization strategies for processing and presentational delays, including profiling code, debouncing/throttling, code splitting, using `will-change`, `transform`/`opacity` for animations, reducing forced synchronous layouts, and using passive event listeners. It also highlights Vercel Speed Insights, PageSpeed Insights, and Lighthouse as tools for measuring INP.
Jul 2023How React 18 Improves Application PerformanceThis post explains how React 18's concurrent features (Transitions, Suspense, React Server Components) improve application performance by addressing the problem of long tasks on the main thread. It details the concepts of the main thread, long tasks, Total Blocking Time (TBT), and Interaction to Next Paint (INP). It contrasts traditional synchronous React rendering with concurrent rendering, demonstrating how non-urgent renders can yield back to the main thread to prevent UI unresponsiveness. The post includes a code example and performance metrics to illustrate the impact of these features.
Advertisement
Aug 2022Approaches for optimizing your dashboard's frontendThis post details specific techniques applied to the Vercel Dashboard to improve its performance and Core Web Vitals. Key contributions include: optimizing JavaScript by reducing redundant `isLoggedIn()` calls (from ~270ms to ~90ms render time), caching results of a `slugify` function (saving ~200ms), emphasizing mindful code imports and strategic lazy loading of heavy components using an `useInViewport` hook. It also covers strategies for third-party scripts like using tree-shaking, lazy loading, and `next/script` strategies. For HTML/CSS, it highlights eliminating needless markup duplication and leveraging Next.js optimizations like `<Image />` and automatic font inlining, and using variable fonts.
Aug 2022Improving INP with React 18 and SuspenseThis post details how React 18's Suspense and selective hydration can improve Interaction to Next Paint (INP) by making hydration non-blocking. It explains the difference between INP and FID, and provides a case study of nextjs.org reducing TBT from 430ms to 80ms and achieving INP of 48ms. It also suggests other techniques for optimizing INP, such as using CSS for animations, throttling/debouncing events, reducing DOM size, and lazy loading resources.