Core Web Vitals: оптимизация LCP, INP и CLS для SEO

Core Web Vitals стали фактором ранжирования в рамках обновления Google Page Experience. Эффект ранжирования реален, но скромен — CWV является тай-брейкером между страницами равного качества контента, а не путём к ранжированию вопреки худшему контенту. Тем не менее для страниц, конкурирующих близко за позиции 1-5 по коммерческим запросам, провал CWV может стать решающей разницей.

Понимание трёх Core Web Vitals

Largest Contentful Paint (LCP): Измеряет, когда отрисовывается наибольший видимый элемент контента (изображение, текстовый блок, видео). Цель: менее 2,5 секунд. Представляет воспринимаемую скорость загрузки — насколько быстро пользователи видят основной контент.

Interaction to Next Paint (INP): Измеряет отзывчивость — время от взаимодействия пользователя (клик, нажатие клавиши, касание) до следующего визуального обновления. Цель: менее 200мс. Заменил FID (First Input Delay) в марте 2024 года. INP захватывает взаимодействие на протяжении всего жизненного цикла страницы, а не только первое взаимодействие.

Cumulative Layout Shift (CLS): Измеряет визуальную стабильность — насколько контент неожиданно смещается в процессе загрузки. Цель: менее 0,1. Оценка 0 означает нулевой сдвиг макета; более высокие значения означают больше неожиданных движений.

Инструменты измерения:

Отчёт Core Web Vitals в Google Search Console: данные поля (измерения реальных пользователей) по вашим страницам
PageSpeed Insights: данные лаборатории + данные поля для отдельных URL
Chrome DevTools: лабораторное тестирование в конкретных условиях
CrUX (отчёт о пользовательском опыте Chrome): агрегированные данные поля для любого URL

Данные поля отражают реальных пользователей; данные лаборатории — контролируемые измерения. Оба важны — данные лаборатории для отладки, данные поля для ранжирования.

Оптимизация LCP

LCP — наиболее значимый CWV для SEO и наиболее поддающийся адресации.

Определите элемент LCP: Используйте Chrome DevTools (вкладка Performance → запись загрузки страницы → маркер «LCP» на временной шкале) или PageSpeed Insights для определения кандидата LCP.

Для элементов LCP в виде изображений:

Используйте fetchpriority="high" на изображении LCP: <img src="hero.jpg" fetchpriority="high" />
НЕ применяйте ленивую загрузку к изображению LCP: loading="lazy" задерживает LCP
Подавайте изображения правильного размера: доставляйте точные пиксельные размеры
Используйте современные форматы: WebP уменьшает размер файла на 25-35% по сравнению с JPEG
Предзагружайте изображение LCP в <head>: <link rel="preload" as="image" href="hero.webp" />

Для текстовых элементов LCP:

Устраните блокирующий рендеринг CSS, задерживающий отрисовку текста
Используйте системные шрифты или font-display: swap для предотвращения задержки LCP из-за FOUT
Снизьте время отклика сервера (TTFB): LCP не может завершиться до получения HTML-ответа

Рендеринг на стороне сервера: Для страниц с интенсивным JavaScript LCP часто проваливается, потому что элемент LCP рендерится на клиенте после выполнения большого JS-бандла. SSR или статическая генерация перемещает LCP-контент в исходный HTML-ответ, резко улучшая LCP.

Оптимизация INP

INP измеряет наихудшую задержку взаимодействия на 98-м процентиле среди всех взаимодействий за сессию.

Распространённые причины плохого INP:

Длинные задачи JavaScript, блокирующие основной поток при взаимодействии пользователя
Большие перерисовки React/Vue/Angular, вызванные событиями кликов
Тяжёлые сторонние скрипты (аналитика, реклама, чат-виджеты), выполняемые при взаимодействии
Синхронные операции в обработчиках событий

Подходы к оптимизации:

Разбивайте длинные задачи: любая JS-задача более 50мс блокирует основной поток. Используйте scheduler.postTask() или requestIdleCallback() для отсрочки некритичной работы
Разделение кода: не загружайте весь JavaScript заранее. Ленивая загрузка компонентов и маршрутов
Аудит сторонних скриптов: измеряйте вклад каждого стороннего скрипта в INP. Удаляйте или откладывайте скрипты, не оправдывающие своей стоимости
Web Workers: перемещайте тяжёлые вычисления с основного потока

Оптимизация CLS

CLS обычно наиболее поддаётся исправлению — большинство причин CLS имеют чёткие решения.

Распространённые причины CLS:

Изображения без размеров: Изображение без атрибутов width и height заставляет браузер не резервировать место — когда изображение загружается, всё нижнее сдвигается. Исправление:

<img src="photo.jpg" width="800" height="600" alt="описание" />

Веб-шрифты, вызывающие FOUT: Flash of Unstyled Text происходит, когда страница отрисовывается с системным шрифтом, а затем переключается на веб-шрифт. font-display: swap уменьшает это, но не устраняет сдвиг макета из-за разных метрик шрифтов. Используйте font-display: optional для шрифтов, где флэш приемлем, или предзагружайте критичные шрифты.

Реклама и встраиваемые элементы без зарезервированного места: Объявления, загружаемые динамически без зарезервированного места, являются основными источниками CLS. Назначьте min-height контейнерам объявлений, соответствующий ожидаемому размеру рекламы.

Динамически внедряемый контент: Баннеры, уведомления о cookie и другой контент, внедряемый выше существующего контента после загрузки, вызывает CLS. Размещайте в фиксированной позиции или резервируйте место до загрузки.

Чтение отчётов CWV в Search Console

Отчёт Core Web Vitals Google Search Console классифицирует страницы как:

Хорошее: Проходит все три метрики
Требует улучшения: Провал одной или более на пороге «требует улучшения»
Плохое: Провал одной или более на пороге «плохое»

Сначала устраняйте «Плохие» страницы — они получают невыгодное положение в ранжировании. Отчёт группирует страницы по шаблону URL (не по отдельным URL), поэтому исправление шаблона, лежащего в основе одного паттерна URL, исправляет сразу много страниц.

CWV и JavaScript-фреймворки

Современные JavaScript-фреймворки имеют разные профили CWV:

React CSR (рендеринг на стороне клиента): Худшие стандартные CWV — JS должен загрузиться и выполниться до отрисовки любого контента, создавая высокий LCP. Используйте SSR или SSG.
Next.js с SSG: Отличный LCP — контент в исходном HTML. INP всё ещё может быть высоким при тяжёлой гидратации.
Astro: Лучшие стандартные CWV — минимальный JS по умолчанию, отличные LCP и INP для контентных сайтов
WordPress: LCP часто плохой из-за неоптимизированной обработки изображений и блокирующих скриптов. Решается плагинами оптимизации изображений и управления скриптами.