How to Fix Core Web Vitals in React: Lowering INP and LCP Below 200ms

The Cost of Poor Core Web Vitals on Organic Traffic

Google explicitly uses Core Web Vitals as a search ranking factor. When potential customers visit your website and tap a button or open a navigation drawer, even a 300ms delay sends negative behavioral signals that damage both your conversion rate and your search visibility.

While building [Restaurant OS](/projects/4), our team had to ensure that waiters and chefs handling real-time order states experienced instant, 60fps tactile feedback even on budget mobile devices. Here is the exact performance playbook we used to achieve sub-100ms INP.

1. Taming Interaction to Next Paint (INP)

The most common culprit behind a red INP score is performing heavy state computations synchronously inside an event handler. Use React's `startTransition` API to prioritize immediate user visual feedback while deferring heavy background filtering or re-calculations.

import { useState, useTransition } from "react";

export function ProductCatalogSearch({ items, onSelect }) {
  const [searchTerm, setSearchTerm] = useState("");
  const [filteredItems, setFilteredItems] = useState(items);
  const [isPending, startTransition] = useTransition();

  const handleSearchChange = (e) => {
    const query = e.target.value;
    // 1. Immediate visual update for the input field
    setSearchTerm(query);

    // 2. Non-blocking deferred transition for 1000+ items
    startTransition(() => {
      const results = items.filter((item) =>
        item.name.toLowerCase().includes(query.toLowerCase())
      );
      setFilteredItems(results);
    });
  };

  return (
    <div>
      <input
        type="text"
        value={searchTerm}
        onChange={handleSearchChange}
        placeholder="Search inventory..."
        className="px-4 py-2 bg-zinc-900 border border-white/10 rounded-xl"
      />
      {isPending && <span className="text-xs text-cyan-400">Filtering...</span>}
      {/* Product List */}
    </div>
  );
}

2. Optimizing Largest Contentful Paint (LCP)

LCP measures how long it takes for the largest visual element on the screen (usually a hero image or title banner) to become fully visible. To optimize LCP below 1.5s:

• Preload critical hero images in the <head> using <link rel='preload' as='image' fetchpriority='high' />
• Convert legacy PNGs and JPEGs into compressed WebP format (typically saves 70% file size)
• Never lazy-load the hero image above the fold
• Inline critical CSS and host fonts locally with font-display: swap

Ready to Speed Up Your Web App?

Is your website feeling sluggish or losing customers due to slow load times? [Get in touch with Aafaque Nazir](/contact) for a comprehensive frontend performance audit and speed optimization.