No history yet

Mastering Core Web Vitals

Performance Is What Users Feel

We often talk about performance in technical terms: bundle size, server response time, render cycles. But to a user, performance is simply a feeling. Does the site feel fast? Is it responsive? Is it stable? To quantify these feelings, Google introduced Core Web Vitals, a set of metrics that measure real-world user experience.

Core Web Vitals are the subset of Web Vitals that apply to all web pages, should be measured by all site owners, and will be surfaced across all Google tools.

These vitals focus on three key aspects of the user journey:

  1. Largest Contentful Paint (LCP): How long does it take for the main content to load? This measures perceived loading speed.
  2. Interaction to Next Paint (INP): How quickly does the page respond to user input? This measures interactivity.
  3. Cumulative Layout Shift (CLS): Does the page layout jump around as it loads? This measures visual stability.

Mastering these metrics is crucial because they directly impact how users perceive your application. A slow, janky site feels broken, even if all the code is technically correct. In a React app, where we control the entire rendering pipeline with JavaScript, our architectural choices have a huge effect on these numbers.

Profiling in the Browser

Before you can fix performance problems, you have to find them. The best place to start is the Chrome DevTools Performance tab. This tool gives you a detailed timeline of everything the browser does to load and render your page, from network requests to JavaScript execution and painting pixels.

Lesson image

To profile your app, open DevTools, go to the Performance tab, and click the record button (or press Ctrl+E / Cmd+E). Reload the page, interact with it, and then stop the recording. You'll get a detailed breakdown.

Look for the “Timings” track. Chrome will mark LCP right on the timeline. You can also find a dedicated “Experience” track that highlights layout shifts contributing to your CLS score. For INP, look for long tasks in the main thread—these are JavaScript executions that take more than 50 milliseconds and block the browser from responding to user input. Identifying these bottlenecks is the first step toward optimization.

React's Impact and How to Fix It

Single Page Applications built with React face unique performance challenges. Because so much logic is handled by JavaScript, a large bundle can single-handedly ruin your Core Web Vitals. The browser must download, parse, and execute all that code before the page becomes fully interactive, delaying both LCP and INP.

The primary strategy to combat this is This technique involves breaking your large JavaScript bundle into smaller chunks that can be loaded on demand. React has built-in support for this with React.lazy and the Suspense component.

import React, { Suspense, lazy } from 'react';

// Use React.lazy to import a component dynamically
const AdminDashboard = lazy(() => import('./components/AdminDashboard'));

function App() {
  // Assume some state determines if the user is an admin
  const isAdmin = useIsAdmin();

  return (
    <div>
      <h1>My App</h1>
      {/* The Suspense component shows a fallback while the lazy component loads */}
      {isAdmin && (
        <Suspense fallback={<div>Loading dashboard...</div>}>
          <AdminDashboard />
        </Suspense>
      )}
    </div>
  );
}

In this example, the code for AdminDashboard isn't included in the initial bundle. It's only fetched from the network when the component is first rendered. This is perfect for features that are only visible to certain users or on specific routes.

Optimizing resources goes beyond just code. Images are frequently the LCP element. Ensure you are serving properly sized images, compressing them, and using modern formats like WebP or AVIF. For fonts, using font-display: swap; in your CSS ensures that text is visible immediately with a system font while the custom font loads. This prevents the custom font from blocking the initial render and can also help reduce layout shifts.

By prioritizing resources and loading code on demand, you can ensure your React application delivers a fast, responsive, and stable experience that scores well on all

Let's test your understanding of these performance metrics.

Quiz Questions 1/5

Which of the following are the three main metrics that make up Google's Core Web Vitals?

Quiz Questions 2/5

A user reports that the layout of your web page shifts unexpectedly as images and ads load. Which Core Web Vital metric is specifically designed to measure this user experience problem?

By actively profiling your application and applying targeted optimizations like code splitting and resource prioritization, you can build React applications that not only work well but feel great to use.