LCP and INP Optimization: What Actually Moves the Score

Google rolled INP into Core Web Vitals in March 2024 and a lot of sites that thought they were fine suddenly weren't. Here's what's changed and what actually helps your scores.

LCP: It's Almost Always About the Image

For most sites, the LCP element is a hero image. The first thing to do: run Lighthouse and confirm what your actual LCP element is. It's sometimes text, sometimes a video thumbnail, sometimes something you didn't expect.

Once you know what it is, the checklist matters less than the sequence. The browser needs to: discover the image exists, download it, and render it. Preloading the LCP image moves step one to as early as possible:

Don't lazy-load your LCP image. I see this constantly — teams add loading='lazy' to all images globally and accidentally apply it to the hero. That adds 300-500ms to LCP immediately.

INP: The Main Thread Is Your Enemy

INP is slow because JavaScript is blocking the browser's ability to respond to input. The main thread processes both JavaScript and user input — when JS runs, input is queued. Long tasks (tasks over 50ms) cause visible delays.

The fastest fix: reduce JavaScript execution during interactions. If a button click triggers 200ms of JS, the user feels that delay. Profile it with Chrome DevTools → Performance → start recording → click the button → stop recording. You'll see exactly what's running.

Common INP Killers and Fixes

• React state updates that re-render large trees → use React.memo, useMemo, or startTransition
• Synchronous filtering/sorting of large arrays in event handlers → move to Web Worker or use deferred rendering
• Layout thrashing in animations → use transform and opacity only, avoid triggering layout
• Third-party chat widgets, analytics, and ad scripts → defer them with requestIdleCallback

CLS: The One That's Easiest to Fix

Cumulative Layout Shift is almost always caused by images without explicit dimensions, ads loading and pushing content down, or fonts causing text reflow. Set explicit width and height on every image. Reserve space for ads before they load. Use font-display: swap with a system font fallback that's similar in size to your web font.