Jignesh Portfolio Logo
Back to blogs

How to Improve Core Web Vitals LCP INP CLS in Next js for Top Performance

May 28, 2025
6 min read
How to Improve Core Web Vitals LCP INP CLS in Next js for Top Performance

Ever thought why your Next.js site isn’t ranking as high as you’d like or why users leave before the page fully loads? The answer might lie in your Core Web Vitals—specifically LCP, INP, and CLS. These are key metrics Google uses to evaluate real-world user experience, and they play a big role in both performance and SEO.

This guide shows you practical and actionable steps to improve Core Web Vitals in a Next.js project. Whether you’re a developer or simply want to make your site faster and smoother, you’ll find helpful strategies and small code examples throughout.


What Are Core Web Vitals and Why Do They Matter?


Core Web Vitals are performance metrics introduced by Google to measure user experience. As of 2024, the key metrics are:


  1. Largest Contentful Paint (LCP): Measures loading performance. Aim for under 2.5 seconds.
  2. Interaction to Next Paint (INP): Measures responsiveness. Aim for under 200ms.
  3. Cumulative Layout Shift (CLS): Measures visual stability. Aim for under 0.1.


Improving these can enhance your site's user experience and visibility in search engines.


How to Measure Core Web Vitals


Use the following tools to evaluate your current performance:

  1. Google PageSpeed Insights – Enter your URL for a detailed report.
  2. Web Vitals Chrome Extension – Monitor metrics live as you navigate your site.
  3. Lighthouse – Built into Chrome DevTools for a full performance audit.


Optimizing Largest Contentful Paint (LCP)


1. Use Modern Image Formats

  1. Use WebP instead of JPEG/PNG for faster loading.
  2. Use the built-in Next.js <Image /> component for automatic optimization.


import Image from 'next/image';

function Hero() {
return (
<Image src="/hero.webp" width={1200} height={600} alt="Hero Image" priority />
);
}


2. Preload Key Assets

  1. Preload fonts, CSS, and critical scripts using next/head or next/script.


import Head from 'next/head';

function MyPage() {
return (
<>
<Head>
<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossOrigin="anonymous" />
</Head>
</>
);
}


3. Optimize Server Response Times

  1. Upgrade to a performant host or use a CDN.
  2. Vercel’s Edge Network offers built-in performance benefits for Next.js apps.


4. Minimize and Defer Non-Critical JavaScript

  1. Remove unused code to reduce bundle size.
  2. Use the next/script component with defer strategies.


import Script from 'next/script';

function MyPage() {
return (
<Script src="https://example.com/analytics.js" strategy="afterInteractive" />
);
}


5. Use Efficient Caching

  1. Cache static assets via headers and deployment config.
  2. Next.js supports this out of the box with static file caching.


Optimizing Interaction to Next Paint (INP)


1. Minimize Processing Delay

  1. Use Chrome DevTools to identify and break down long tasks.
  2. Use debounce and throttle techniques to reduce frequent execution.


import { useState } from 'react';
import debounce from 'lodash.debounce';

function SearchBar() {
const [searchTerm, setSearchTerm] = useState('');

const handleSearch = debounce((value) => {
// fetchResults(value);
}, 300);

return (
<input onChange={(e) => handleSearch(e.target.value)} />
);
}


2. Minimize Presentational Delay

  1. Use efficient CSS that avoids layout recalculation.
  2. Prefer transform and opacity for animations.


.animate {
transition: transform 0.3s ease, opacity 0.3s ease;
}
.animate:hover {
transform: scale(1.1);
opacity: 0.8;
}


3. Optimize Event Handlers

  1. Use passive listeners to avoid blocking the main thread.


useEffect(() => {
const handleScroll = () => {
// Lightweight scroll logic
};
window.addEventListener('scroll', handleScroll, { passive: true });
return () => window.removeEventListener('scroll', handleScroll);
}, []);


4. Leverage React 18 Concurrent Features

  1. Use useTransition, Suspense, and automatic batching to improve responsiveness.


import { useState, useTransition } from 'react';

function SearchResults() {
const [query, setQuery] = useState('');
const [results, setResults] = useState([]);
const [isPending, startTransition] = useTransition();

const handleChange = (e) => {
const value = e.target.value;
setQuery(value);
startTransition(() => {
// Simulate fetch
setResults([]);
});
};

return (
<input value={query} onChange={handleChange} />
);
}


Optimizing Cumulative Layout Shift (CLS)


1. Set Explicit Dimensions

  1. Use fixed width and height attributes for images and iframes.


<Image src="/product.jpg" width={500} height={500} alt="Product Image" />


2. Load Fonts Properly

  1. Use next/font with font-display: swap to prevent layout shifts.


import { Inter } from 'next/font/google';

const inter = Inter({ subsets: ['latin'], display: 'swap' });

export default function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />;
}


3. Use Performant Animation Techniques

  1. Avoid animating width, height, or margin.


.slide-in {
transform: translateX(100%);
transition: transform 0.3s ease;
}
.slide-in.visible {
transform: translateX(0);
}


Next.js Optimization Cheatsheet


  1. Use the <Image /> component for optimized images.
  2. Load fonts with next/font.
  3. Use next/script to control script loading.
  4. Preload critical assets.
  5. Defer non-essential CSS/JS.
  6. Use React 18 concurrent features.
  7. Set explicit dimensions for all media.
  8. Enable caching for static files.
  9. Profile your code and break long tasks.


Frequently Asked Questions


Q: What are Core Web Vitals?

A: Metrics that measure how users experience your site—LCP, INP, and CLS.


Q: Why are they important for SEO?

A: Google factors them into search rankings, so improving them boosts visibility.


Q: How can I measure them?

A: Use tools like Google PageSpeed Insights, Lighthouse, and the Web Vitals extension.


Q: How can I improve LCP in Next.js?

A: Optimize images, preload assets, reduce JavaScript/CSS, and cache resources.


Q: How do I reduce CLS?

A: Set fixed dimensions on media and load fonts in a layout-stable way.


Q: How does Next.js help with these metrics?

A: Next.js offers first-class support with components like <Image>, next/font, and next/script.


Conclusion

Improving Core Web Vitals in Next.js enhances both SEO and user experience. Fast, stable, and responsive websites lead to higher engagement and better rankings.

Start by measuring your current vitals, then apply the optimizations covered in this guide. Even small improvements can make a big difference in how your site performs and feels.

Next.js performanceimprove website speedCore Web Vitalsoptimize Next.jsLCP INP CLSwebsite optimizationNext.js best practicesweb performance tipsNext.js SEOfast-loading websitesNext.js developmentfrontend performanceweb vitals improvementNext.js speed optimizationmodern web development

Recent Blogs

View All
How Next js Middleware Works Simple Examples for Authentication SEO and More
June 3, 2025
3 min read

How Next js Middleware Works Simple Examples for Authentication SEO and More

What Are Docker and Kubernetes Simply Explained
June 1, 2025
5 min read

What Are Docker and Kubernetes Simply Explained

How to Improve Core Web Vitals LCP INP CLS in Next js for Top Performance
May 28, 2025
6 min read

How to Improve Core Web Vitals LCP INP CLS in Next js for Top Performance

How i Set Up Authentication in Next js using Kinde Auth with Examples
May 24, 2025
4 min read

How i Set Up Authentication in Next js using Kinde Auth with Examples