Маркетолог открывает PageSpeed Insights, видит оранжевые 54 балла и ставит разработчику задачу «поднять скорость до 90». Через две недели в отчёте 88, а покупатели всё так же жалуются, что фильтр в каталоге подвисает. Задача выполнена формально и не решена по существу.
Так происходит, когда метрики оторваны от сценариев. Ниже разбираем, что именно измеряют Core Web Vitals, откуда брать данные и как сформулировать задачу так, чтобы её результат был заметен посетителю.
Коротко
- Оценка сайта строится по полевым данным реальных посетителей на 75-м процентиле, а не по лабораторному тесту.
- INP измеряет отклик на клики, касания и нажатия клавиш. Обычная проверка загрузки его не воспроизводит.
- Приоритеты выбираются по шаблонам и сценариям, которые приносят заявки и продажи.
- Хорошие Core Web Vitals не гарантируют позиции, но плохой отклик интерфейса стоит конверсий.
Что измеряют LCP, INP и CLS
| Метрика | Что чувствует посетитель | Хорошо | Плохо |
|---|---|---|---|
| LCP (Largest Contentful Paint) | Когда появился главный контент первого экрана | до 2,5 с | больше 4 с |
| INP (Interaction to Next Paint) | Как быстро интерфейс откликается на клик, касание, нажатие клавиши | до 200 мс | больше 500 мс |
| CLS (Cumulative Layout Shift) | Прыгает ли страница во время загрузки и работы | до 0,1 | больше 0,25 |
Пороги проверяются на 75-м процентиле визитов, отдельно для мобильных и десктопа. Это значит, что три четверти посетителей должны получить хороший результат. Если сайт быстрый у вас на рабочем ноутбуке, это ничего не говорит о покупателе со средним смартфоном в метро.
INP с марта 2024 года заменил в наборе метрику FID. FID измерял только задержку первого взаимодействия, а INP учитывает отклик на протяжении всего визита. Наведение курсора, прокрутка и масштабирование в INP не входят.
Полевые и лабораторные данные
Полевые данные собираются с реальных посетителей в браузере Chrome и отражают период около 28 дней. Их показывают блок «Данные реальных пользователей» в PageSpeed Insights и отчёт Core Web Vitals в Search Console. Лабораторные данные получают одним прогоном Lighthouse на эмулированном устройстве. Он нужен для отладки, но оценка сайта строится не по нему.
При чтении полевых данных смотрите на три вещи. Уровень: конкретный URL или весь домен (origin). Для малопосещаемых страниц данных по URL может не быть, и тогда показываются данные домена. Устройство: мобильные и десктоп оцениваются отдельно. Период: изменения после релиза проявятся в полевых данных постепенно, по мере смены 28-дневного окна.
Сценарии, которые стоит проверить
Составьте список действий, которые посетитель совершает на пути к заявке или покупке, и пройдите каждое на среднем телефоне с замедлением процессора в DevTools:
- применение фильтра в каталоге и переключение сортировки;
- ввод в поиск по сайту и появление подсказок;
- открытие мобильного меню;
- выбор варианта товара: размер, цвет, комплектация;
- добавление в корзину и изменение количества;
- заполнение и отправка формы заявки.
С формой есть отдельная тонкость. Быстрый отклик кнопки «Отправить» и успешная доставка заявки не одно и то же. Форма может мгновенно показать «Спасибо», а письмо не дойти. Проверку доставки заявок мы описываем в статье о позициях и заявках. К скорости она не относится, но в одном релизе их часто путают.
Причины по каждой метрике
LCP складывается из четырёх частей: время ответа сервера, задержка начала загрузки главного ресурса, время его загрузки и задержка отрисовки. Частые причины: медленный сервер или отсутствие кэша; главное изображение подгружается скриптом или задано в CSS, и браузер находит его поздно; изображение тяжёлое; у главной картинки стоит ленивая загрузка. Последнее правило без исключений: главное изображение экрана нельзя загружать лениво.
INP складывается из задержки ввода, обработки события и задержки отрисовки. Главный враг INP: длинные задачи в основном потоке. Пока выполняется тяжёлый скрипт, браузер не может отреагировать на нажатие. Помогают разбиение длинных задач, перенос второстепенной работы после обновления экрана и уменьшение DOM.
CLS чаще всего дают изображения без размеров, баннеры и виджеты, вставляемые без зарезервированного места, и шрифты, которые меняют метрики текста при загрузке.
| Симптом | Какие данные нужны | Что делать |
|---|---|---|
| LCP плохой на всех шаблонах | Время ответа сервера, кэширование, CDN | Ускорить ответ сервера, включить кэш |
| LCP плохой на карточках товаров | Какой элемент LCP, когда начинается его загрузка | Отдать главное изображение в HTML, убрать ленивую загрузку, сжать |
| INP плохой в каталоге | Профиль DevTools при применении фильтра | Разбить длинные задачи, обновлять список без полной перерисовки |
| INP плохой на всём сайте | Список сторонних скриптов и их вклад в длинные задачи | Отложить загрузку виджетов, убрать дубли счётчиков |
| CLS на мобильных | Запись сдвигов в DevTools, элементы, которые сдвигаются | Задать размеры изображениям, резервировать место под баннеры |
| Данных по URL нет | Посещаемость страницы, данные по домену | Ориентироваться на данные домена и ручные проверки |
Сторонние виджеты: как проверить их вклад
Онлайн-чат, коллтрекинг, квиз, несколько счётчиков, виджет отзывов. Каждый весит немного, вместе они занимают основной поток в самые важные секунды. Соблазн отключить всё велик, но за каждым виджетом стоит бизнес-функция.
Сначала измерьте. В DevTools есть блокировка отдельных запросов: заблокируйте один скрипт и сравните профиль. На вкладке Performance видно, чьи задачи блокируют поток. Затем обсудите с владельцами виджетов варианты: загрузка после первого взаимодействия или по таймеру, отказ от дублирующих сервисов, замена тяжёлого чата более лёгким. Решение принимается вместе с маркетингом, а не силами разработчика втихую.
Как поставить задачу и принять результат
Задача «поднять PageSpeed до 90» плоха тем, что её можно выполнить, не улучшив ничего важного. Хорошая задача описывает сценарий, текущее состояние, цель и способ проверки.
Шаблон: каталог, мобильные. Сценарий: применение фильтра. Сейчас: INP по полевым данным домена 380 мс, в профиле обработчик фильтра выполняется 250 мс одной задачей. Цель: INP в зоне «хорошо», отклик фильтра без видимой задержки на среднем телефоне. Проверка: профиль DevTools до и после, полевые данные через 4 недели после релиза. Ограничения: не отключать коллтрекинг и чат без согласования.
Чек-лист повторной проверки
- Изменения проверены на тех же шаблонах и сценариях, что и до работ.
- Лабораторный тест и профиль DevTools сохранены до и после.
- Главное изображение первого экрана загружается без ленивой загрузки.
- Бизнес-функции работают: формы, чат, коллтрекинг, аналитика.
- Заявки из форм доходят до CRM после релиза.
- Полевые данные пересмотрены через 4 недели, не раньше.
Помните о границах. Google относит Core Web Vitals к сигналам опыта страницы, но хорошие метрики не гарантируют позиций: контент и релевантность важнее. Ускорение оправдано прежде всего тем, что посетитель быстрее и спокойнее доходит до заявки. Если на сайте есть и другие технические проблемы, начните с общего технического аудита.
Вывод
Скорость сайта измеряется не баллом в отчёте, а набором конкретных моментов, где посетитель ждёт: появления первого экрана, отклика фильтра, отправки формы. Начните со списка таких моментов на пути к заявке, и приоритеты расставятся почти сами.
Частые вопросы
Нет. Балл считается по лабораторному тесту и не отражает опыт реальных посетителей. Ориентируйтесь на полевые данные Core Web Vitals и на скорость ключевых сценариев: каталога, карточки, корзины, формы.
Лабораторный тест делает один прогон загрузки на эмулированном устройстве. Search Console показывает данные реальных посетителей за последние недели, включая медленные телефоны и отклик на действия. INP лабораторный тест вообще не измеряет.
Полевые данные собираются за скользящее окно около 28 дней, поэтому изменения проявляются постепенно. Технический результат можно проверить сразу в профиле DevTools, а полевой лучше оценивать через четыре недели после релиза.
Гарантии нет. Google учитывает опыт страницы, но релевантность и качество контента важнее. Ускорение чаще окупается через конверсию: посетители реже уходят и быстрее доходят до заявки.
