ActiveCampaignAEMBeehiivBigCommerceBloggerBrevoClickFunnelsConcrete CMSContentfulConvertKitCraft CMSCustomDev.toDrupalExpressionEngineGetResponseGhostGravHashnodeHubSpotInstapageJoomlaKenticoKlaviyoLeadpagesMagentoMailchimpMediumOctober CMSPrestaShopSanityShopifySilverstripeSitecoreSquarespaceStrapiSubstackTYPO3UmbracoUnbounceWebflowWixWordPressWP.com

Core Web Vitals

60-120 minAdvanced

Optimize LCP, CLS, and INP in Next.js applications using built-in components and optimization techniques.

Prerequisites

  • Knowledge of React profiling
Advanced Recommended

Next.js Optimization

Using <Image> and <Script>.

1

Optimize LCP (Images)

1

Use the next/image component for automatic resizing and format optimization.

2

Add priority prop to your LCP element (e.g., Hero image) to preload it.

Example
import Image from 'next/image'

<Image
  src="/hero.jpg"
  alt="Hero"
  width={800}
  height={600}
  priority
/>
2

Optimize CLS (Fonts)

1

Use next/font to optimize web fonts and eliminate layout shifts caused by FOIT/FOUT.

2

It effectively sets font-display: swap and preloads the font file.

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

const inter = Inter({ subsets: ['latin'] })
3

Optimize INP (Interaction)

1

Minimize main thread work by code-splitting heavy components with next/dynamic.

2

Defer non-critical JavaScript using next/script with strategy="lazyOnload".

Verification Checklist

  • Run a Lighthouse audit in Chrome DevTools to check your scores.
  • Use the useReportWebVitals hook in Next.js to log real-world metrics to your analytics.
  • Verify LCP is under 2.5s and CLS is under 0.1.