Как проверить CLS и layout shifts
Полевые данные показывают масштаб реальной проблемы, а Chrome Performance — cluster, время и элементы для исправления. Проверяйте загрузку и долгий сеанс отдельно на mobile и desktop.
Быстрая независимая проверка
- Откройте PageSpeed Insights или поле Field metrics в Chrome Performance для точного URL.
- Выберите mobile и desktop. Запишите URL/origin scope, период и CLS на 75-м перцентиле.
- В чистом профиле откройте Performance → Record and reload с медленной сетью и нужным viewport.
- В Layout shifts выберите cluster с максимальным score, затем каждый diamond: сохраните affected nodes и potential culprit.
- Сделайте отдельную запись после загрузки: прокрутка, consent, popup, carousel, форма и сообщения.
- В Rendering включите Layout Shift Regions и повторите момент сдвига для визуального подтверждения.
Как оценить показатель
| CLS на 75-м перцентиле | Оценка | Действие |
|---|---|---|
| ≤ 0,10 | Хорошо | Проверить поздние сценарии и сохранить baseline |
| > 0,10 и ≤ 0,25 | Нужно улучшить | Начать с худшего cluster |
| > 0,25 | Плохо | Приоритетно найти и исправить причины |
Порог применяется к полевому распределению, обычно на 75-м перцентиле. Локальная запись — диагностический пример, а не замена данным реальных пользователей.
Что означает trace
Shift score зависит от доли затронутой области и расстояния перемещения. Браузер группирует близкие события в session windows/clusters; CLS страницы определяется самым большим cluster, а не суммой всех движений за бесконечный сеанс.
Элемент в affected nodes мог быть сдвинут другим блоком выше. Potential culprit — подсказка, которую нужно подтвердить таймингом, DOM и отключением причины.
Расхождения и ложные выводы
- Field и lab отличаются из-за устройств, сети, кеша, персонализации и продолжительности сеанса.
- URL может не иметь достаточно данных, тогда интерфейс показывает origin; не выдавайте его за точный URL.
- Shift в пределах 500 мс после недавнего input может иметь
hadRecentInputи не учитываться в CLS. - Scroll сам по себе не исключает shift; поздняя вставка во время прокрутки может учитываться.
- Автоматическая карусель, font swap, ad refresh и SPA-навигация требуют записи после load.
- Нулевой локальный CLS один раз не доказывает стабильность всех шаблонов и состояний.
Автоматическая цена относится к одной согласованной причине и шаблонам на странице услуги. Для исправления используйте пошаговую инструкцию.