Learn how to improve Next.js Core Web Vitals with practical tips for LCP, INP and CLS, including images, JavaScript, fonts, caching and layout stability

Next.js Core Web Vitals: Improve LCP, INP and CLS

A website can look beautiful, contain excellent content and still feel frustrating to use.

Imagine opening a Next.js website on a mobile phone. The page begins loading, but the main image takes several seconds to appear. You tap a menu button and nothing seems to happen immediately. Then, just as you are about to click a link, an advertisement loads and pushes the content downward.

The problem is not necessarily the design. It is performance.

This is where Core Web Vitals become important.

Core Web Vitals are Google’s user-focused performance metrics for loading, responsiveness and visual stability. The current Core Web Vitals are Largest Contentful Paint (LCP), Interaction to Next Paint (INP), and Cumulative Layout Shift (CLS). Google uses Core Web Vitals as part of its ranking systems, but good scores alone do not guarantee higher search rankings. (web.dev)

For Next.js websites, the good news is that the framework already provides several tools that can help with performance, including next/image, next/font, dynamic imports and optimized script loading.

Let’s see how to use them effectively.

What Are Next.js Core Web Vitals?

Core Web Vitals are not metrics created specifically for Next.js. They are Google’s performance metrics that can be measured on websites built with Next.js, WordPress, plain HTML, React and other technologies.

The three current Core Web Vitals measure different parts of the user experience:

Metric	What it measures	Good target
LCP	Loading performance	≤ 2.5 seconds
INP	Responsiveness	≤ 200 ms
CLS	Visual stability	≤ 0.1

These targets are evaluated at the 75th percentile of page loads, segmented by mobile and desktop. (web.dev)

LCP — Largest Contentful Paint

LCP measures when the largest visible image, text block or other qualifying element in the viewport is rendered.

In simple terms:

LCP asks: “How quickly does the main content appear?”

For example, suppose your blog article opens with a large hero image. If that image becomes the largest element in the viewport, it may become the LCP element.

A good LCP is 2.5 seconds or less. More than 4 seconds is considered poor. (web.dev)

INP — Interaction to Next Paint

INP measures how quickly a page responds to user interactions such as clicks, taps and keyboard actions.

Think about a search box.

A visitor types something or clicks a button. If the browser is busy processing a large amount of JavaScript, the visible response can be delayed.

That delay contributes to INP.

A good INP is 200 milliseconds or less. Above 200 ms and up to 500 ms needs improvement, while above 500 ms is poor. (web.dev)

INP replaced First Input Delay (FID) as a Core Web Vital. Google Search documentation now identifies INP as the current responsiveness metric. (Google for Developers)

CLS — Cumulative Layout Shift

CLS measures unexpected movement of visible content.

For example, you start reading a headline. A few moments later, an image or advertisement appears above it and pushes the headline downward.

That is a layout shift.

A good CLS is 0.1 or less. (web.dev)

Next.js can help prevent some common CLS problems through its optimized image component, but developers still need to reserve space for dynamic content such as ads, embeds and widgets. (Next.js)

Why Core Web Vitals Matter for Next.js SEO

Next.js is designed to build fast, modern web applications, but using Next.js does not automatically make every page fast.

A Next.js application can still suffer from:

• oversized images
• excessive JavaScript
• slow server responses
• unnecessary client-side rendering
• inefficient database queries
• third-party scripts
• poorly loaded fonts
• animations that cause layout shifts
• large bundles
• dynamically injected content

Google states that Core Web Vitals are used by its ranking systems. However, Google also makes it clear that good Core Web Vitals scores do not guarantee top rankings. Relevance, helpful content and the overall page experience still matter. (Google for Developers)

Therefore, the goal should not be to chase a perfect Lighthouse score simply because it looks impressive.

The real goal is to make the website fast, responsive and comfortable to use.

How to Measure Core Web Vitals in Next.js

Before changing your code, measure the problem.

Otherwise, you may spend hours optimizing something that was never the main issue.

1. Use PageSpeed Insights

PageSpeed Insights can show both laboratory testing and, where available, real-user performance information.

Look for:

• LCP
• INP
• CLS
• TTFB
• diagnostics
• opportunities
• the page’s largest content element

2. Use Chrome Lighthouse

