Next.js 14 App Router: чеклист 95+ Lighthouse

Чеклист производительности Next.js App Router (95+)

Готовый набор шагов, который помогает стабильно держать Lighthouse 95+ без «магии».

1) Компонентность

• Тяжёлые блоки — серверные компоненты. Клиентские — только где нужен интерактив.
• Код-сплиттинг маршрутов, dynamic() для тяжёлых виджетов.

2) Изображения

• <Image /> + sizes + правильные width/height.
• loading="lazy" для не‑критичных картинок.

3) Кеш и данные

• revalidate для страниц/запросов; заголовки кеширования на статику.
• Вытягивайте тяжёлые расчёты на сервер: меньше JS на клиенте.

4) Шрифты

import { Inter } from 'next/font/google';
const inter = Inter({ subsets: ['latin','cyrillic'], display: 'swap' });

5) Мелочи, которые решают

• Preconnect к CDN/шрифтам.
• Lazy hydration на невидимых блоках.
• Skeleton вместо блокирующих спиннеров.