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

Что измеряют Core Web Vitals

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

Семантика статьи

Основной запрос: «как проверить скорость сайта и Core Web Vitals». Дополнительные кластеры: проверить скорость загрузки сайта, LCP INP CLS, показатели Core Web Vitals, PageSpeed Insights, медленная страница, ускорение сайта, оптимизация изображений и мобильная скорость. Интент — измерить показатели и понять работы с эффектом.

Почему не стоит гнаться за 100 баллами

Хороший отчёт не гарантирует первое место в поиске. Сначала устраните заметные проблемы: долгий первый экран, неработающую кнопку, прыгающую форму и ошибки на популярных URL.

Где измерять скорость: лабораторные и полевые данные

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

Сравнивайте одинаковые шаблоны

Проверьте главную, категорию, карточку, статью и форму. Проблема часто живёт в общем компоненте: баннере, чате, аналитике или карусели. Для отклика бэкенда используйте проверку HTTP-ответа, для рисков — аудит сайта.

Практический совет

Как найти причину плохих LCP, INP и CLS

Начинайте с элемента и события, а не с общей рекомендации «сжать всё». Для LCP найдите крупнейший элемент первого экрана — часто это hero-изображение, баннер или заголовочный блок. Для INP посмотрите обработчики клика, длинные задачи JavaScript и сторонние виджеты. Для CLS определите блок, который получает размер слишком поздно: картинка без заданных габаритов, рекламный контейнер, шрифт или динамическая плашка.

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

Проверяйте маршрут, а не только финальную страницу

Пользователь может попасть по HTTP-ссылке, пройти два редиректа и только затем получить страницу. Это ухудшает старт загрузки. Проверьте цепочку через анализ редиректов, а также убедитесь, что HTTPS не содержит проблемных ресурсов — поможет проверка HTTPS и SSL сайта.

Не путайте симптом и причину

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

Что исправлять в первую очередь

1. Ускорьте критический путь. Сократите время ответа, лишние редиректы и блокирующие ресурсы первого экрана.
2. Оптимизируйте медиа. Отдавайте подходящий размер, современный формат и не загружайте невидимые изображения сразу.
3. Уберите лишний JavaScript. Отложите второстепенные сценарии, разделите тяжёлый код и проверьте сторонние виджеты.
4. Стабилизируйте макет. Задавайте размеры медиа и резервируйте место под динамические блоки.
5. Тестируйте после каждого релиза. Маленькая правка шаблона способна вернуть проблему на тысячи страниц.

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

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

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

Свяжите отчёт со страницами и задачами: какая проблема была, какой компонент изменён, какие метрики ожидаются и кто отвечает за проверку. При росте трафика или смене шаблона возвращайтесь к замерам. Для контроля видимости после улучшений используйте проверку позиций, а если позиции уже просели — план действий при падении позиций.