Как уменьшить CLS самостоятельно
Запишите загрузку и полный сценарий в Chrome Performance, выберите самый большой cluster, найдите moved elements и потенциального виновника. Способ исправления зависит от причины сдвига.
Самый безопасный путь
Сообщение разработчику
«Запишите Performance на проблемном mobile/desktop URL при загрузке и действиях, найдите worst Layout Shifts cluster, moved elements и culprit. Исправьте общую причину: intrinsic size/aspect-ratio, зарезервированный ad/embed slot, стабильный font fallback, место для injected content или transform-анимацию. Повторите тот же trace и не скрывайте проблему фиксированной высотой без адаптивного теста».
Сохраните исходные шаблоны/CSS, trace, скриншоты и контрольные действия. Меняйте одну причину за раз, чтобы изменение score можно было связать с правкой.
Пошаговая диагностика и исправление
- Сначала посмотрите field CLS для URL и origin отдельно по mobile/desktop; зафиксируйте период и 75-й перцентиль.
- В Performance запустите Record and reload, затем отдельную запись полного сценария: прокрутка, consent, формы, раскрытия, carousel.
- Откройте Layout shifts, выберите cluster с максимальным score и просмотрите каждый shift, affected nodes и potential culprit.
- Воспроизведите причину с отключённым кешем, медленной сетью и Layout Shift Regions; снимите moved from/to.
- Исправьте наиболее ранний общий источник, а не элемент, который только оказался сдвинут ниже.
- Повторите идентичные записи и соседние шаблоны, проверьте responsive layout, keyboard и zoom.
- После публикации отслеживайте field data: CrUX агрегируется со временем и не меняется сразу после релиза.
Решение по типу причины
| Причина | Исправление | Проверка |
|---|---|---|
| Изображение/video/iframe без места | width/height, aspect-ratio, стабильный контейнер | Место видно до запроса media |
| Ad/embed неизвестной высоты | Зарезервировать минимальный slot, адаптировать empty state | Нет collapse при отсутствии рекламы |
| Web font меняет метрики текста | Подобрать fallback и font metric overrides, проверить display | Строки не перепрыгивают после swap |
| Cookie/banner/message вставляется сверху | Overlay либо зарезервированная область с первого кадра | Контент не толкается поздней вставкой |
| Анимация меняет top/height | transform/opacity, если подходит | Нет неожиданных layout-shift events |
Техническое наблюдение
new PerformanceObserver(list => {
for (const entry of list.getEntries()) {
if (!entry.hadRecentInput) {
console.log(entry.value, entry.startTime, entry.sources);
}
}
}).observe({ type: 'layout-shift', buffered: true });Наблюдатель помогает воспроизвести сдвиги, но сам по себе не вычисляет полевой CLS пользователя и доступен не во всех браузерах одинаково. Основное доказательство — Performance trace с cluster и контекстом.
Не путайте ожидаемое движение с хорошим UX
Shift вскоре после ввода может не входить в CLS, но кнопка, которая уезжает, поздний accordion или резкий scroll всё равно могут мешать. Проверяйте задачу пользователя отдельно от score.
Откат и границы
При переполнении, обрезке или нарушении responsive layout верните прежний шаблон/CSS и очистите затронутый кеш. Не оставляйте огромный пустой slot только ради нулевого CLS. После исправления выполните независимую проверку.
Массовая разметка размеров изображений, оптимизация шрифтов, рекламная платформа, redesign и устранение других Core Web Vitals относятся к отдельным объёмам.
