Проверка скорости сайта и Core Web Vitals: LCP, INP, CLS

Проверка скорости показывает, насколько быстро реальные посетители видят основное содержимое страницы, может ли страница отвечать на нажатия без задержки и не прыгает ли вёрстка при загрузке. Для этого у Google есть три метрики Core Web Vitals: LCP, INP и CLS. Ниже — как их измерить бесплатными инструментами, какие значения считаются хорошими и где обычно прячутся причины.

Скорость — часть и технической проверки, и разговора об удобстве: обзоры есть на страницах технического аудита и аудита юзабилити и скорости.

Три метрики и их пороги

Значения между порогами считаются зоной, где нужны улучшения. Оценка идёт по 75-му процентилю: страница проходит, если хорошее значение получили как минимум три четверти визитов.

Полевые и лабораторные данные

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

Полевые данные собираются у реальных пользователей браузера Chrome за последние 28 дней. Их показывают отчёт Core Web Vitals в Search Console и верхний блок PageSpeed Insights. Именно они отражают то, что видят люди.

Лабораторные данные — разовый тест в эмуляции: условный телефон, условная медленная сеть. Это нижний блок PageSpeed Insights с баллом от 0 до 100 и Lighthouse в браузере. Тест полезен для поиска причин, но балл зависит от условий запуска и может заметно меняться от прогона к прогону.

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

Чек-лист по пунктам

1. Откройте отчёт Core Web Vitals в Search Console. Посмотрите отдельно мобильные и десктопные данные, группы адресов с плохими и требующими улучшения значениями. Отчёт группирует похожие страницы, поэтому сразу видно, какой шаблон проблемный.
2. Выберите по одной странице каждого шаблона: главная, раздел каталога, карточка, статья, страница услуги, контакты.
3. Прогоните каждую через PageSpeed Insights на мобильном профиле. Запишите полевые значения LCP, INP, CLS, если они есть, и лабораторные показатели.
4. Найдите элемент LCP. В отчёте указано, какой элемент считается крупнейшим. Чаще всего это картинка первого экрана или большой заголовок.
5. Посмотрите рекомендации в разделах диагностики: тяжёлые изображения, блокирующие стили и скрипты, долгий ответ сервера, лишний JavaScript.
6. Проверьте время ответа сервера. В DevTools браузера на вкладке «Сеть» видно, сколько ждали первый байт документа. Если ожидание длинное, оптимизация картинок не спасёт.
7. Посмотрите сдвиги вёрстки глазами. Откройте страницу на телефоне через медленный интернет и наблюдайте: прыгает ли текст, когда подгружаются баннер, шрифт, виджет чата.
8. Оцените сторонние скрипты: счётчики, чаты, виджеты обратного звонка, кнопки соцсетей. Каждый добавляет загрузку и может ухудшить INP.

Частые причины и что с ними делать

• Картинка первого экрана весит несколько мегабайт. Сжать, отдать в современном формате, указать размеры, не ставить на неё ленивую загрузку.
• Нет размеров у изображений и баннеров. Браузер не резервирует место, и вёрстка прыгает: растёт CLS. Указать ширину и высоту или пропорции блока.
• Шрифты подгружаются поздно и текст перерисовывается. Подключать только нужные начертания, использовать подходящую стратегию отображения шрифта.
• Тяжёлый JavaScript от темы оформления, слайдеров и конструкторов. Убирать неиспользуемое, откладывать некритичные скрипты.
• Медленный сервер. Кеширование страниц, обновление хостинга, проверка тяжёлых запросов к базе.

Таблица проверки

Как читать раздел о скорости в отчёте подрядчика

Хороший раздел разделяет полевые и лабораторные данные, приводит цифры по шаблонам страниц и для мобильных, называет конкретные причины и оценивает трудоёмкость исправления. Слабый раздел — скриншот балла PageSpeed для главной и совет «увеличить скорость до 90+». Балл сам по себе не цель: сайт с баллом 70 и пройденными порогами полевых метрик в лучшем положении, чем сайт с баллом 95 в лаборатории и плохим INP у реальных посетителей. Как отличить содержательный отчёт от формального, разобрано в статье о том, как проверить подрядчика по его аудиту.

Итог проверки

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

Вопросы и ответы

Почему PageSpeed Insights каждый раз показывает разный балл?

Лабораторный тест запускается в эмуляции, и на результат влияют загрузка сервера в момент проверки, сеть, рекламные и сторонние скрипты. Разброс в несколько баллов нормален. Для решений смотрите полевые данные за 28 дней или делайте несколько прогонов и берите типичное значение.

Учитывает ли Яндекс Core Web Vitals?

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

Что делать, если полевых данных нет?

Это нормально для сайта с небольшой посещаемостью. Опирайтесь на лабораторный тест в PageSpeed Insights и Lighthouse, проверяйте страницы на реальном телефоне через мобильный интернет и чините конкретные проблемы из диагностики. Когда посещаемость вырастет, полевые данные появятся в Search Console.

Нужно ли добиваться 100 баллов?

Нет. Балл — сводная оценка лабораторного теста, и последние баллы часто стоят непропорционально дорого. Цель — пройти пороги Core Web Vitals по полевым данным и убрать заметные проблемы: долгую загрузку первого экрана, прыгающую вёрстку и задержку отклика.