Как исправить низкие оценки Core Web Vitals?

Выясните, какая метрика не проходит проверку, на каком устройстве и для какой группы страниц. Отчёт Core Web Vitals в Search Console показывает все три метрики по данным реальных посещений в Chrome. Затем устраните причину, стоящую за этой метрикой. Для LCP это скорость загрузки главного изображения или текста, для INP — долгие задачи JavaScript, которые задерживают отклик, для CLS — контент, который появляется без заранее зарезервированного места. Полевые данные охватывают последние 28 дней, поэтому оценивать результат исправления нужно по итогам месяца.

Шаг 1: определите, что не проходит проверку

1. Откройте отчёт Core Web Vitals в Search Console и выберите Мобильные или Компьютеры: эти типы устройств оцениваются отдельно.
2. Откройте одну из перечисленных проблем, например проблему LCP на мобильных устройствах, чтобы увидеть затронутую группу URL и примеры адресов. У всей группы общий статус, который определяется по самой слабой метрике.
3. Прогоните один из примеров URL через PageSpeed Insights: вы увидите полевые данные для этой страницы рядом с лабораторным тестом, который поможет в отладке.

Лабораторные инструменты, такие как Lighthouse, не могут измерить INP, потому что в них никто не взаимодействует со страницей, поэтому вместо этого они показывают Total Blocking Time. Для INP надёжным ориентиром остаются измерения на реальных пользователях.

Как исправить медленный LCP

В руководстве web.dev по оптимизации LCP LCP делится на четыре части: время ответа сервера, задержка перед началом загрузки основного ресурса, время его загрузки и задержка перед отрисовкой. Начните с самой большой из них:

• Сделайте изображение LCP доступным для обнаружения в исходном HTML, а не добавляйте его с помощью JavaScript или CSS, и задайте ему fetchpriority="high".
• Никогда не используйте отложенную загрузку для изображения LCP.
• Уменьшите его вес: подберите правильные размеры, современный формат и сжатие, а также используйте CDN, расположенную рядом с посетителями.
• Уберите ресурсы, блокирующие отрисовку: сократите таблицы стилей, не подключайте синхронные скрипты в <head>, используйте серверный рендеринг для основного контента.
• Ускорьте ответ сервера: сократите число редиректов и включите кеширование страниц на периферийных серверах.

Как исправить низкий INP

Руководство по оптимизации INP разбивает каждое взаимодействие на задержку ввода, время обработки и задержку отображения:

• Задержка ввода: сократите объём JavaScript, который выполняется при загрузке страницы, чтобы основной поток был свободен в момент касания.
• Время обработки: разбейте длинные обработчики событий на более мелкие задачи и уступайте основной поток: сначала выполняйте видимое обновление, а остальное откладывайте.
• Задержка отображения: держите DOM небольшим, не вызывайте принудительный пересчёт макета, читая стили сразу после их изменения, и применяйте content-visibility на длинных страницах.

Как исправить высокий CLS

Руководство по оптимизации CLS перечисляет типичные причины и способы их устранения:

• Изображения и видео без заданных размеров: добавьте атрибуты width и height или CSS-свойство aspect-ratio.
• Реклама, встраиваемый контент и iframe: зарезервируйте для них место в макете до загрузки.
• Контент, вставляемый выше уже отображаемого: используйте заглушку нужного размера или добавляйте новый контент ниже того, что читает посетитель.
• Веб-шрифты: предзагружайте важные шрифты, чтобы текст не перестраивался в последний момент.
• Анимации: анимируйте transform, а не такие свойства, как top или left.

Страницы, которые могут использовать кеш быстрой навигации браузера (back/forward cache), также избегают сдвигов макета, когда посетители возвращаются на них.

Шаг 3: подтвердите исправление

Разверните изменения, затем откройте проблему в отчёте Core Web Vitals и запустите проверку. Google отслеживает группу в течение 28 дней. Проверка не запускает повторное сканирование и ничего не ускоряет: она лишь следит за тем, устранена ли проблема. Поскольку полевые данные накапливаются за 28 дней, показатели в отчёте будут улучшаться постепенно. О том, что означает каждая метрика, читайте в статье Что означают LCP, INP и CLS?.

Как помогает AutoPSEO

Отчёт Core Web Vitals в AutoPSEO показывает на графиках примерно за шесть месяцев еженедельные данные Chrome UX Report для вашего сайта или отдельного URL на смартфонах, компьютерах и планшетах. Так вы можете увидеть неделю, когда исправление вступило в силу, или неделю, когда после релиза ситуация ухудшилась, не дожидаясь окончания очередного 28-дневного периода.