Lighthouse is useful for controlled testing.

For more representative results, test the production version of your website rather than relying only on a local development server.

Next.js recommends running Lighthouse in an incognito session and combining laboratory testing with field data. (Next.js)

3. Use Google Search Console

Search Console’s Core Web Vitals report can help identify groups of URLs that have performance problems based on real-user data.

This is particularly useful for blogs and large websites because fixing one template can potentially improve many pages.

4. Monitor Real Users

A single Lighthouse test is only a snapshot.

Users have different:

• phones
• computers
• browsers
• networks
• geographic locations
• CPU capabilities

Next.js provides useReportWebVitals for reporting performance metrics to an analytics system. (Next.js)

Next.js also documents production monitoring through tools such as Speed Insights and field data. (Next.js)

How to Improve LCP in Next.js

LCP is often the first performance problem website owners notice.

Suppose your article contains a large featured image at the top. If the browser has to download a huge image before the visitor sees the main content, LCP can suffer.

Here are practical ways to improve it.

1. Optimize the LCP Image

One of the most useful Next.js features is the Image component.

Instead of:

<img

src=”/hero.jpg”

alt=”Next.js Core Web Vitals”

/>

you can use:

import Image from ‘next/image’;

<Image

src=”/hero.jpg”

alt=”Next.js Core Web Vitals”

width={1200}

height={675}

/>

Next.js can automatically optimize images, resize them for different devices and lazy-load images that are outside the initial viewport. It also helps prevent layout shifts by knowing the image dimensions. (Next.js)

For a prominent above-the-fold image, however, do not blindly rely on lazy loading. The main image may need to be prioritized appropriately so that it becomes available quickly.

The important principle is simple:

Do not make the browser discover and download a huge image later than necessary.

2. Reduce Image File Size

A 2 MB hero image is rarely necessary for a normal blog page.

Before uploading images:

• resize them to the required dimensions
• use appropriate compression
• avoid unnecessarily large originals
• choose modern formats where appropriate
• avoid using a desktop-sized image for a small mobile display

Next.js’s image optimization can help, but starting with a sensible source image is still good practice.

3. Improve Server Response Time

LCP includes more than image loading.

A slow server response can delay everything that follows.

Common causes include:

• slow database queries
• unnecessary request-time processing
• uncached data
• slow APIs
• inefficient server-side rendering
• poor hosting configuration

For pages that do not require constantly changing data, consider whether static rendering or caching is appropriate.

Next.js documentation notes that static rendering can provide faster responses because pre-rendered content can be cached and distributed. (Next.js)

4. Avoid Making the Browser Build the Page Too Late

If important content depends entirely on client-side JavaScript, the browser may have to:

1. download JavaScript
2. execute JavaScript
3. fetch data
4. update the page
5. finally display important content

That can create unnecessary delays.

Where appropriate, let Next.js render important content on the server or pre-render it.

Next.js’s pre-rendering approach can generate HTML before it reaches the browser, reducing the amount of work required before content becomes visible. (Next.js)

5. Optimize Fonts

Fonts can influence how quickly text becomes visible.

Next.js provides next/font, which can optimize font loading and avoid additional network requests for font CSS. (Next.js)

For example:

import { Inter } from ‘next/font/google’;

 

const inter = Inter({

subsets: [‘latin’],

});

Then apply the font to your application.

Do not load several font families and dozens of unnecessary font weights simply because they are available.

Use what your design actually needs.

How to Improve INP in Next.js

Improving INP is largely about making the browser’s main thread less busy.

Imagine a visitor clicks a menu button.

If the browser is simultaneously processing a large JavaScript bundle, parsing libraries and running expensive functions, the click may appear to do nothing.

That is a responsiveness problem.

1. Reduce Unnecessary JavaScript

Every JavaScript dependency should have a reason to exist.

Review:

• large libraries
• unused packages
• unnecessary UI components
• old tracking scripts
• duplicated functionality
• excessive client components

Next.js recommends analyzing bundles to identify large modules and dependencies that may affect application performance. (Next.js)

2. Use Dynamic Imports

Not every component needs to be loaded immediately.

For example, imagine your page contains a modal that users open only after clicking a button.

There is little reason to load all of that modal’s JavaScript during the initial page load if it is not needed immediately.

