Optimizing React applications for Core Web Vitals

Performance in a React app is not just speed — it is how the site feels to users. Google measures that with three main metrics:

• LCP (Largest Contentful Paint): time until the main content appears.
• INP (Interaction to Next Paint): how long the UI responds after a click or tap.
• CLS (Cumulative Layout Shift): how much the layout “jumps” while loading.

The good news: improving these metrics does not require magic. Measure, prioritize, and apply solid practices.

---

1. Avoid unnecessary re-renders

Each render costs CPU. When a component re-renders without reason, you lose performance for nothing.

Use React.memo, useMemo, and useCallback only where it helps:

tsxCopy
const ExpensiveList = React.memo(({ data }) => {
  // renders a large list
});

const Container = ({ items }) => {
  const sortedItems = useMemo(() => sortData(items), [items]);
  const handleClick = useCallback(() => console.log('clicked'), []);

  return <ExpensiveList data={sortedItems} onClick={handleClick} />;
};

Tip: use these on large lists or heavy calculations. Applying them everywhere can complicate code and even hurt performance.

---

2. Split the bundle with React.lazy

Large apps ship a lot of JavaScript on first visit. That slows LCP. Load only what the user needs now:

tsxCopy
import React, { Suspense } from 'react';
const Dashboard = React.lazy(() => import('./Dashboard'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <Dashboard />
    </Suspense>
  );
}

Heavy routes or modules load on demand, and the first load stays lighter.

---

3. Optimize images and fonts

• Use WebP or AVIF when possible.
• For fonts, font-display: swap avoids invisible text while fonts download.
• Serve correctly sized images with srcset and loading="lazy".

These changes hit LCP directly — the metric most tied to what appears on screen.

---

4. Measure before optimizing

Tools like Lighthouse, WebPageTest, and the React Profiler show where time is spent.

Without measurement, you optimize blindly.

---

5. Useful references

• React Docs – Performance
• Google Web.dev – Core Web Vitals
• Webpack Bundle Analyzer
• React Profiler
• Lighthouse CLI

---

Conclusion

Improving Core Web Vitals in React is ongoing work: fewer re-renders, smaller bundles, tuned images and fonts — and constant measurement to see if changes helped.

The result is a faster, more comfortable site.