Сайт опять поехал: что нужно знать о метрике CLS

Cumulative Layout Shift — относительно новая метрика (на данный момент методика её измерения до сих пор находится в состоянии proposal), которая оценивает сдвиг (или появление) контента по мере взаимодействия со страницей.

Ещё в 2005 году появилась одна из технологий, задачей которых являлся обмен информацией между клиентом и сервером в фоне — AJAX. В результате её применения обновление данных в браузере происходило без перезагрузки веб-страницы целиком, что приводило к ускорению работы сайта (так как не требовалось загружать всё содержимое целиком).

Поддержка атрибутов async, defer, позволяющих загружать скрипты асинхронно (не в главном потоке) появилась ещё в 6–8 версиях браузера Chrome, которые выходили в 2009–2010 годах. Существуют и другие технологии и подходы к асинхронной загрузке данных, которые появились примерно в тот же период времени.

Несмотря на их очевидную пользу, в некоторых случаях у пользователей возникали проблемы сдвига содержимого сайта. Это обычно происходит из-за асинхронной или отложенной загрузки ресурсов: изображение, видео или рекламный блок при динамическом добавлении в DOM может оказаться больше или меньше его контейнера/заглушки плейсхолдера, или его размеры вовсе могут быть неизвестны (не заданы). Как следствие, страница «поедет» на недостающую ширину/высоту элемента.

Начните размещать официальную рекламу в Telegram Ads через click.ru

Зарегистрируйтесь и продавайте товары или услуги в Telegram Ads с помощью готового решения от click.ru. Опередите конкурентов!

Бюджет от 3 000 €. Это гораздо дешевле, чем работать напрямую.

Для юрлиц и физлиц. Юрлица могут получить закрывающие документы, возместить НДС. Физлица — запустить рекламу без общения с менеджерами.

3 способа оплаты. Оплачивайте рекламу картой физического лица, с расчётного счета организации, электронными деньгами.

Подробнее →

Описанное выше характерно не только для мобильных устройств, где наблюдаются проблемы с производительностью и со скоростью интернета в связи с техническими ограничениями (слабый процессор и беспроводное подключение). В случае десктоп-устройств рекламная технология RTB (или иные технологии продажи рекламных показов) может отдавать содержимое несколькими мгновениями позже, нежели чем загрузится сайт и пользователь начнёт с ним взаимодействовать. Этого может быть достаточно для возникновения сдвига.

В некоторых случаях пользователь может сталкиваться с несколькими последовательными сдвигами подряд. Пример ниже это демонстрирует.

Тройной сдвиг неспрессо

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

К сожалению, нет полностью автоматизированного способа оценки CLS (да и не многие занимаются оценкой данной метрики, в частности поддержка в Chrome Lighthouse появилась лишь в мае 2020 года), так как существующие средства анализа, например, webpagetest или chrome lighthouse, если и смотрят на эту метрику, то лишь в синтетическом окружении. А потому измерить сдвиги они могут лишь во время загрузки страницы, а в это время страница, скорее всего, будет недоступна для взаимодействия пользователя (не будет откликаться на его действия).

Тем не менее метрику можно рассчитать самостоятельно по следующей формуле: CLS = Impact * Distance, где Impact — вычисляемая как суммарный размер занимаемого пространства сдвигаемых элементов между двумя кадрами (до и после сдвига) в процентном соотношении от всего экрана (viewport), а Distance — наибольший сдвиг самого нестабильного элемента в процентном соотношении от измерения всего экрана (ширина или высота viewport-а).

Проще это объяснить на примере. Слева — кадр до сдвига, справа — после сдвига. Impact в данном случае будет равен отношению высоты сдвинутого содержимого к общей высоте: ~ 75%.

Distance в данном случае будет равен наибольшему сдвигу содержимого: ~ 30%.

Таким образом, CLS данного фрейма составляет 0,75 * 0,3 = 0,225, что, согласно метрикам Lighthouse, попадает в диапазон «требуются улучшения».

Вообще говоря, необязательно сидеть «с линейкой», чтобы узнать, присутствует ли проблема на вашем сайте. Достаточно с разных устройств глазами клиента пройтись по основным путям пользователя. Если вы заметили сдвиг контента — поздравляю, у вас есть, над чем поработать.

Исправить проблему (или уменьшить влияние) сдвига контента достаточно просто.

Медиаконтент должен включать атрибуты размеров. В крайнем случае резервируйте пространство любым другим образом. Placeholder-ы не только решают проблему сдвига, но и заранее показывают пользователю интерфейс сайта, с которым он будет взаимодействовать, то есть подготавливают его.
Не вставляйте контент над уже существующим — вставляйте под ним. Это не столько нивелирует проблему, сколько её минимизирует, так как контент, с которым ознакамливается пользователь, не сдвинется. Сдвигу подвергнется та часть, до которой пользователь ещё не добрался.
Если никак не обойтись без сдвига — анимируйте его средствами CSS, чтобы контент плавно отъехал, а не резко дёрнулся.

Существуют и другие подходы. Главное — найти время на реализацию улучшений.

Источник фото на тизере: KEVIN CLYDE BERBANO on Unsplash