Как повторить?

Привожу упрощённый чек-лист и конкретные шаги для повторения оптимизации на вашем Next.js-проекте. Эти шаги подходят для App Router и Pages Router, небольшие правки зависят от структуры. Измерьте текущее состояние. Соберите Lighthouse/LR и WebPageTest (4G). Пример команды для Lighthouse CI: lighthouse https://example.com --output=json --output-path=./lh-report.json. Активируйте RUM и соберите LCP за 1–2 недели, чтобы видеть реальные паттерны. Оптимизируйте hero-изображение. Создайте AVIF/WebP версии и используйте next/image с атрибутом priority. Для динамических remote-URL настройте remotePatterns в next.config.js и убедитесь, что Next.js может оптимизировать изображение. Добавьте <link rel="preload" as="image" href="..." imagesrcset="..." imagesizes="..." crossorigin> для критических случаев. Шрифты — preload и subset. Создайте subset WOFF2 для нужных языков, добавьте <link rel="preload" as="font" href="/fonts/...woff2" type="font/woff2" crossorigin>. Используйте...

Как ускорил Next.js сайт до LCP 0.8s

В середине 2025 года я провёл комплексную оптимизацию публичного сайта на Next.js и добился LCP 0.8s на страницах с большим героем. В лидере перечислены конкретные изменения по изображениям, шрифтам и сборке, которые дали основной выигрыш времени.

Начальный замер и проблема

Исходная страница была создана на Next.js (App Router, версия 13.x/14.x, проект развивался до 2025–2026 годов) с серверным рендерингом (SSR) для маркетинговых страниц. В январе 2025 мы зафиксировали проблемную метрику LCP на ключевой товарной странице — около 2.9–3.3 секунды по Lighthouse и 2.6–3.1 секунды по WebPageTest (реалистичный 4G). FCP и TTFB были в пределах приемлемого: TTFB ~ 200–250 мс при использовании Vercel, FCP ~ 1.0–1.4 с, но именно LCP отставал.

Для измерения и верификации использовались следующие инструменты и дата-источники:

Chrome DevTools Lighthouse (2025-02, версия 11+)
WebPageTest (4G, London и US East, по 9 runs)
Real User Monitoring (RUM) — собственный агент, который собирал LCP события по полю trace (RUM-агрегаты за Q4 2024—Q1 2025)
PageSpeed Insights (API) для проверки в реальном времени

Проблема: LCP рендерился за счёт большого hero-изображения и кастомного веб-шрифта, которые загружались и рендерились поздно. При этом код страницы был относительно лёгким: JavaScript бандлы после минимизации составляли ~120–180 KB (gzipped), но браузер ждал загрузки ресурса hero и ключевых шрифтов до отображения видимого слоя страницы.

Что мешало LCP?

module.exports = {
  images: {
    formats: ['image/avif', 'image/webp'],
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'cdn.example.com',
        port: '',
        pathname: '/**',
      },
    ],
  },
  experimental: {
    modern: true,
  },
};

<import Image from 'next/image' />

<Image
  src="/static/hero-1200.avif"
  alt="Главный баннер"
  width={1200}
  height={650}
  priority
  sizes="(max-width: 768px) 100vw, 1200px"
  placeholder="blur"
  blurDataURL="data:image/..."
/>

<link rel="preload" href="/fonts/inter-subset.woff2" as="font" type="font/woff2" crossorigin>

import { Inter } from 'next/font/google'

const inter = Inter({
  subsets: ['latin', 'cyrillic'],
  display: 'swap',
  preload: true,
})

export default function RootLayout({ children }) {
  return (<html lang="ru" className={inter.className}><body>{children}</body></html>)
}

Измерьте текущее состояние.
- Соберите Lighthouse/LR и WebPageTest (4G). Пример команды для Lighthouse CI: lighthouse https://example.com --output=json --output-path=./lh-report.json.
- Активируйте RUM и соберите LCP за 1–2 недели, чтобы видеть реальные паттерны.
Оптимизируйте hero-изображение.
- Создайте AVIF/WebP версии и используйте next/image с атрибутом priority.
- Для динамических remote-URL настройте remotePatterns в next.config.js и убедитесь, что Next.js может оптимизировать изображение.
- Добавьте <link rel="preload" as="image" href="..." imagesrcset="..." imagesizes="..." crossorigin> для критических случаев.
Шрифты — preload и subset.
- Создайте subset WOFF2 для нужных языков, добавьте <link rel="preload" as="font" href="/fonts/...woff2" type="font/woff2" crossorigin>.
- Используйте display: swap и/или next/font с preload: true.
Минимизируйте критический CSS.
- Inline несколько правил для вышеэкрана (hero layout) и отложите загрузку остального CSS.
Удалите или отложите third-party скрипты.
- Перенесите аналитические/виджет-скрипты в deferred/async или загружайте после LCP через setTimeout/idle callback.
Проверьте конфигурацию сервера/CDN.
- Добавьте preconnect для CDN, установите длительный cache-control для статических AVIF/WOFF2.
Тестируйте повторно и следите за RUM.
- Проведите серию WebPageTest и Lighthouse (повторите 5–10 раз) и анализируйте медиану LCP.
- Соберите RUM за 1–2 недели для проверки в реальных условиях.

# WebPageTest API пример (curl)
curl -X POST "https://www.webpagetest.org/runtest.php" \
  -F "url=https://example.com" \
  -F "k=YOUR_API_KEY" \
  -F "location=ec2-lon_mobile" \
  -F "runs=9"

# Lighthouse CLI
lighthouse https://example.com --mobile --output html --output-path=./lh-report.html

Как ускорил Next.js сайт до LCP 0.8s | KtoHto

Как ускорил Next.js сайт до LCP 0.8s

Начальный замер и проблема

Что мешало LCP?

Комментарии (0)

Изменения в images и fonts

Изображения

Шрифты

HTML и preload hints

Результаты до

после

Как повторить?