Основные интернет-показатели (Core Web Vitals): Улучшение скорости и UX

В прошлом "скорость" была расплывчатым понятием. Загружался ли сайт быстро? Сегодня Google точно определил количественно, что такое "быстро" и "плавно" для пользователя. Эти метрики называются Основные интернет-показатели (Core Web Vitals - CWV).

Став фактором ранжирования, CWV сместили фокус с просто скорости сервера на воспринимаемый пользовательский опыт. Дело не только в том, как быстро загружается код; дело в том, как скоро пользователь действительно может использовать страницу.

Три конкретные метрики составляют Основные интернет-показатели. Чтобы пройти оценку, страница должна получить оценку "Хорошо" по всем трем показателям.

1. LCP (Largest Contentful Paint) – Производительность загрузки

"Как быстро появляется основной контент?"

LCP измеряет время, необходимое для полной загрузки и появления на экране самого большого видимого элемента (обычно это главное изображение, видео или основной заголовок). Это говорит пользователю: "Эта страница действительно работает".

Пороговые значения

• Хорошо: ≤ 2.5 секунды
• Требует улучшения: ≤ 4.0 секунды
• Плохо: > 4.0 секунды

Распространенные причины плохого LCP

• Медленное время ответа сервера: Если ваш хостинг дешевый или перегружен, браузер слишком долго ждет получения данных.
• Задержка загрузки ресурсов: Главное изображение не оптимизировано или загружается с помощью ленивой загрузки (lazy-loading), чего следует избегать для верхнего изображения.
• JavaScript, блокирующий рендеринг: Браузер приостанавливает построение страницы, чтобы прочитать файл скрипта.

Как улучшить

• Оптимизируйте изображения: Сжимайте изображения (формат WebP) и убедитесь, что главное изображение не загружается лениво.
• Используйте CDN: Сеть доставки контента (CDN) обслуживает изображения с сервера, физически более близкого к пользователю.

2. INP (Interaction to Next Paint) – Интерактивность

"Зависает ли страница, когда я кликаю?"

Примечание: INP официально заменил First Input Delay (FID) в качестве основной метрики в марте 2024 года.

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

Пороговые значения

• Хорошо: ≤ 200 миллисекунд
• Требует улучшения: ≤ 500 миллисекунд
• Плохо: > 500 миллисекунд

Распространенные причины плохого INP

• Тяжелое выполнение JavaScript: "Главный поток" браузера слишком занят обработкой кода, чтобы реагировать на клик пользователя.
• Сложные макеты: Браузер тратит слишком много времени на перерисовку страницы после взаимодействия.

Как улучшить

• Разбивайте длинные задачи: Разработчики могут разбивать большие куски JavaScript на более мелкие части, чтобы браузер мог "дышать".
• Оптимизируйте обработчики событий: Убедитесь, что код, запускаемый кликом, легкий и быстрый.

3. CLS (Cumulative Layout Shift) – Визуальная стабильность

"Контент неожиданно прыгает?"

Мы все с этим сталкивались: вы собираетесь нажать кнопку, но внезапно над ней загружается реклама, сдвигая контент вниз, и вы случайно нажимаете не туда. Это сдвиг макета. CLS измеряет общую сумму всех неожиданных сдвигов макета, которые происходят в течение жизни страницы.

Пороговые значения

• Хорошо: ≤ 0.1
• Требует улучшения: ≤ 0.25
• Плохо: > 0.25

Распространенные причины плохого CLS

• Изображения без размеров: Если вы не укажете браузеру width="800" и height="600", он не будет знать, сколько места зарезервировать.
• Реклама и вставки: Рекламные баннеры, которые динамически меняют размер, часто сдвигают контент вниз.
• Веб-шрифты: Иногда текст скрыт до тех пор, пока пользовательский шрифт не загрузится (FOIT) или не сменит стиль (FOUT), вызывая изменение высоты строки.

Как улучшить

• Устанавливайте размеры: Всегда включайте атрибуты ширины и высоты в элементы изображений и видео.
• Резервируйте место: Если у вас есть динамическое рекламное место, зарезервируйте для него конкретный размер блока в CSS, чтобы контент не двигался при загрузке рекламы.

Сводная таблица: Метрики с первого взгляда

Как измерить ваш результат

Вам не нужно гадать. Google предоставляет бесплатные инструменты для проверки вашего сайта на соответствие этим стандартам:

• PageSpeed Insights: Инструмент для быстрого снимка. Предоставляет как "Лабораторные данные" (смоделированные), так и "Полевые данные" (данные реальных пользователей).
• Google Search Console: Отчет "Основные интернет-показатели" показывает, какие URL на сайте не проходят проверку, и группирует их по типу проблемы.
• Lighthouse: Инструмент разработчика, встроенный в браузер Chrome (ПКМ > Просмотреть код > Lighthouse) для локального тестирования.