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

08 декабря 2020, 11:45

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

Одна из классических проблем UX — сдвиг контента по мере просмотра сайта. Как относительно новая метрика CLS помогает исправлять ситуацию, рассказывает команда iProspect Russia.

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

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

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

МегаФон ПроБизнес

Получите Кешбэк 100% за запуск рекламы с МегаФон Таргетом!

Узнать больше >>

Реклама. ПАО «МегаФон». ИНН 7812014560. ОГРН 1027809169585

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

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

Описанное выше характерно не только для мобильных устройств, где наблюдаются проблемы с производительностью и со скоростью интернета в связи с техническими ограничениями (слабый процессор и беспроводное подключение). В случае десктоп-устройств рекламная технология 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, попадает в диапазон «требуются улучшения».

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

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

  1. Медиаконтент должен включать атрибуты размеров. В крайнем случае резервируйте пространство любым другим образом. Placeholder-ы не только решают проблему сдвига, но и заранее показывают пользователю интерфейс сайта, с которым он будет взаимодействовать, то есть подготавливают его.

  2. Не вставляйте контент над уже существующим — вставляйте под ним. Это не столько нивелирует проблему, сколько её минимизирует, так как контент, с которым ознакамливается пользователь, не сдвинется. Сдвигу подвергнется та часть, до которой пользователь ещё не добрался.

  3. Если никак не обойтись без сдвига — анимируйте его средствами CSS, чтобы контент плавно отъехал, а не резко дёрнулся.

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

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

Мнение редакции может не совпадать с мнением автора. Ваши статьи присылайте нам на 42@cossa.ru. А наши требования к ним — вот тут.

Телеграм Коссы — здесь самый быстрый диджитал и самые честные обсуждения: @cossaru

📬 Письма Коссы — рассылка о маркетинге и бизнесе в интернете. Раз в неделю, без инфошума: cossa.pulse.is

✉️✨
Письма Коссы — лаконичная рассылка для тех, кто ценит своё время: cossa.pulse.is


Вход на cossa.ru

Уже есть аккаунт?
Авторизуйся через VK:
Vkontakte
Не забудьте написать email на странице своего профиля для управления рассылкой