Оптимизация производительности в Next.js

Производительность напрямую влияет на конверсию и позиции в поиске — Google учитывает Core Web Vitals как фактор ранжирования. Разберём основные рычаги оптимизации в Next.js.

Изображения

Компонент next/image автоматически:

• подбирает нужный размер под устройство;
• конвертирует изображения в современные форматы (WebP/AVIF);
• лениво загружает картинки за пределами первого экрана;
• предотвращает layout shift за счёт заранее заданных width/height.

<Image src="/cover.jpg" alt="Обложка статьи" width={1200} height={630} />

Шрифты

next/font загружает шрифты локально во время сборки и убирает лишние сетевые запросы к Google Fonts, а также автоматически применяет font-display: swap.

Code splitting и динамический импорт

Next.js по умолчанию делит код по страницам. Для тяжёлых компонентов ниже первого экрана (модалки, графики, редакторы) стоит использовать next/dynamic:

const Chart = dynamic(() => import("./Chart"), { ssr: false });

Кеширование

На Vercel статические ресурсы и SSG-страницы кешируются на CDN автоматически. Для API-роутов и динамических данных полезно настраивать revalidate в fetch или generateStaticParams с ISR (Incremental Static Regeneration).

Измерение результата

Прежде чем оптимизировать — измерьте. Lighthouse, PageSpeed Insights и встроенный Next.js Speed Insights показывают, где реально теряется время: LCP, CLS, INP.

Итог

Большая часть оптимизаций в Next.js включена по умолчанию. Остаётся аккуратно использовать next/image, next/font, code splitting и кеширование — и приложение будет быстрым без ручной микрооптимизации.