В прошлом "скорость" была расплывчатым понятием. Загружался ли сайт быстро? Сегодня 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, чтобы контент не двигался при загрузке рекламы.
Сводная таблица: Метрики с первого взгляда
| Метрика | Фокус | Цель "Хорошо" | Ощущение пользователя |
|---|---|---|---|
| LCP | Загрузка | Менее 2.5с | "Оно здесь." |
| INP | Отзывчивость | Менее 200мс | "Оно работает." |
| CLS | Стабильность | Менее 0.1 | "Оно стабильно." |
Как измерить ваш результат
Вам не нужно гадать. Google предоставляет бесплатные инструменты для проверки вашего сайта на соответствие этим стандартам:
- PageSpeed Insights: Инструмент для быстрого снимка. Предоставляет как "Лабораторные данные" (смоделированные), так и "Полевые данные" (данные реальных пользователей).
- Google Search Console: Отчет "Основные интернет-показатели" показывает, какие URL на сайте не проходят проверку, и группирует их по типу проблемы.
- Lighthouse: Инструмент разработчика, встроенный в браузер Chrome (ПКМ > Просмотреть код > Lighthouse) для локального тестирования.