In this guide, we\u2019ll explore the three Core Web Vitals and practical ways to improve them in a Next.js application.<\/p>\n\n\n\n
The Three Core Web Vitals<\/strong><\/h2>\n\n\n\nGoogle uses three primary metrics to evaluate the loading experience and responsiveness of a page:<\/p>\n\n\n\n
\n- Largest Contentful Paint (LCP)<\/strong> \u2013 Measures how quickly the largest visible content element loads.<\/li>\n\n\n\n
- Interaction to Next Paint (INP)<\/strong> \u2013 Measures how quickly a page responds to user interactions.<\/li>\n\n\n\n
- Cumulative Layout Shift (CLS)<\/strong> \u2013 Measures how much the page layout unexpectedly shifts while loading remains while loading.<\/li>\n<\/ul>\n\n\n\n
Each metric focuses on a different part of the user experience. Let\u2019s look at how you can improve them in a Next.js application.<\/p>\n\n\n\n![\"core](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2026\/09\/core-1200x675.webp\")
<\/figure>\n\n\n\n1. Largest Contentful Paint (LCP)<\/strong><\/strong><\/h2>\n\n\n\nLargest Contentful Paint measures the time it takes for the largest visible content element to appear on the screen.<\/p>\n\n\n\n
On an eCommerce website, this could be a hero banner, product image, or large heading.<\/p>\n\n\n\n
A slow LCP usually means that the browser is waiting too long for an important resource. Here are some practical ways to improve it.<\/p>\n\n\n\n
\n- Use the Next.js Image Component<\/strong><\/strong><\/li>\n<\/ul>\n\n\n\n
Large images are often one of the biggest contributors to slow page loads.<\/p>\n\n\n\n
Next.js provides the built-in Image<\/code> component to optimize images, generate responsive sizes, and serve modern image formats.
<\/p>\n\n\n\nimport Image from "next\/image";\n\n<Image\n src={product.thumbnail}\n alt={product.name}\n width={600}\n height={600}\n priority\n\/>;<\/pre>\n\n\n\nFor an above-the-fold image that is likely to become the LCP element, priority<\/code> can tell Next.js to prioritize loading it.<\/p>\n\n\n\nHowever, avoid using priority<\/code> on every image. Images below the fold should generally remain lazy-loaded.<\/p>\n\n\n\n\n- Preload Critical Resources<\/strong><\/strong><\/li>\n<\/ul>\n\n\n\n
Some resources are required to render the first screen of your page.<\/p>\n\n\n\n
For example, a hero image or an important font may be needed immediately. Preloading genuinely critical resources can help the browser fetch them earlier.<\/p>\n\n\n\n
Use preloading carefully. Preloading too many resources can compete for bandwidth and make performance worse.<\/p>\n\n\n\n
\n- Serve Images Through a CDN<\/strong><\/li>\n<\/ul>\n\n\n\n
Large product catalogs can contain thousands of images. Serving those images directly from a distant origin can increase loading time, especially for users in different geographic regions.<\/p>\n\n\n\n
A CDN stores and serves content from locations closer to users, reducing network latency.<\/p>\n\n\n\n
For eCommerce applications, combining responsive image sizes, modern formats, caching, and a CDN can significantly improve image delivery.<\/p>\n\n\n\n
2. Interaction to Next Paint (INP)<\/strong><\/h3>\n\n\n\nInteraction to Next Paint measures how quickly a page responds after a user interacts with it. Example include :- Clicking an Add to Cart button , Opening a navigation menu etc.<\/p>\n\n\n\n
Heavy JavaScript and long-running tasks can block the browser\u2019s main thread and delay these interactions.<\/p>\n\n\n\n
\n- Ship Less JavaScript<\/strong><\/li>\n<\/ul>\n\n\n\n
One of the simplest ways to improve responsiveness is to avoid sending unnecessary JavaScript to the browser.<\/p>\n\n\n\n
Next.js Server Components are useful for content that does not require client-side interaction.<\/p>\n\n\n\n
\nexport default async function CategoryPage() {\n const products = await getProducts();\n return <ProductGrid products={products} \/>;\n}<\/pre>\n\n\n\nKeep interactive functionality in Client Components and leave static or server-rendered content on the server whenever possible.
This is particularly useful for large eCommerce pages containing product grids, navigation, recommendations, and content sections.<\/p>\n\n\n\n
\n- Break Up Long Tasks<\/strong><\/li>\n<\/ul>\n\n\n\n
Long-running JavaScript tasks can block the main thread.<\/p>\n\n\n\n
For example, processing a large product dataset, performing expensive calculations, or executing a large event handler can delay the browser from responding to user input.<\/p>\n\n\n\n
Break expensive work into smaller tasks where possible and avoid unnecessary computations during interactions.<\/p>\n\n\n\n
\n- Lazy Load Below-the-Fold Code<\/strong><\/li>\n<\/ul>\n\n\n\n
Not every component needs to be loaded when the page initially renders.<\/p>\n\n\n\n
Filters, review widgets, recommendation sections, and some modal components may only be needed after the user interacts with the page.<\/p>\n\n\n\n
You can load such components dynamically:<\/p>\n\n\n\n
\nimport dynamic from "next\/dynamic";\n\nconst Filters = dynamic(() => import(".\/Filters"));<\/pre>\n\n\n\nThis reduces the amount of JavaScript that needs to be processed during the initial page load.<\/p>\n\n\n\n
3. Cumulative Layout Shift (CLS)<\/h3>\n\n\n\n
Cumulative Layout Shift measures unexpected movement of content while a page is loading.<\/p>\n\n\n\n
For example, imagine a user is about to click an Add to Cart button, but an image or promotional banner loads and pushes the button downward.<\/p>\n\n\n\n
These unexpected movements create a frustrating experience.<\/p>\n\n\n\n
\n- Define Image Dimensions<\/strong><\/li>\n<\/ul>\n\n\n\n
The browser needs to know how much space an image will occupy before the image finishes loading.<\/p>\n\n\n\n
Specify both width<\/code> and height<\/code> so the browser knows how much space to allocate before the image loads.<\/p>\n\n\n\nFor responsive images, use the appropriate aspect ratio and sizing strategy so the layout remains stable across screen sizes.<\/p>\n\n\n\n
\n- Reserve Space for Dynamic Content<\/strong><\/li>\n<\/ul>\n\n\n\n
Content such as promotional banners, recommendations, or advertisements often loads after the initial page render.<\/p>\n\n\n\n
Reserve space for these sections so they don’t push existing content downward.<\/p>\n\n\n\n
\n.banner-slot {\n min-height: 200px;\n}<\/pre>\n\n\n\n\n- Load Fonts Correctly<\/strong><\/li>\n<\/ul>\n\n\n\n
Web fonts can sometimes cause text to change size or appearance after the initial render.<\/p>\n\n\n\n
Next.js provides built-in font optimization through next\/font<\/code>, which helps control font loading and reduces layout-related issues.<\/p>\n\n\n\nMeasure Your Improvements<\/strong><\/h3>\n\n\n\nOptimization should always be based on measurements rather than assumptions.<\/p>\n\n\n\n
A page that performs well in development may behave differently for real users on slower devices and networks.<\/p>\n\n\n\n
\n- Use Lighthouse and PageSpeed Insights<\/strong><\/li>\n<\/ul>\n\n\n\n
Each metric focuses on a different part of the user experience. Let\u2019s look at how you can improve them in a Next.js application.<\/p>\n\n\n\n Largest Contentful Paint measures the time it takes for the largest visible content element to appear on the screen.<\/p>\n\n\n\n On an eCommerce website, this could be a hero banner, product image, or large heading.<\/p>\n\n\n\n A slow LCP usually means that the browser is waiting too long for an important resource. Here are some practical ways to improve it.<\/p>\n\n\n\n Large images are often one of the biggest contributors to slow page loads.<\/p>\n\n\n\n Next.js provides the built-in For an above-the-fold image that is likely to become the LCP element, However, avoid using Some resources are required to render the first screen of your page.<\/p>\n\n\n\n For example, a hero image or an important font may be needed immediately. Preloading genuinely critical resources can help the browser fetch them earlier.<\/p>\n\n\n\n Use preloading carefully. Preloading too many resources can compete for bandwidth and make performance worse.<\/p>\n\n\n\n Large product catalogs can contain thousands of images. Serving those images directly from a distant origin can increase loading time, especially for users in different geographic regions.<\/p>\n\n\n\n A CDN stores and serves content from locations closer to users, reducing network latency.<\/p>\n\n\n\n For eCommerce applications, combining responsive image sizes, modern formats, caching, and a CDN can significantly improve image delivery.<\/p>\n\n\n\n Interaction to Next Paint measures how quickly a page responds after a user interacts with it. Example include :- Clicking an Add to Cart button , Opening a navigation menu etc.<\/p>\n\n\n\n Heavy JavaScript and long-running tasks can block the browser\u2019s main thread and delay these interactions.<\/p>\n\n\n\n One of the simplest ways to improve responsiveness is to avoid sending unnecessary JavaScript to the browser.<\/p>\n\n\n\n Next.js Server Components are useful for content that does not require client-side interaction.<\/p>\n\n\n\n Keep interactive functionality in Client Components and leave static or server-rendered content on the server whenever possible. Long-running JavaScript tasks can block the main thread.<\/p>\n\n\n\n For example, processing a large product dataset, performing expensive calculations, or executing a large event handler can delay the browser from responding to user input.<\/p>\n\n\n\n Break expensive work into smaller tasks where possible and avoid unnecessary computations during interactions.<\/p>\n\n\n\n Not every component needs to be loaded when the page initially renders.<\/p>\n\n\n\n Filters, review widgets, recommendation sections, and some modal components may only be needed after the user interacts with the page.<\/p>\n\n\n\n You can load such components dynamically:<\/p>\n\n\n\n This reduces the amount of JavaScript that needs to be processed during the initial page load.<\/p>\n\n\n\n Cumulative Layout Shift measures unexpected movement of content while a page is loading.<\/p>\n\n\n\n For example, imagine a user is about to click an Add to Cart button, but an image or promotional banner loads and pushes the button downward.<\/p>\n\n\n\n These unexpected movements create a frustrating experience.<\/p>\n\n\n\n The browser needs to know how much space an image will occupy before the image finishes loading.<\/p>\n\n\n\n Specify both For responsive images, use the appropriate aspect ratio and sizing strategy so the layout remains stable across screen sizes.<\/p>\n\n\n\n Content such as promotional banners, recommendations, or advertisements often loads after the initial page render.<\/p>\n\n\n\n Reserve space for these sections so they don’t push existing content downward.<\/p>\n\n\n\n Web fonts can sometimes cause text to change size or appearance after the initial render.<\/p>\n\n\n\n Next.js provides built-in font optimization through Optimization should always be based on measurements rather than assumptions.<\/p>\n\n\n\n A page that performs well in development may behave differently for real users on slower devices and networks.<\/p>\n\n\n\n<\/figure>\n\n\n\n1. Largest Contentful Paint (LCP)<\/strong><\/strong><\/h2>\n\n\n\n
\n
Image<\/code> component to optimize images, generate responsive sizes, and serve modern image formats.
<\/p>\n\n\n\nimport Image from "next\/image";\n\n<Image\n src={product.thumbnail}\n alt={product.name}\n width={600}\n height={600}\n priority\n\/>;<\/pre>\n\n\n\npriority<\/code> can tell Next.js to prioritize loading it.<\/p>\n\n\n\npriority<\/code> on every image. Images below the fold should generally remain lazy-loaded.<\/p>\n\n\n\n\n
\n
2. Interaction to Next Paint (INP)<\/strong><\/h3>\n\n\n\n
\n
\nexport default async function CategoryPage() {\n const products = await getProducts();\n return <ProductGrid products={products} \/>;\n}<\/pre>\n\n\n\n
This is particularly useful for large eCommerce pages containing product grids, navigation, recommendations, and content sections.<\/p>\n\n\n\n\n
\n
\nimport dynamic from "next\/dynamic";\n\nconst Filters = dynamic(() => import(".\/Filters"));<\/pre>\n\n\n\n3. Cumulative Layout Shift (CLS)<\/h3>\n\n\n\n
\n
width<\/code> and height<\/code> so the browser knows how much space to allocate before the image loads.<\/p>\n\n\n\n\n
\n.banner-slot {\n min-height: 200px;\n}<\/pre>\n\n\n\n\n
next\/font<\/code>, which helps control font loading and reduces layout-related issues.<\/p>\n\n\n\nMeasure Your Improvements<\/strong><\/h3>\n\n\n\n
\n