Core Web Vitals: как улучшить показатели сайта и не терять посетителей из поиска

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

Core Web Vitals — это набор показателей, который помогает оценить реальное качество взаимодействия с сайтом. Они связаны не только с технической скоростью, но и с тем, насколько быстро появляется основной контент, как быстро страница реагирует на действия пользователя и стабильно ли ведут себя элементы интерфейса.

В этой статье разберём, что означают LCP, INP и CLS, как правильно проверить сайт, почему лабораторные тесты могут отличаться от данных реальных пользователей и какие действия действительно помогают улучшить показатели.

Что такое Core Web Vitals

Core Web Vitals — это группа метрик, предназначенных для оценки пользовательского опыта на веб-страницах. В отличие от простой проверки времени полной загрузки, эти показатели описывают конкретные этапы взаимодействия посетителя с сайтом.

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

Оценка Core Web Vitals особенно важна для коммерческих страниц, интернет-магазинов, каталогов, сервисов с личным кабинетом и любых проектов, где посетитель должен быстро выполнить действие: отправить форму, открыть меню, выбрать товар или перейти к оплате.

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

Какие показатели нужно контролировать

LCP — скорость отображения основного контента

Largest Contentful Paint показывает, сколько времени проходит до отображения самого крупного видимого элемента в начальной области страницы. Это может быть крупный заголовок, изображение в первом экране, баннер, карточка товара или другой заметный блок.

Метрика отвечает на практический вопрос: когда пользователь понимает, что страница действительно загрузилась и на ней появился основной материал?

Ориентиром для хорошего результата считается LCP до 2,5 секунды. Значение между 2,5 и 4 секундами требует внимания, а более длительное отображение основного контента указывает на проблему, которую стоит искать и исправлять.

На LCP влияют:

• время ответа сервера;
• объём HTML-документа;
• загрузка главного изображения;
• подключение шрифтов;
• блокирующие CSS и JavaScript-файлы;
• работа CDN;
• кеширование;
• способ формирования страницы на сервере или в браузере.

Важно понимать, что LCP — это не всегда размер картинки. Если главным элементом страницы является текстовый блок, причиной задержки может быть медленная загрузка шрифта или CSS. Если в первом экране находится изображение, проблема часто связана с его форматом, размерами, приоритетом загрузки или медленным сервером.

INP — скорость реакции на действия пользователя

Interaction to Next Paint измеряет задержку между действием пользователя и моментом, когда браузер обновляет интерфейс. Речь идёт о кликах, нажатиях, выборе пункта меню, вводе данных и других взаимодействиях.

INP помогает понять, не «зависает» ли страница после действия посетителя. Пользователь нажимает кнопку, но меню открывается с задержкой. Выбирает фильтр, а интерфейс несколько секунд не меняется. Заполняет форму, но поле реагирует не сразу. Даже если страница изначально загрузилась быстро, такие задержки создают ощущение неисправного сайта.

Хорошим ориентиром считается INP до 200 миллисекунд. Значение от 200 до 500 миллисекунд говорит о необходимости оптимизации, а более высокая задержка указывает на заметные проблемы с отзывчивостью интерфейса.

Главная причина плохого INP — перегруженный главный поток браузера. Он отвечает за выполнение JavaScript, обработку событий, пересчёт стилей и отрисовку страницы. Когда его надолго занимают тяжёлые задачи, браузер не может своевременно отреагировать на действие человека.

К INP могут приводить:

• большие JavaScript-библиотеки, которые не используются полностью;
• сложные обработчики кликов и ввода;
• частые пересчёты геометрии элементов;
• тяжёлые фильтры и сортировки на стороне браузера;
• сторонние виджеты, чаты и рекламные скрипты;
• обработка больших объёмов данных в интерфейсе;
• неоптимизированные анимации;
• избыточное количество событий, срабатывающих одновременно.

CLS — стабильность макета

Cumulative Layout Shift показывает, насколько сильно элементы страницы неожиданно перемещаются во время загрузки или взаимодействия. Если пользователь собирается нажать на кнопку, а в последний момент она смещается из-за появившегося баннера, это и есть типичная проблема CLS.

Хорошим считается показатель CLS до 0,1. Значение между 0,1 и 0,25 требует улучшения, а более высокий результат означает, что макет заметно нестабилен.

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

На CLS влияют:

