Производительность Next.js: Core Web Vitals, изображения, streaming и размер бандла

Производительность Next.js-приложения — это не один флаг в конфиге и не только Lighthouse score. Быстрый сайт получается из десятков решений: сколько HTML отдаётся сразу, какие данные блокируют рендер, сколько JavaScript приезжает в браузер, как грузятся изображения и где стоит кеш.

Короткий ответ

Начинайте с Core Web Vitals: LCP, INP и CLS. Уменьшайте клиентский JavaScript через Server Components, оптимизируйте изображения через next/image, используйте streaming для тяжёлых страниц, lazy loading для вторичных блоков и анализируйте bundle перед добавлением каждой крупной библиотеки.

LCP: главный контент должен появляться быстро

Largest Contentful Paint чаще всего зависит от hero-изображения, главного заголовка, серверного ответа и блокирующих запросов. Если первый экран зависит от медленного API, пользователь увидит пустоту. Для публичных страниц используйте SSG/ISR, CDN и заранее подготовленные данные.

INP: интерфейс должен отвечать

Interaction to Next Paint показывает, насколько быстро страница реагирует на действия пользователя. Основной враг INP — лишний JavaScript на клиенте. В App Router важно не превращать всё приложение в Client Component. Чем больше логики остаётся на сервере, тем легче браузеру.

// Хорошо: интерактивен только маленький виджет
export default async function ProductPage() {
  const product = await getProduct();

  return (
    <>
      <ProductDetails product={product} />
      <AddToCartButton productId={product.id} />
    </>
  );
}

CLS: стабильная верстка

Cumulative Layout Shift ухудшается, когда изображения, баннеры, шрифты или динамические блоки меняют размер после загрузки. Задавайте width/height для медиа, резервируйте место под виджеты, не вставляйте верхние баннеры без стабильного контейнера.

Изображения

Компонент next/image помогает с responsive sizes, lazy loading, modern formats и предотвращением layout shift. Но он не заменяет дизайн-решения: не нужно грузить 3000px изображение в карточку 320px, не стоит ставить priority всем картинкам и нельзя забывать про alt-текст.

<Image
  src={cover.url}
  alt={cover.alternativeText ?? article.title}
  width={1200}
  height={630}
  priority
  sizes="(max-width: 768px) 100vw, 1200px"
/>

Streaming и Suspense

Streaming позволяет отдавать часть страницы раньше, пока тяжёлые блоки догружаются. Это особенно полезно для dashboard, аналитики, рекомендаций, комментариев и других секций, где разные данные имеют разную стоимость.

export default function DashboardPage() {
  return (
    <>
      <Summary />
      <Suspense fallback={<ChartSkeleton />}>
        <SlowAnalyticsChart />
      </Suspense>
    </>
  );
}

Размер JavaScript-бандла

Каждая UI-библиотека, date library, markdown renderer и chart package увеличивает стоимость страницы. Проверяйте bundle analyzer, используйте dynamic import для тяжёлых клиентских компонентов и избегайте случайного переноса серверного кода в браузер через 'use client' на слишком высоком уровне дерева.

SEO и MUVERA-ready структура

Для SEO скорость напрямую влияет на пользовательский опыт, индексацию и конверсию. Для semantic retrieval полезны короткие определения рядом с примерами: LCP — скорость появления главного контента, INP — отзывчивость, CLS — стабильность верстки, streaming — поэтапная доставка UI. Такая структура помогает системам поиска сопоставлять статью с прикладными вопросами разработчиков.

FAQ

Почему Next.js-приложение может быть медленным?

Чаще всего из-за лишнего клиентского JavaScript, неоптимизированных изображений, медленных API-запросов, плохого кеширования и нестабильной верстки.

Нужно ли оптимизировать все страницы одинаково?

Нет. Главная, статьи, карточки товара, dashboard и checkout имеют разные bottleneck'и. Сначала измеряйте, потом меняйте архитектуру.

Итог

Быстрый Next.js — это приложение, где сервер делает свою работу, браузер получает минимум лишнего JavaScript, изображения имеют правильные размеры, а тяжёлые блоки не мешают первому экрану. Производительность нужно проектировать вместе с архитектурой, а не чинить после релиза.