Next.js supports dynamic imports to split JavaScript into smaller chunks. (Next.js)

For example:

import dynamic from ‘next/dynamic’;

const NewsletterModal = dynamic(

() => import(‘./NewsletterModal’)

);

The exact approach depends on the component and whether it requires server-side rendering.

The principle is:

Load important code early. Load optional code when it is needed.

3. Keep Expensive Work Away From User Interactions

Avoid performing heavy calculations inside click or input handlers.

For example, a search interface should not perform a large amount of unnecessary processing every time the visitor types a character.

Consider:

• debouncing search requests
• reducing data processed on every interaction
• splitting large tasks
• moving appropriate work away from the main thread
• avoiding unnecessary React re-renders

The objective is to let the browser respond quickly and then perform additional work.

4. Be Careful With Third-Party JavaScript

Analytics, advertising, social media widgets, chat systems and other third-party services can add JavaScript to your page.

Next.js provides the Script component to control when third-party scripts load.

For example:

import Script from ‘next/script’;

<Script

src=”https://example.com/script.js”

strategy=”lazyOnload”

/>

Next.js specifically recommends appropriate loading strategies for third-party scripts so they do not unnecessarily interfere with important page content and performance. (Next.js)

Do not add a script simply because another website uses it.

Ask:

Does this script provide enough value to justify its performance cost?

How to Improve CLS in Next.js

CLS is often easier to understand because you can actually see the problem.

The page moves.

A headline jumps.

A button moves.

An advertisement suddenly appears.

The visitor loses their place.

Here is how to reduce it.

1. Give Images Explicit Dimensions

Avoid relying on an image whose dimensions are unknown when the page initially renders.

Using next/image with appropriate dimensions helps Next.js reserve the required space. (Next.js)

For example:

<Image

src=”/article-image.jpg”

alt=”Article illustration”

width={1200}

height={675}

/>

The browser knows the image’s aspect ratio before the file finishes downloading.

2. Reserve Space for Advertisements

Advertising can create CLS when an ad container has no reserved height.

Instead of allowing an empty area to collapse and then expand when an advertisement arrives, reserve an appropriate amount of space.

This is especially important for sites using:

• display advertising
• ad networks
• embedded widgets
• recommendation units

Dynamic ads and embeds are recognized causes of layout shifts. (web.dev)

3. Be Careful With Dynamic Content

Suppose your page initially shows:

Latest Articles

Then JavaScript retrieves the articles and inserts a large block above the existing content.

Everything below it moves.

That can create layout instability.

Design dynamic sections so that their expected space is reserved where practical.

4. Avoid Inserting Content Above Existing Content

One of the simplest CLS rules is:

Do not unexpectedly insert large content above something the user is already viewing.

This applies to:

• banners
• cookie notices
• advertisements
• promotional bars
• recommendation widgets
• dynamically loaded images

If such content must appear, design the layout so that its appearance does not unexpectedly push important content around.

5. Check Web Fonts

Fonts can also contribute to layout shifts when fallback and final fonts have noticeably different dimensions.

Using Next.js’s font optimization can help reduce unnecessary font-loading issues. (Next.js)

A Practical Next.js Core Web Vitals Optimization Workflow

If you are new to performance optimization, do not change twenty things at once.

Use a repeatable process.

Step 1: Measure

Run:

• PageSpeed Insights
• Lighthouse
• Search Console Core Web Vitals

Record the current LCP, INP and CLS results.

Step 2: Identify the Biggest Problem

If LCP is poor, start with:

• server response time
• hero image
• fonts
• rendering strategy
• blocking resources

If INP is poor, investigate:

• JavaScript
• long tasks
• event handlers
• third-party scripts
• unnecessary client-side components

If CLS is poor, inspect:

• images
• advertisements
• embeds
• dynamic content
• fonts

Step 3: Make One Group of Changes

For example, if LCP is poor because of a large hero image, optimize that image first.

Do not simultaneously change your database, CSS, JavaScript, fonts and hosting.

Step 4: Test Again

Run the same tests after making the change.

You need to know whether the change actually helped.

Step 5: Check Real-User Data

Laboratory testing is useful, but real users experience different devices and networks.

Continue monitoring field data after deployment.

