Cumulative Layout Shift (CLS) что такое и как улучшить показатели

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

Cumulative Layout Shift (CLS) и причины повышения этого параметра

Представьте, что вы находитесь на главной странице сайта, читая текст или просматривая новостную ленту. Внезапно без вашего участия формат текста меняется и вы теряете место, на котором были, а вернуться туда просто так не получается, поэтому приходится заново пролистывать уже просмотренный блок информации, возвращаясь к нужному фрагменту. Или, что ещё хуже, вы пытаетесь нажать на кнопку скачивания файла, но курсор мышки автоматически скатывается на расположенную ниже кнопку "Отменить" и вы в итоге нажимаете на неё. Согласитесь, что, как минимум, это очень раздражает, а как максимум может привести к потере пользователей, которые точно не будут пользоваться неудобным источником контента, где придётся прикладывать усилия, чтобы что-то скачать или просто прочитать. Тем более, что в условиях жёсткой конкуренции в наше время, найти что-то похожее, но нормально работающее, труда в общем не составит.

Основные причины подобных сдвигов на сайте:

чаще всего причиной является загрузка элементов сайта, происходящая по асинхронному типу. Если при планировании структуры сайта не предусмотрена синхронизация загружаемых блоков контента (то есть, к примеру, расположенное над текстовым блоком видео начинает грузиться независимо от самого сайта), то при его загрузке с возможным переходом в полноэкранный режим текст может сдвинуться вниз, уйдя из области просмотра;
отсутствие предусмотренной возможности "ленивой" загрузки картинок и визуальных блоков сайта. Если говорить простым языком, то работает это так: образ сайта, который загружается быстрее тяжёлого визуального контента, уже предусматривает наличие встроенных ограничителей в тексте по форме загружаемого чуть позже контента.

Решение подобных проблем состоит в исследовании реального сдвига контента, который может произойти у обычного пользователя при стандартных условиях использования сайта. Сдвиг общего макета обычно случается каждый раз тогда, когда видимый пользователем в зоне просмотра визуальный элемент меняет своё местоположение от одного кадра к другому.

Стабильность работы сайта в его визуальном аспекте как раз и измеряется с помощью специального показателя Cumulative Layout Shift, который расшифровывается, как "совокупный сдвиг макета". Важность показателя можно понять по тому, что он, наряду с ещё двумя важными параметрами работы сайта, входит в тройку оцениваемых моментов в единой метрике оценки опыта пользователя при работе с сайтом Core Web Vitals. Метрика CLS позволяет учесть все неожиданные сдвиги такого формата, которые могут произойти при взаимодействии рядового пользователя с вашим сайтом. Он в совокупности учитывает все оценки сдвига любого элемента макета сайта для любой неожиданной ситуации, которая может возникнуть у пользователя в процессе использования сайта. Чем ниже этот показатель, тем лучше для пользовательского опыта. В идеальном мире показатель не должен превышать 0,1, а адекватным показателем станет ситуация, при которой не менее 3/4 от всех проходящих сессий использования сайта не превысят этого значения. Причём расчёт производится отдельно на десктопной и мобильной версиях сайта.

Как измеряется показатель

Инструменты UER, используемые Google, собирают данные по основным пользовательским метрикам загрузки сайта и работы с ним. Используются при этом данные оценки 2 инструментов: PageSpeed Insights и Search Console от CWS.

Кстати, не все виды сдвига макетов являются негативными факторами

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

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

Есть несколько способов отображения новых для пользователя элементов так, чтобы его не запутать. Дело в том, что любой контент, который на экране появится внезапно, может ввести пользователя сайта или приложения в заблуждение или заставить его совершить ненужные для владельца сайта действия. Плавные или анимированные переходы станут выходом в ситуации, когда вам нужно замаскировать запланированные сдвиги текста или визуальных блоков сайта. Свойства разработки сайта на CSS позволяют использовать анимацию, не ведущую при этом к сдвигам макета:

используйте механику transform: scale() вместо привычных блоков width и height;
также применяйте свойство transform: translate(), чтобы не задействовать стандартные варианты аспектов работы страницы. Это свойство позволит заранее выделить место возможного сдвига макета и минимизирует его риски.

Что можно предпринять для значительного улучшения оценки показателя Cumulative Layout Shift

Есть несколько простых лайфхаков, которые позволят минимизировать риск сдвигов макета при работе пользователя с сайтом или вообще исключить вероятность подобных происшествий:

В любое используемое на сайте изображение и визуал обязательно вставляйте при вёрстке атрибуты размерности. Вторым вариантом резервирования достаточного места для их корректного отображения является использование такого инструмента CSS, как соотношение полей и сторон рисунка или визуального блока. Так при загрузке сайта любой используемый им браузер сможет автоматически выделить достаточное количество места для нормального отображения потенциально опасного для возможного сдвига блока информации или визуала.

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

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

Обращайтесь к нам! Обеспечим написание кода или исправление уже существующего по факту, чтобы минимизировать риски сдвига макета и сделать показатель Cumulative Layout Shift (CLS) минимальным.