Найдите неожиданное смещение
CLS не исключает каждое намеренное движение. Метрика не учитывает сдвиги в пределах 500 миллисекунд после допустимого пользовательского ввода, но задержанная реакция на ввод всё равно может попасть в расчёт. Метрика использует окна сессий, поэтому смотрите реальные записи о сдвигах макета, а не предполагайте, что один анимационный эффект объясняет весь балл.
Как это проверить
Полевые данные покажут, затрагивает ли проблема реальных посетителей. Затем воспроизведите её в трассировке производительности с маркерами сдвигов макета. Смотрите элемент, который сместился, и элемент, который вызвал смещение: это могут быть разные элементы. Проверяйте холодный и повторный визиты: закешированные шрифты и ресурсы могут скрыть проблему первой загрузки.
Как внедрить или улучшить
Резервируйте ширину и высоту или соотношение сторон для медиа, выделяйте фиксированную или ограниченную область под динамические модули и не вставляйте контент над уже видимым элементом управления. Если шрифт меняет метрики, подберите совместимый запасной шрифт или настройте стратегию загрузки шрифтов. После каждого изменения заново проверяйте фокус с клавиатуры и брейкпоинты адаптивности.
Ограничения и частые ошибки
Не подавляйте законные переходы, которые вызывает пользователь, только ради улучшения метрики. Цель — предсказуемый макет до чтения и во время него, а не синтетический балл, оторванный от интерфейса.
Точечная проверка CLS состоит из трёх проходов: холодная загрузка, состояние после взаимодействия и брейкпоинт адаптивности. На холодной загрузке отметьте, какой элемент сместился и какой поздний ресурс его вызвал. В состоянии после взаимодействия отличите раскрытие, инициированное пользователем, от неожиданной вставки над активным элементом управления. На брейкпоинте проверьте, не теряет ли изображение, рекламный слот или баннер согласия зарезервированную геометрию. Конкретное исправление: задать ширину и высоту или соотношение сторон для контейнера изображения до того, как придут байты самого изображения, а затем убедиться, что сетка, порядок фокуса и позиция прокрутки остаются стабильными на узком экране. Не резервируйте избыточное пустое место только ради снижения метрики: страница должна выглядеть осмысленно.