DEV Community

Cover image for Core Web Vitals Explained: How to Fix LCP, CLS and INP in Your App
Synfinity Dynamics Pvt Ltd
Synfinity Dynamics Pvt Ltd

Posted on

Core Web Vitals Explained: How to Fix LCP, CLS and INP in Your App

#react #javascript #performance #webdev

You ship a feature, open PageSpeed Insights, and see red scores. Slow loading, jumping layouts and laggy clicks drive users away fast.

Core Web Vitals are three Google metrics that measure real-world page experience: loading speed (LCP), visual stability (CLS) and responsiveness (INP). Passing all three keeps users happy and supports your SEO.

In this guide, you’ll learn what each metric means, the thresholds to hit, and the code-level fixes for each one.

What Are Core Web Vitals?

Core Web Vitals are Google's three user-experience metrics for loading, visual stability and responsiveness. Google judges them using real-user data at the 75th percentile.

Metric Measures Good score
LCP (Largest Contentful Paint) Loading speed ≤ 2.5 seconds
CLS (Cumulative Layout Shift) Visual stability ≤ 0.1
INP (Interaction to Next Paint) Responsiveness ≤ 200 ms

INP replaced FID (First Input Delay) in March 2024. Unlike FID, which measured only the delay before the first interaction, INP evaluates responsiveness across user interactions throughout a page visit. Understanding what is SEO also means recognizing how Core Web Vitals, including INP, contribute to user experience and Google's page experience signals.

How to Fix LCP (Largest Contentful Paint)

A slow LCP usually comes from a heavy hero image, a slow server response or render-blocking resources. Fix them in this order:

  • Preload the hero image and mark it high priority.
  • Compress and resize images, and serve WebP or AVIF.
  • Improve server response time with caching or a CDN.
  • Remove render-blocking CSS and JavaScript from the critical path. 
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">
Enter fullscreen mode Exit fullscreen mode

In Next.js, add the priority prop to your above-the-fold image:

<Image src="/hero.webp" alt="Hero" width={1200} height={600} priority />
Enter fullscreen mode Exit fullscreen mode

Never lazy-load the LCP image, as this can delay the loading of the page's largest visible element. While optimizing page speed improves user experience, understanding What Is Answer Engine Optimization (AEO) can also help you structure content so AI-powered search engines can easily understand, extract, and present relevant answers.

How to Fix CLS (Cumulative Layout Shift)

CLS happens when elements load without reserved space and push other content around. The usual causes are images without dimensions, late-loading fonts, ads and embeds.

  • Set width and height on every image and video.
  • Use CSS aspect-ratio for responsive media.
  • Reserve space for ads, banners and embeds.
  • Use font-display: swap and preload key fonts to avoid text jumps. 
<img src="/product.webp" width="800" height="450" alt="Product">
Enter fullscreen mode Exit fullscreen mode 
.video-wrapper { aspect-ratio: 16 / 9; }

@font-face {
  font-family: "Inter";
  src: url("/inter.woff2") format("woff2");
  font-display: swap;
}
Enter fullscreen mode Exit fullscreen mode

Avoid injecting content above existing content after the page loads, such as a cookie banner that pushes everything down.

How to Fix INP (Interaction to Next Paint)

A poor INP score means long JavaScript tasks are blocking the main thread, so the page can't respond quickly to clicks, taps and key presses. Unlike FID, INP measures every interaction during a visit.

  • Break up long tasks so the browser can respond between chunks.
  • Defer non-critical JavaScript and load third-party scripts late.
  • Debounce heavy handlers such as search-as-you-type.
  • Cut unnecessary re-renders in React with useMemo, useCallback and React.memo. 
// Yield to the main thread between chunks of work
async function processItems(items) {
  for (const item of items) {
    handle(item);
    await new Promise(resolve => setTimeout(resolve, 0));
  }
}
Enter fullscreen mode Exit fullscreen mode 
const results = useMemo(() => filterItems(items, query), [items, query]);
Enter fullscreen mode Exit fullscreen mode

Test INP in Chrome DevTools using the Performance panel to identify long tasks exceeding 50 ms that may affect page responsiveness. If you're investigating why your website’s SEO dropped, checking Core Web Vitals alongside technical SEO issues can help uncover performance problems that may be affecting user experience and search visibility.

How to Measure Core Web Vitals

Measure Core Web Vitals with both lab data and field data, because they answer different questions.

  • Lab data comes from a controlled test, so use it to debug. Tools: Lighthouse and Chrome DevTools.
  • Field data comes from real users, and it's what Google uses for ranking. Tools: PageSpeed Insights, the Chrome UX Report (CrUX) and the Core Web Vitals report in Search Console.

Start with Search Console to find failing pages, then use Lighthouse to reproduce and fix the issue. Lighthouse can't measure INP directly, so check it with field data or the DevTools Performance panel.

Conclusion

Core Web Vitals come down to three fixes: load the main content fast (LCP), keep the layout stable (CLS) and respond to input quickly (INP). Start with the metric that's failing in Search Console, apply the fixes above, then re-check after a few weeks.

Which Core Web Vital is hardest in your app? Tell me in the comments.

Need help with performance? Synfinity Dynamics Pvt Ltd builds fast, SEO-ready web and mobile apps.

Top comments (0)