Core Web Vitals Fix List for Developers: LCP, INP and CLS

Core Web Vitals measure how fast your page loads, how quickly it responds and how stable it looks. Google reads them from real Chrome users, so lab scores alone do not tell the full story. Developers can fix most failures with a short list of changes. This guide walks through that list for the three metrics: LCP, INP and CLS. Each section shows the target, the usual cause and the code fix. What the Core Web Vitals targets are Google judges each metric at the 75th percentile of real page loads. A page passes when at least 75 percent of visits meet the "good" threshold. LCP (Largest Contentful Paint): good at 2.5 seconds or less. INP (Interaction to Next Paint): good at 200 milliseconds or less. INP replaced FID in March 2024. CLS (Cumulative Layout Shift): good at 0.1 or less. Check your field data first. Use PageSpeed Insights or the Core Web Vitals report in Search Console. Lab tools like Lighthouse help you debug, but they do not show what real users feel. Fix LCP: load the main element faster On most pages, the LCP element is a hero image or a large heading. Slow server responses, late discovery and heavy files cause most delays. Tell the browser to fetch the hero image early, and never lazy-load it: Then work through this list: Serve images in AVIF or WebP, sized for the display width. Put static assets behind a CDN. Cut server response time with caching or static generation. Inline the critical CSS and defer the rest. Fix INP: keep the main thread free INP tracks the slowest interaction during a visit. Long tasks block the main thread, so clicks and taps feel stuck. Any task above 50 milliseconds counts as long. Break heavy work into smaller chunks and let the browser paint in between: async function handleClick() { updateButtonState(); // quick visual feedback first await new Promise(r => setTimeout(r, 0)); // yield to the browser runHeavyWork(); // then do the expensive part } Some browsers also support scheduler.yield(), which keeps your task priority. Check support before you rely on it. More fixes that help: Defer or remove third-party scripts you do not need. Reduce hydration cost by shipping less client-side JavaScript. Debounce handlers on scroll, input and resize events. Fix CLS: reserve space before content loads Layout shifts happen when elements appear without reserved space. Late images, ads, banners and web fonts cause most of them. img, video { aspect-ratio: 16 / 9; width: 100%; height: auto; } .ad-slot { min-height: 250px; } Also set width and height on every image. Load fonts with font-display: swap and match fallback metrics. Animate with transform instead of properties that move the layout. Measure real users with the web-vitals library Lab tests miss many real-world problems. Add the open-source web-vitals library, and send the numbers to your analytics tool: import { onLCP, onINP, onCLS } from 'web-vitals'; onLCP(console.log); onINP(console.log); onCLS(console.log); Review the results by page template, not only by single URL. One slow template often explains dozens of failing pages. If you also want your pages quoted in AI answers, read our answer engine optimization checklist for developers. Core Web Vitals FAQs What are Core Web Vitals? Core Web Vitals are Google's field metrics for page experience. They cover loading speed (LCP), responsiveness (INP) and visual stability (CLS). What is a good LCP score? A good LCP is 2.5 seconds or less at the 75th percentile of real visits. Scores above 4 seconds count as poor. What replaced FID in Core Web Vitals? INP replaced FID in March 2024. INP looks at all interactions on a page, while FID measured only the first one. Do Core Web Vitals affect SEO rankings? Google uses page experience signals in ranking, but relevant content still matters most. Treat Core Web Vitals as a tiebreaker and a user experience win. How do I check Core Web Vitals? Open PageSpeed Insights for a single URL, or use the Core Web Vitals report in Search Console for your whole site. Need help fixing a slow site? Our team handles technical audits and fixes as part of DigiStreet Media's SEO services. If you plan a rebuild, see how we approach website development in India. Which metric fails most often on your site? Tell me in the comments. Disclosure: I publish this account for DigiStreet Media, a digital marketing agency in Noida, India.