Learning guide

Intermediate6-8 hours6 steps

Next.js Performance Optimization

A practical 2026 checklist for improving Next.js Core Web Vitals, JavaScript cost, caching, images, and third-party scripts.

Updated 2026-09-04

All guidesTopic hubs
6learning steps
5related tags
3prerequisites
1supporting articles

Overview

Use this guide to measure a Next.js application, isolate the largest bottleneck, and verify each change against explicit performance budgets. It covers Core Web Vitals, lab metrics, images, data fetching, caching, bundle size, and third-party scripts. The examples include a real mobile audit so you can see how raw Lighthouse findings become an ordered implementation plan rather than a list of generic optimizations.

Performance budget

Targets to verify

LCP

≤ 2.5 seconds

Keep the largest visible element fast for at least 75% of visits.

INP

≤ 200 milliseconds

Keep interactions responsive by reducing long main-thread tasks.

CLS

≤ 0.1

Reserve layout space for images, embeds, ads, and async UI.

TBT (lab)

< 300 milliseconds

Use Lighthouse TBT to diagnose blocking JavaScript before field INP arrives.

Measured example

Example: turning a mobile audit into priorities

A ToLearn Blog mobile Lighthouse run showed that the page was visually usable before its JavaScript work was under control. That made third-party script cost the first optimization target.

Audit baseline

  • Performance score: 66
  • Largest Contentful Paint: 2.3 seconds
  • Total Blocking Time: 1.78 seconds
  • Google advertising and analytics scripts: about 621 KiB and 1.46 seconds of main-thread work

Ordered actions

  1. 1.Disable automatic, anchor, and interstitial ads while the site is traffic-constrained.
  2. 2.Load one reserved in-article ad only on English long-form articles after consent and browser idle time.
  3. 3.Send Web Vitals to analytics so regressions can be attributed to a route and release.
  4. 4.Repeat mobile tests three times and compare the median instead of accepting one favorable run.

Checklist

Next.js performance audit

  • Record three mobile Lighthouse runs for the same production URL and use the median.
  • Check field LCP, INP, and CLS separately from Lighthouse lab diagnostics.
  • Inspect the LCP element, image dimensions, preload behavior, and font dependency chain.
  • Use the bundle analyzer to find client code that can remain in a Server Component.
  • Start independent data requests together and cache stable server-side work.
  • Defer analytics, ads, chat, and embeds until they are needed; remove scripts with no decision value.
  • Reserve dimensions for images and ads before their resources load.
  • Re-run the same measurements after each major change and log the release date.

Roadmap

What you'll learn

Each step is a segment of the path, designed to move from concepts into practical implementation.

1

Understanding Web Performance Metrics

Learn about Core Web Vitals and how to measure them.

2

Image Optimization

Implement efficient image loading strategies.

3

Data Fetching Optimization

Choose the right server or client strategy, start independent requests together, and cache stable work.

Read the supporting article →
4

Bundle Size Optimization

Reduce JavaScript bundle size and improve load times.

5

Caching Strategies

Implement effective caching at multiple levels.

6

Monitoring and Continuous Improvement

Capture field Web Vitals by route and compare three-run Lighthouse medians after each release.

Read the supporting article →

Supporting reading

Related articles

These posts cover parts of the same subject area and work well alongside the guide.