Codecademy Logo

Next.js Optimization

Next.js Optimization

Web applications should prioritize providing quality and optimized end-user experiences. Optimization of web applications with Next.js revolves around enhancing loading speed, minimizing interactivity delays, and ensuring visual consistency.

Largest Contentful Paint (LCP)

Largest Contentful Paint (LCP) is the time from the start of the navigation until the largest block of content is visible to the user. The LCP should be visible within 2.5 seconds of the page initially loading. The LCP can be any element, including a large text block, video, or image.

A diagram showing metrics for the Largest Contentful Paint (LCP). Below 2.5 seconds is excellent. Between 2.5 and 4 seconds needs improvement. Above 4 seconds is poor.

First Input Delay (FID)

First Input Delay (FID) is the time from when the user first interacts to the time when the browser begins processing the events. The FID should take no longer than 0.1 seconds or 100ms. Interactions can include the following actions:

  • user clicking a link
  • user tapping on a button
  • calling a custom, JavaScript-powered control on an interaction
A diagram showing metrics for First Input Delay (FID). Below 100ms is excellent. Between 100ms and 300ms needs improvement. Above 300ms is poor.

Cumulative Layout Shift (CLS)

Cumulative Layout Shift (CLS) measures the largest burst of layout shift for every unexpected layout during the lifespan of a page. A layout shift occurs any time a visible element changes its position from one rendered frame to the next. Layout shift is calculated using the following formula:

layout shift score = impact fraction * distance fraction

CLS should score less than 0.1.

A diagram showing metrics for Cumulative Layout Shift (CLS). Below 0.1 is excellent. Between 0.1 and 0.25 needs improvement. Above 0.25 is poor.

Next.js Script Optimization

Next.js’ built-in next/script Component helps with loading third-party scripts, only loading them one time even if the user navigates between pages. There are four strategies to fine-tune script execution:

  • beforeInteractive: Load the script before any Next.js code and before any page hydration occurs.
  • afterInteractive: (default) Load the script early, but after some hydration on the page occurs.
  • lazyOnload: Load the script later during the browser’s idle time.
  • worker: (experimental) Load the script in a web worker.

Next.js Font Optimization

Next.js’ built-in next/font Component adds web fonts with zero layout shift and zero requests to Google. Next.js uses font loading for both Google fonts and local fonts. Next.js also provides the capability to preload and reuse fonts efficiently in your application.

Next.js Image Optimization

Next.js’ built-in next/image Component extends the HTML <img> element to include automatic image optimization. Image optimization focuses on:

  • Size Optimization: Automatically serve correctly sized images for each device.
  • Visual Stability: Prevent layout shift automatically when images are loading.
  • Faster Page Loads: Images are only loaded when they enter the viewport using native browser lazy loading.
  • Asset Flexibility: On-demand image resizing, even for images stored on remote servers.

Next.js Optimization Tools

Next.js has built-in tools to optimize images, fonts, scripts, and metadata.

  • Images: next/image
  • Fonts: next/font/google and next/font/local
  • Scripts: next/script
  • Metadata: the Metadata object, robots.tsx, and sitemap.tsx.

Next.js Metadata Optimization

Next.js has a Metadata API to help define application metadata for improved SEO and shareability. Developers can use the generateMetadata() function for dynamic, config-based metadata generation or a static metadata object for static, config-based metadata generation. Developers can also use any of the four available file-based metadata generation techniques.

Next.js Config-Based Metadata Optimization

Config-based Metadata exports a metadata object to a layout.tsx or page.tsx file.

export async function generateMetadata({
params,
}: MetadataProps): Promise<Metadata> {
const slug = params.slug
return {
title: `${slug}`,
description: `${slug}`,
}
}

Next.js File-Based Metadata Optimization

File-based Metadata adds a statically or dynamically generated file to a route file.

export const metadata: Metadata = {
title: 'Title of Page',
description: 'Description of Page',
}

Lighthouse

Lighthouse is an open-source, automated tool to measure and assess web performance. Its primary goal is to enhance a website’s overall experience using the following metrics:

  • Performance
  • Accessibility
  • Best Practices
  • SEO

Learn more on Codecademy