Как оптимизировать производительность и Core Web Vitals в Next.js?

Question

Accepted Answer

Next.js предоставляет вам множество инструментов производительности; правильное их использование нацелено на Core Web Vitals — LCP (загрузка), CLS (стабильность макета) и INP (интерактивность).

Минимизируйте JavaScript клиента (наибольший рычаг)

tsx

// ✅ Keep components as Server Components; ship "use client" only at interactive leaves
// A Server Component sends ZERO JS for itself → smaller bundle → better INP/load

Суперсила App Router заключается в отправке меньшего JS. Тяжелая логика и форматирование данных остаются на сервере; только действительно интерактивные "острова" становятся Client Components.

// priority = load eagerly (don't lazy-load the LCP image); width/height prevent CLS ``` ## Оптимизируйте шрифты (CLS + загрузка) ```tsx import { Inter } from "next/font/google"; const inter = Inter({ subsets: ["latin"], display: "swap" }); // self-hosted, no layout shift ``` ## Разделите код тяжелых клиентских компонентов ```tsx import dynamic from "next/dynamic"; const Chart = dynamic(() => import("./Chart"), { ssr: false }); // load only when needed ``` Ленивая загрузка больших некритичных клиентских компонентов (диаграмм, редакторов, модалей), чтобы они не раздували начальный пакет. ## Потоковая передача медленного контента ```tsx }> // ship the shell instantly, stream slow data → better TTFB/FCP ``` ## Кэшируйте агрессивно, переvalidируйте точно ```tsx fetch(url, { next: { revalidate: 3600, tags: ["x"] } }); // static speed + controlled freshness ``` ## Контрольный список, сопоставленный с метриками ```text LCP ↓ : next/image + priority, streaming, CDN/static caching, preconnect CLS ↓ : image width/height, next/font, reserve space for dynamic content INP ↓ : less client JS (Server Components), code-splitting, avoid heavy effects ``` ## Измеряйте, не угадывайте ```text next build → see per-route JS sizes Lighthouse / PageSpeed Insights, the Web Vitals lib, Vercel Analytics → real metrics @next/bundle-analyzer → find what's bloating the bundle ``` ## Почему это важно Производительность Next.js в основном заключается в **отправке меньше JavaScript** (Server Components, code-splitting) и использовании встроенных оптимизаторов (`next/image`, `next/font`, streaming, caching) — каждый напрямую связан с Core Web Vital. Знание того, какой инструмент исправляет какую метрику (и измерение с помощью `next build`/Lighthouse вместо угадывания) — это то, как вы систематически достигаете хороших баллов LCP/CLS/INP.

Минимизируйте JavaScript клиента (наибольший рычаг)

Оптимизируйте изображение LCP

Оптимизируйте шрифты (CLS + загрузка)

Разделите код тяжелых клиентских компонентов

Потоковая передача медленного контента

Кэшируйте агрессивно, переvalidируйте точно

Контрольный список, сопоставленный с метриками

Измеряйте, не угадывайте

Почему это важно