Как ускорить загрузку сайта на Next.js: 10 практик

Скорость загрузки напрямую влияет на конверсию, поведенческие метрики и позиции в поиске. Google и Яндекс используют Core Web Vitals как один из факторов ранжирования, а пользователь закрывает медленный сайт быстрее, чем успевает прогрузиться герой-блок. В этой статье собраны 10 проверенных практик, которые мы применяем в продакшн-проектах WebNeon на Next.js — от лёгких твиков до архитектурных решений.

Что такое Core Web Vitals и зачем за ними следить

Core Web Vitals — три ключевые метрики Google, отражающие реальный пользовательский опыт:

LCP (Largest Contentful Paint) — время отрисовки самого крупного видимого элемента. Цель: до 2.5 секунды.
INP (Interaction to Next Paint) — задержка отклика интерфейса на действия пользователя. Цель: до 200 мс.
CLS (Cumulative Layout Shift) — суммарный сдвиг макета во время загрузки. Цель: меньше 0.1.

Метрики собираются из реальных данных Chrome User Experience Report и видны в Google Search Console и PageSpeed Insights. Если показатели в красной зоне — сайт теряет трафик и конверсии.

1. Используйте серверный рендеринг и Static Generation

Next.js по умолчанию рендерит страницы на сервере. Для статичных страниц (лендинги, статьи, документация) включайте полную статическую генерацию через App Router — Next превращает страницу в готовый HTML на этапе сборки. Браузеру остаётся только показать готовую разметку, а гидратация происходит асинхронно.

Если контент меняется — используйте Incremental Static Regeneration (revalidate) или React Server Components, которые рендерят данные на сервере без отправки лишнего JavaScript на клиент.

2. Оптимизируйте изображения через `next/image`

Картинки — самая частая причина высокого LCP. Компонент next/image автоматически:

генерирует современные форматы (AVIF, WebP),
отдаёт изображение нужного размера под устройство,
лениво загружает картинки вне вьюпорта,
резервирует место под изображение, предотвращая CLS.

import Image from "next/image";

<Image
  src="/hero.jpg"
  alt="Главный экран сайта"
  width={1280}
  height={720}
  priority
/>;

Для картинок ниже первого экрана не ставьте priority — они должны грузиться лениво.

Оптимизация изображений для скорости сайта

3. Минимизируйте клиентский JavaScript

Чем меньше JS отправляется в браузер, тем быстрее интерактивен сайт. Принципы:

по умолчанию используйте серверные компоненты в App Router,
помечайте "use client" только то, что реально требует интерактивности,
избегайте тяжёлых UI-библиотек ради одной кнопки — пишите небольшие собственные компоненты,
проверяйте бандл через next build и анализатор (@next/bundle-analyzer).

4. Подгружайте тяжёлые компоненты динамически

Карты, графики, тяжёлые редакторы, плееры видео не нужны при первой отрисовке. Загружайте их через next/dynamic:

import dynamic from "next/dynamic";

const VideoPlayer = dynamic(() => import("./video-player"), {
  ssr: false,
  loading: () => <div className="aspect-video animate-pulse rounded-lg bg-zinc-800" />,
});

Скелетон в loading сохраняет место и предотвращает CLS.

5. Подключайте шрифты через `next/font`

next/font хостит шрифты локально, исключает запросы к Google Fonts на runtime и применяет font-display: swap автоматически. Это убирает FOIT (мерцание невидимым текстом) и снижает LCP:

import { Inter } from "next/font/google";

const inter = Inter({
  subsets: ["latin", "cyrillic"],
  display: "swap",
  variable: "--font-inter",
});

Подключайте только те subsets и веса, которые реально используются в дизайне.

6. Кэшируйте и сжимайте ресурсы

На уровне сервера или CDN включите:

HTTP/2 или HTTP/3,
Brotli-сжатие для текстовых ресурсов,
долгосрочное кэширование ассетов с хешем в имени (max-age=31536000, immutable),
короткое кэширование HTML с stale-while-revalidate.

Если сайт развёрнут на Vercel — большинство этих настроек включены по умолчанию. На своём сервере (например, через Docker + Nginx) настройте заголовки явно.

7. Ограничьте количество сторонних скриптов

Каждый сторонний тег — это сетевой запрос, парсинг JS и риск блокировки главного потока. Чек-лист:

грузите аналитику и пиксели через next/script со стратегией afterInteractive или lazyOnload,
отказывайтесь от тяжёлых виджетов (чаты, карты), если их использует менее 5% посетителей,
собирайте все события в один менеджер тегов вместо набора отдельных скриптов.

8. Предотвращайте сдвиги макета

CLS чаще всего возникает из-за:

картинок и видео без атрибутов размера → всегда указывайте width/height или aspect-ratio,
баннеров и попапов, которые «прыгают» сверху страницы → резервируйте место заранее,
шрифтов с большой разницей метрик → используйте size-adjust и next/font.

Проверяйте CLS в Chrome DevTools → Performance → Web Vitals overlay.

9. Следите за INP и тяжёлыми обработчиками

INP — относительно новая метрика, заменившая FID в марте 2024. Она измеряет задержку любого взаимодействия. Чтобы держать INP в зелёной зоне:

разбивайте длинные задачи (более 50 мс) на части через requestIdleCallback,
избегайте синхронных тяжёлых вычислений в обработчиках кликов,
не блокируйте главный поток сторонними скриптами,
используйте useTransition для некритичных обновлений состояния.

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

Без замеров оптимизация превращается в карго-культ. Минимальный набор инструментов:

Инструмент	Зачем
Lighthouse	Быстрая проверка производительности и SEO в DevTools
PageSpeed Insights	Реальные Core Web Vitals из CrUX + лабораторные данные
Web Vitals Chrome Extension	Замер CWV прямо во время разработки
`@next/bundle-analyzer`	Визуализация размера бандла
Sentry / Vercel Analytics	RUM-метрики с продакшна

Закрывайте только реальные узкие места — те, что подтверждены данными.

Чек-лист перед релизом

LCP-картинка отдаётся через next/image с priority
Шрифты подключены через next/font, лишние веса убраны
Сторонние скрипты в next/script со стратегией lazyOnload
Тяжёлые компоненты — через next/dynamic
Все изображения имеют размеры (нет CLS)
Включены Brotli и долгосрочное кэширование
Lighthouse: Performance ≥ 90, SEO ≥ 95
PageSpeed Insights в зелёной зоне на mobile

Итоги

Ускорение сайта — это не одна большая оптимизация, а сумма десятков мелких. Next.js даёт сильную базу из коробки: серверный рендеринг, оптимизация картинок и шрифтов, code-splitting. Ваша задача — не сломать эту базу и довести до конца типовые практики из чек-листа выше.

Если нужен сайт, который изначально проектируется под отличные Core Web Vitals и стабильное SEO — мы в WebNeon с этим поможем. Опишите задачу в форме на главной — обсудим вашу архитектуру и план оптимизаций.