Core Web Vitals простыми словами: почему сайт медленный и что делать
Скорость сайта влияет и на позиции, и на конверсию: медленная страница теряет клиентов ещё до того, как они увидят предложение. Чтобы измерять удобство загрузки, поисковые системы используют набор метрик Core Web Vitals.
Что такое Core Web Vitals
Это три показателя, которые описывают, как клиент ощущает загрузку страницы: когда появляется основной контент, как быстро сайт реагирует на действия и не прыгает ли вёрстка. Для каждого показателя есть ориентиры, к которым стоит стремиться.
LCP: когда появляется главное
Largest Contentful Paint показывает, за сколько отрисовывается самый крупный элемент на экране: обычно это заголовок или большая картинка. Хороший результат меньше 2,5 секунды.
Что чаще всего тормозит LCP:
- большие необработанные изображения;
- медленный сервер и долгий ответ;
- блокирующие стили и шрифты, которые грузятся до контента.
INP: как быстро сайт отзывается
Interaction to Next Paint измеряет задержку между действием клиента (нажатие, тап) и видимой реакцией. Хороший результат меньше 200 миллисекунд.
Задержку создают тяжёлые скрипты, которые выполняются в момент клика. Чем меньше лишнего JavaScript на странице, тем отзывчивее сайт.
CLS: насколько стабильна вёрстка
Cumulative Layout Shift показывает, насколько страница сдвигается во время загрузки. Хороший результат меньше 0,1.
Прыгающая вёрстка бесит клиента: он уже занёс палец над кнопкой, а она уехала. Причина обычно в картинках без указанных размеров, баннерах и рекламе, которые подгружаются позже контента.
Что тормозит сайт
- Изображения без сжатия и без современных форматов.
- Слишком много скриптов, особенно сторонних.
- Шрифты, загружаемые с внешнего сервера и блокирующие отрисовку.
- Тяжёлые слайдеры и анимации, которые анимируют не только прозрачность и трансформацию.
Сторонние скрипты
Счётчики, чаты, карты, виджеты обратной связи: каждый добавляет запросы и код. Часть из них полезна, но стоит проверить, все ли нужны. Скрипт newUX подключается асинхронно и не блокирует загрузку, а тяжёлые картинки превью грузятся только при наведении. Про анимации без вреда для скорости читайте в статье про микроанимации.
Как проверить
Откройте сайт на телефоне через мобильный интернет и замерьте загрузку. Для точных цифр используйте PageSpeed Insights: он показывает LCP, INP и CLS отдельно для мобильных и десктопа. Сравнивайте не только главную, но и страницы услуг и статей.
Итог
Core Web Vitals это про ощущения клиента от загрузки. Начните с картинок и лишних скриптов: обычно этого достаточно, чтобы заметно улучшить показатели. Если выбираете между набором плагинов и одним скриптом, сравнение есть в статье "Плагины WordPress или один скрипт". Общий план улучшений в гиде по сайту малого бизнеса.