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) 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.
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:
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.
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’ 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’ built-in next/image
Component extends the HTML <img>
element to include automatic image optimization. Image optimization focuses on:
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.
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.slugreturn {title: `${slug}`,description: `${slug}`,}}
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 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: