Скорость сайта нельзя оценивать только по ощущению разработчика или одному числу Lighthouse. Core Web Vitals показывают, как реальные пользователи видят главный контент, взаимодействуют со страницей и воспринимают стабильность макета. Проверка полезна перед запуском новой страницы, после редизайна и при падении конверсии.
Разделите полевые и лабораторные данные
Полевые данные собираются у реальных посетителей и отражают разные устройства, сети и сценарии. В Search Console они помогают понять состояние групп URL. Лабораторный тест в PageSpeed Insights воспроизводим и удобен для поиска причины, но зависит от выбранной конфигурации.
Начните с шаблонов страниц, а не с одного адреса. Карточки товара, статьи и формы могут загружаться по-разному. Отдельно проверьте главную страницу и самые посещаемые URL, затем сравнивайте изменения после релиза.
Поймите три ключевые метрики
LCP показывает, как быстро появляется крупный элемент основного содержания. Для хорошего опыта Google рекомендует укладываться в 2,5 секунды. INP описывает задержку ответа на взаимодействия, а хорошим считается значение менее 200 миллисекунд. CLS измеряет неожиданные сдвиги, и целевой порог — менее 0,1.
Порог — ориентир для устойчивого опыта, а не гарантия позиции в поиске. Оценивайте долю URL, которые проходят критерий, и смотрите на распределение значений. Один быстрый тест не заменяет наблюдение за реальными посетителями.
Найдите причину медленного LCP
Если LCP растёт, проверьте время ответа сервера, блокирующие стили, размер главного изображения и очередь шрифтов. Большой баннер часто загружается позже, чем нужно, потому что спрятан за скриптом или CSS. Укажите приоритет для главного ресурса и отдавайте изображение в подходящем формате.
Сравнивайте холодную и повторную загрузку. CDN и кэш меняют результат, поэтому фиксируйте условия теста. Если сервер отвечает долго, оптимизация картинки даст ограниченный эффект — сначала измерьте TTFB и работу кеширования.
Сократите задержку INP
INP ухудшается, когда обработчик клика блокирует главный поток долгой задачей. Ищите тяжёлый JavaScript, лишние сторонние виджеты и синхронные операции. Разбейте работу на небольшие части, отложите необязательные скрипты и не пересчитывайте весь интерфейс после простого изменения поля.
Проверьте реальные действия: открытие меню, поиск, фильтр, отправка формы. В лаборатории имитируйте сценарий, а в полевых данных смотрите, на каких страницах задержка выше. Хорошая оптимизация улучшает конкретное действие, а не только оценку инструмента.
Уберите неожиданные сдвиги CLS
Для стабильности заранее задавайте размеры изображений, видео, рекламных блоков и встраиваемых элементов. Не вставляйте баннер над уже показанным текстом без зарезервированного места. Шрифты проверяйте на подмену и изменение метрик, особенно в первом экране.
Откройте страницу на мобильном устройстве и прокрутите её медленно. Запишите момент сдвига и элемент, который его вызвал. Такой видеопример быстрее объясняет проблему команде, чем одно число в отчёте.
Порядок проверки Core Web Vitals
Идите от общих данных к конкретному ресурсу и только потом меняйте код.
- Выберите шаблоны и список важных URL.
- Посмотрите полевые данные в Search Console и лабораторный тест.
- Зафиксируйте LCP, INP, CLS и условия измерения.
- Найдите главный ресурс или задачу, которая формирует плохой результат.
- Проверьте сервер, изображения, шрифты, CSS и сторонние скрипты.
- Внесите одну группу изменений и повторите тест.
- Сравните полевые данные после накопления нового периода.
Метрика и первый шаг диагностики
Таблица помогает не лечить симптом неподходящим инструментом.
| Метрика | Хороший ориентир | Что проверить первым |
|---|---|---|
| LCP | до 2,5 с | TTFB, главный контент, изображение, CSS |
| INP | менее 200 мс | Длинные задачи и обработчики событий |
| CLS | менее 0,1 | Размеры медиа, реклама, шрифты |
| Полевые данные | 75-й перцентиль | Реальные устройства и сети |
| Лабораторный тест | Повторяемый сценарий | Водопад и профилирование |
Как оформить план исправлений
Запишите проблему языком пользователя: например, «кнопка фильтра отвечает с задержкой на телефоне», а не «плохой INP». Рядом укажите шаблон, долю URL, предполагаемую причину, владельца и способ проверки. Тогда задача не потеряется между SEO и разработкой.
После каждой правки сохраните снимок до и после. Не меняйте одновременно сервер, изображения и JavaScript, если хотите понять вклад каждого действия. Когда полевые данные улучшатся, закрепите практику в чек-листе релиза.
Частые ошибки и диагностика
Ошибка — использовать только Lighthouse и считать его оценку абсолютной. Другая — оптимизировать главную страницу, хотя большинство пользователей приходит на каталог или статью. Не стоит также сжимать изображения без проверки их роли: слишком маленький ресурс может ухудшить восприятие.
Если метрика ухудшилась после релиза, сравните версии HTML, CSS и скриптов, а затем проверьте сеть и устройство. Для INP полезно записать конкретное действие, для CLS — последовательность кадров, для LCP — какой элемент был самым крупным. Диагноз должен приводить к проверяемой гипотезе.
Полезные материалы
Перед этой проверкой полезно изучить чек-лист технического аудита. После исправлений свяжите данные с сквозной аналитикой сайта.
Core Web Vitals дают рабочую карту пользовательского опыта. Сначала отделите реальные данные от лабораторного теста, затем найдите конкретный ресурс или сценарий и проверьте результат после изменения. Такой порядок делает скорость частью регулярной работы, а не разовой гонкой за баллами. В конце проверки зафиксируйте дату, исходные условия и следующий шаг. Такой короткий протокол помогает повторить работу после сезона, обновления сайта или изменения автомобиля. Если материал передаётся другому специалисту, оставьте ссылки на источники и укажите ограничения рекомендации. В конце проверки зафиксируйте дату, исходные условия и следующий шаг. Такой короткий протокол помогает повторить работу после сезона, обновления сайта или изменения автомобиля. Если материал передаётся другому специалисту, оставьте ссылки на источники и укажите ограничения рекомендации. В конце проверки зафиксируйте дату, исходные условия и следующий шаг. Такой короткий протокол помогает повторить работу после сезона, обновления сайта или изменения автомобиля. Если материал передаётся другому специалисту, оставьте ссылки на источники и укажите ограничения рекомендации. В конце проверки зафиксируйте дату, исходные условия и следующий шаг. Такой короткий протокол помогает повторить работу после сезона, обновления сайта или изменения автомобиля. Если материал передаётся другому специалисту, оставьте ссылки на источники и укажите ограничения рекомендации. В конце проверки зафиксируйте дату, исходные условия и следующий шаг. Такой короткий протокол помогает повторить работу после сезона, обновления сайта или изменения автомобиля. Если материал передаётся другому специалисту, оставьте ссылки на источники и укажите ограничения рекомендации. В конце проверки зафиксируйте дату, исходные условия и следующий шаг. Такой короткий протокол помогает повторить работу после сезона, обновления сайта или изменения автомобиля. Если материал передаётся другому специалисту, оставьте ссылки на источники и укажите ограничения рекомендации. В конце проверки зафиксируйте дату, исходные условия и следующий шаг. Такой короткий протокол помогает повторить работу после сезона, обновления сайта или изменения автомобиля. Если материал передаётся другому специалисту, оставьте ссылки на источники и укажите ограничения рекомендации.