Как улучшить Core Web Vitals сайта

Core Web Vitals показывают не абстрактную скорость сервера, а опыт пользователя. LCP измеряет появление главного контента. INP показывает задержку реакции на действия. CLS фиксирует неожиданные сдвиги элементов.

Хорошими считаются значения LCP до 2,5 секунды, INP до 200 миллисекунд и CLS до 0,1. Оценка строится по 75-му процентилю реальных посещений. Поэтому зеленый результат одного теста на быстром компьютере еще не означает, что сайт удобен для аудитории.

Как улучшить LCP

Сначала определите LCP-элемент. Обычно это крупный заголовок, баннер или изображение первого экрана. Главная картинка должна быть доступна прямо из HTML, иметь подходящий размер и высокий приоритет. Ее не нужно загружать через JavaScript или loading="lazy".

<link rel="preload" as="image" href="/img/hero.avif">
<img src="/img/hero.avif"
     alt="Разработка статического сайта"
     width="1440" height="900"
     loading="eager" fetchpriority="high" decoding="async">

Сократите время ответа сервера, сожмите изображения, уберите блокирующие стили и не подключайте тяжелые шрифты до появления первого экрана. Предзагрузка полезна только для действительно важного ресурса. Если пометить высоким приоритетом все изображения, приоритет перестанет работать.

Как улучшить INP

INP ухудшается, когда основной поток занят длинным JavaScript-заданием. Удалите ненужные библиотеки, разбейте тяжелую обработку на небольшие задачи и не пересчитывайте весь интерфейс после каждого ввода.

Обработчик клика должен быстро показать состояние: загрузка, открытое меню или подтверждение. Тяжелые вычисления можно выполнить после первого визуального ответа. Скрипты, не нужные для первого экрана, подключаются с defer или загружаются по необходимости.

Отдельно проверьте сторонние чаты, карты, пиксели и виджеты. Один внешний скрипт может выполнять длинные задачи, даже если собственный код небольшой. Такие функции лучше загружать после согласия пользователя, взаимодействия или появления блока в области просмотра.

Как улучшить CLS

Укажите размеры изображений и видео. Заранее резервируйте место под баннеры, формы и виджеты. Не вставляйте новый блок над уже прочитанным текстом. Для шрифтов подбирайте близкий системный fallback, чтобы замена не меняла длину строк слишком сильно.

Анимации width, height, top и left могут двигать макет. Для движения используйте transform, для появления opacity.

Лабораторные и реальные данные

Lighthouse помогает воспроизвести проблему в контролируемых условиях. Search Console и Chrome UX Report показывают данные реальных пользователей, если у сайта достаточно трафика. Эти источники не обязаны совпадать.

Оптимизируйте не итоговый балл, а конкретную цепочку задержки. Сначала найдите LCP-ресурс, длинное задание или элемент, который сдвигается. После изменения проверьте мобильную версию и дождитесь новых полевых данных.