Core Web Vitals — не абстрактный SEO-чеклист, а прямое влияние на конверсию и удержание. На коммерческих лендингах разница между LCP 4.2 с и 1.8 с заметна в воронке. В App Router у Next.js появилось больше рычагов, но и больше способов случайно всё испортить.
LCP: герой-блок и изображения
Largest Contentful Paint почти всегда упирается в hero-изображение или крупный заголовок с тяжёлым шрифтом. Используйте priority только для одного above-the-fold изображения, задавайте явные width/height, отдавайте AVIF/WebP через next/image. Для фоновых декоративных картинок — loading="lazy" и низкий приоритет.
import Image from "next/image";
export function Hero() {
return (
<Image
src="/hero.jpg"
alt="Продукт"
width={1200}
height={630}
priority
sizes="(max-width: 768px) 100vw, 1200px"
/>
);
}INP и клиентский JavaScript
Interaction to Next Paint заменил FID и жёстче наказывает тяжёлые обработчики на клиенте. Выносите интерактив в небольшие client components, используйте Server Components для статики, откладывайте аналитику и виджеты через dynamic import. Проверяйте INP в Chrome DevTools → Performance, а не только в синтетическом Lighthouse.
Route groups и кэширование
Группируйте маршруты так, чтобы публичные страницы кэшировались агрессивно (revalidate: 3600), а личный кабинет оставался dynamic. Не помечайте весь layout как force-dynamic из-за одного виджета в шапке — вынесите его в отдельный island.
Чеклист перед релизом: один priority image, шрифты через next/font, минимум client boundaries, проверка на реальном 4G throttling. Этого достаточно, чтобы стабильно держать зелёную зону CWV без микрооптимизаций ради галочки.