Core Web Vitals Engineering Playbook: Fixing LCP, INP, and CLS in React & Vite SPAs

Google Search uses Core Web Vitals field data (CrUX) as a page experience ranking signal. Passing the assessment requires hitting the 75th percentile threshold across three metrics: Largest Contentful Paint (LCP ≤ 2.5s), Interaction to Next Paint (INP ≤ 200ms), and Cumulative Layout Shift (CLS ≤ 0.10).

1. Optimizing LCP: Hero Image Byte Weight & Fetch Priority

In over 70% of web pages, the Largest Contentful Paint element is a hero banner image or product photograph. Convert hero PNG/JPG images to WebP using the PNG to WebP Converter and never apply loading="lazy" to above-the-fold images:

<!-- Above-the-fold Hero Image: Eager load + High fetch priority + Explicit dimensions -->
<img
  src="/assets/hero-workspace.webp"
  width="1200"
  height="630"
  fetchpriority="high"
  decoding="async"
  alt="Workspace preview"
/>

2. Eliminating CLS & Reducing INP Main-Thread Blocking

• Reserve Explicit Aspect Ratio Boxes (CLS < 0.1): Always specify width and height attributes on images, embeds, and ad containers so the browser reserves layout space before network payloads arrive.
• Yield to the Main Thread on Heavy Input (INP < 200ms): Break long synchronous filter or search calculations into micro-tasks using React.startTransition or requestAnimationFrame so the browser can paint visual feedback immediately after a user keystroke.