• изображения без заранее заданных размеров;
• видео и iframe без зарезервированной области;
• баннеры, которые вставляются в уже загруженную страницу;
• динамические уведомления, меняющие высоту блока;
• неправильная загрузка веб-шрифтов;
• анимации, изменяющие ширину и высоту элементов;
• контент, который добавляется выше уже отображённого материала.

Почему Core Web Vitals важны для бизнеса

Плохие показатели производительности редко ограничиваются техническим отчётом. Они отражаются на поведении людей и на результатах продвижения.

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

Для бизнеса последствия могут проявляться в разных местах:

• посетитель не дожидается открытия страницы услуги;
• покупатель не может быстро найти нужный товар;
• пользователь бросает заполнение формы;
• клиент случайно нажимает не на тот элемент;
• реклама приводит трафик на страницу, которая плохо удерживает внимание;
• увеличивается нагрузка на поддержку из-за непонятного или медленного интерфейса.

Поэтому оптимизировать Core Web Vitals нужно не ради красивого отчёта, а ради конкретных сценариев: открыть страницу, понять предложение, выбрать действие и завершить его без препятствий.

Как проверить Core Web Vitals

Проверка в PageSpeed Insights

Для быстрой оценки можно использовать PageSpeed Insights. Сервис показывает результаты лабораторного теста и, если для страницы накоплены данные, информацию о реальных пользователях.

Проверять стоит не только главную страницу. Отдельно протестируйте:

• страницу услуги;
• карточку товара;
• категорию каталога;
• статью блога;
• страницу контактов;
• форму заказа или заявки;
• личный кабинет;
• страницу с фильтрами и поиском.

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

Проверка в Chrome DevTools

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

Во вкладке Network можно обратить внимание на:

• время ответа сервера;
• размер HTML, CSS, JavaScript и изображений;
• количество запросов;
• долгие запросы к сторонним доменам;
• ошибки загрузки ресурсов;
• повторную загрузку одинаковых файлов.

Во вкладке Performance можно найти длинные задачи JavaScript, задержки отрисовки и моменты, когда страница перестаёт отвечать на действия. Это особенно полезно при поиске причин плохого INP.

Данные реальных пользователей

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

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

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

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

Ускорьте ответ сервера

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

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

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

Оптимизируйте изображение первого экрана

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

При подготовке изображения:

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

Ленивая загрузка полезна для изображений ниже первого экрана, но может навредить LCP, если применить её к главному визуальному элементу. Браузер будет откладывать ресурс, который, наоборот, нужно загрузить как можно раньше.

Уберите блокирующие ресурсы

CSS и JavaScript могут задерживать отображение страницы. Браузер должен скачать и обработать необходимые файлы, прежде чем корректно показать часть интерфейса.

Не обязательно удалять весь JavaScript. Важно разделить ресурсы по приоритету. Сначала должны загружаться стили и код, необходимые для первого экрана. Скрипты, отвечающие за функции ниже по странице или второстепенные виджеты, можно отложить.

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

Настройте шрифты

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

Для улучшения загрузки:

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

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

Найдите длинные задачи JavaScript

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

В отчётах производительности ищите длинные задачи и выясняйте, какой код их запускает. Это может быть построение большого списка, пересчёт фильтров, открытие сложного модального окна, обработка формы или работа стороннего сервиса.

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

Разделяйте сложные операции

Большую задачу иногда можно разделить на несколько небольших. Вместо обработки всего каталога при каждом изменении фильтра можно работать только с необходимой частью данных. Вместо полной перерисовки страницы — обновлять конкретный блок.

Полезные подходы:

• загружать дополнительные данные по запросу;
• ограничивать количество элементов в первоначальном списке;
• использовать постраничную загрузку или постепенное добавление;
• не пересчитывать неизменившиеся части интерфейса;
• переносить тяжёлые вычисления в отдельный поток, если архитектура проекта это оправдывает;
• обрабатывать ввод пользователя с небольшой задержкой, когда постоянный пересчёт не нужен.

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

Сократите сторонние скрипты

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

Проведите инвентаризацию подключений и задайте для каждого вопрос: какую задачу он решает, нужен ли он на всех страницах, используется ли его функциональность на самом деле и можно ли загружать его только после действия пользователя.

Не стоит удалять аналитику или важные сервисы вслепую. Гораздо эффективнее ограничить их область применения и порядок загрузки.

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

Заранее резервируйте место под изображения

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

Это относится не только к большим фотографиям. Н