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

В этой статье я расскажу о техниках оптимизации, которые помогли сократить время загрузки приложения с 3 секунд до 1.2 сек.

Проблема

Изначально приложение загружалось за 3+ секунды, что критично для конверсии. Нужно было оптимизировать.

Решения

1. Code Splitting

Использование динамических импортов для разделения кода:


1import dynamic from 'next/dynamic';
2
3const HeavyComponent = dynamic(() => import('./HeavyComponent'), {
4  loading: () => <div>Загрузка...</div>,
5  ssr: false,
6});

2. Image Optimization

Next.js Image компонент автоматически оптимизирует изображения:


1import Image from 'next/image';
2
3<Image
4  src="/hero.jpg"
5  alt="Hero"
6  width={1200}
7  height={600}
8  priority
9  placeholder="blur"
10/>

3. SSR vs SSG

Для статического контента используем SSG:


1export async function getStaticProps() {
2  return {
3    props: { data },
4    revalidate: 3600, // ISR каждые 60 минут
5  };
6}

Результаты

LCP: 1.2 сек (было 3.2 сек)
FID: 50ms (было 200ms)
CLS: 0.05 (было 0.15)
PageSpeed Score: 96/100

Выводы

Коротко: сначала измеряем, потом оптимизируем критичные узкие места.

фиксируем метрики (LCP/FID/CLS) до и после изменений;
раскатываем code splitting и оптимизацию изображений;
выбираем SSR/SSG исходя из сценария, чтобы не перегружать сервер.

Оптимизация производительности — это итеративный процесс. Начните с измерения, затем оптимизируйте критичные участки.

Оптимизация Next.js приложения: от 3 сек до 1.2 сек