CLS как индикатор качества дизайна: почему подвижные блоки убивают и UX, и GEO

CLS (Cumulative Layout Shift) – метрика, показывающая, насколько сильно составляющие вашей страницы на сайте «прыгают» во время загрузки.

Например: Вы прогрузили страницу и начали ее изучать, как неожиданно сверху появился какой-то баннер и все сдвинулось вниз. Изображение снизу подгрузилось позже и теперь все улетело наверх.

Сергеев Владимир
Основатель студии sergeev.studio по разработке и продвижению сайтов.
За плечами многолетний опыт, более 150 реализованных проектов от производства дверей до установки имплантов.
Опыт взаимодействия с рынками США, Испании, Эстонии, Индонезии, ну и конечно же всей России.

К чему это приводит

CLS очень важная визуальная метрика. Если прочие показатели LCP, FCP, TTFB – могут восприниматься не так остро глазом, то постоянно прыгающие элементы – раздражают и портят впечатление сильнее всего

Отказы

Если вы являетесь владельцем сайта конкурентной ниши, то спустя 1-2 секунды после возникновения CLS артефактов человек просто покинет его. Люди готовы ждать многое – скорость загрузки, медленное подгружающиеся картинки, но постоянные скачки и невозможность нормально пользоваться сайтом – это катастрофическая ошибка, увеличивающая показатель отказов на вашем сайте.

И вот здесь все начинает тянуть друг за друга: высокий CLS – рост числа отказов – ухудшение поведенческих факторов – снижение трафика – снижение количества лидов – вы меньше заработали.

Падение значения средней позиции в поиске

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

Высокий CLS может влиять на эффективность ваших страниц в Google Search Console и вам может быть выдана рекомендация к устранению проблем. Неэффективные урлы могут быть пессимизированы гуглом в выдаче. Это не означает, что ваш сайт полностью выпадет из поиска, просто это снизит вашу конкурентоспособность по сравнению с теми, у кого все в порядке. Но справедливости ради, таких у кого все в порядке около 30%, но и это не такое маленькое значение, чтобы не брать его во внимание.

Потенциальные проблемы с GEO

Вы скажите – да че там эти роботы, они не видят этих скачков. Но вот в чем нюанс – скачок он и визуальный и технический. Ваш глаз видит скачок, а в системе это отсутствие или появление того или иного куска кода, то есть элемента.

Ai роботы хуже извлекают и понимают структуру. Особенно когда меняются координаты блоков, пересчитывается DOM или часть блоков, секций начинает перестраиваться после JS.

Вот, что еще может отрабатывать со сложностями для ИИ роботов:

1. Элементы с отложенным рендером
2. Динамический контент
3. Popup элементы (если они изначально не указаны в DOM)
4. JS вставки

То есть, простыми словами, ИИ пытается извлечь контент с вашего сайта, но ему постоянно мешают сделать скачки в дизайне, элементы подгружаются какие-то раньше, какие-то позже – и он видит не вашу задуманную структуру, а набор несвязанных блоков.

Как починить CLS

Давайте постараемся разобраться как избежать высокого CLS или попробовать его починить.

1. Грамотная диагностика. Выберите страницу, на которой встречается подобная проблема. Задублируйте ее, чтобы не вести все работы на живом и рабочем проекте. Отключайте блоки и включайте их поочередно, замеряя CLS. Так вы найдете проблемный блок.
2. Переоптимизация. Этим грешат сайты на WordPress, наделают непонятно что, а потом к сломанной ноге прикладывают подорожник, пытаясь исправить все ошибки в создании и верстке сайта волшебным плагином по оптимизации. Они часто откладывают стили и JS, что в свою очередь приводит к частым проблемам с CLS .
3. Если вы используете lazyload для картинок – не оставляйте пустых мест, используйте плейсхолдеры, своего рода заранее подготовленное шаблонное изображение с предустановленными размерами.
4. Шрифты. Тоже частый виновник, используйте свойство font-display: swap;
5. Старайтесь избегать лишней анимации. Иногда она бывает действительно уместна, но чаще всего перебор с ощущением, что земля уходит из под ног.
6. Используйте сервис https://pagespeed.web.dev/ - при ошибках с CLS – он показывает элементы, которые вызывают вопросы.

В общем и целом, это основные моменты, на которые стоит обращать внимание, но не все. Очень сложно учесть каждый уникальный случай, но на практике – 80% проектов с плохим CLS сталкиваются с одним или сразу несколькими пунктами, описанными выше.