Next.js recommends combining Lighthouse with field data and provides useReportWebVitals for reporting performance information. (Next.js)

Common Next.js Performance Mistakes to Avoid

Mistake 1: Assuming Next.js Is Automatically Fast

Next.js provides powerful optimization features, but application architecture still matters.

A poorly designed Next.js application can be slow.

Mistake 2: Optimizing Only for Lighthouse

A 100 score is not the actual objective.

A page can score well in a controlled test while real users experience different performance.

Use laboratory and field data together.

Mistake 3: Loading Everything on the Client

Not every component needs to be interactive.

Keep unnecessary JavaScript out of the initial page where possible.

Mistake 4: Using Huge Images

A visually attractive image can still be unnecessarily large.

Optimize image dimensions and delivery.

Mistake 5: Installing Too Many Third-Party Tools

Every analytics system, widget, chat tool and tracking script has a cost.

Review third-party JavaScript periodically.

Mistake 6: Ignoring Mobile Users

A website that feels fast on a powerful desktop computer may feel very different on an inexpensive mobile device.

Always test mobile performance.

Next.js Core Web Vitals Checklist

Before publishing a Next.js website, ask:

• Is the main content visible quickly?
• Is the LCP at or below 2.5 seconds for the majority of users?
• Does the page respond quickly to clicks and taps?
• Is INP at or below 200 milliseconds?
• Do images have appropriate dimensions?
• Is CLS at or below 0.1?
• Are large images optimized?
• Are unnecessary JavaScript libraries removed?
• Are optional components dynamically loaded?
• Are third-party scripts delayed when appropriate?
• Are fonts optimized?
• Is important content server-rendered or pre-rendered where appropriate?
• Have you tested both mobile and desktop?
• Have you checked real-user data?

Key Takeaways

1. Next.js does not automatically guarantee excellent Core Web Vitals. Application architecture and implementation still matter.
2. LCP measures loading performance, with 2.5 seconds or less being the current good threshold.
3. INP measures responsiveness, with 200 milliseconds or less being the current good threshold.
4. CLS measures visual stability, with 0.1 or less being the current good threshold. (web.dev)
5. Use Next.js features such as next/image, next/font, dynamic imports and next/script to reduce common performance problems. (Next.js)
6. Do not depend exclusively on Lighthouse. Field data and real-user measurements are essential for understanding how visitors actually experience your site. (Next.js)

Frequently Asked Questions

1. What are Core Web Vitals in Next.js?

Core Web Vitals are Google’s user-focused performance metrics that can be measured on Next.js websites. The current three are LCP for loading, INP for responsiveness and CLS for visual stability.

2. What is a good LCP score for a Next.js website?

A good LCP is 2.5 seconds or less. Google recommends evaluating this at the 75th percentile of page loads, separately for mobile and desktop. (web.dev)

3. How can I improve INP in Next.js?

Start by reducing unnecessary JavaScript and expensive browser tasks. Use dynamic imports for functionality that is not required immediately, optimize event handlers and review third-party scripts. Next.js provides tools for code splitting and controlled script loading. (Next.js)

4. How do I fix CLS in Next.js?

Give images appropriate dimensions, reserve space for advertisements and embeds, avoid unexpectedly inserting content above existing content and optimize font loading. Next.js’s Image component can automatically help with image sizing and layout stability. (Next.js)

5. Are Core Web Vitals a ranking factor for Google?

Yes. Google states that Core Web Vitals are used by its ranking systems. However, good Core Web Vitals do not guarantee high Google rankings. Search visibility depends on many factors, including relevance, content quality and overall page experience. (Google for Developers)

Conclusion

Improving Next.js Core Web Vitals is not about finding one magic setting.

It is about removing friction from the visitor’s journey.

The visitor should see the important content quickly. When they tap a button, the website should respond without hesitation. While they read, the page should remain stable instead of moving unexpectedly.

That is what LCP, INP and CLS are really trying to measure.

Start with measurement rather than assumptions. Identify the biggest problem, make a focused improvement and test again. Use Next.js’s built-in performance features where they make sense, but remember that the framework is only one part of the equation.

Most importantly, optimize for the person using the website—not simply for a performance score.

A fast, responsive and stable Next.js website creates a better experience for visitors, and that is a much more useful goal than chasing a perfect number in a testing tool.