CLS, оно же Cumulative Layout Shift, оно же Совокупное Смещение Макета – показатель, который помогает оценить, насколько стабильно отображается контент на странице. Это самое «смещение» – это когда контент страницы неожиданно съезжает вниз уже после того, как был показан пользователю.
Представьте: вы читаете статью, и вдруг между абзацами появляется реклама, из-за чего текст резко прыгает вниз или в сторону. Так вот, CLS – именно про это.
Выглядит это примерно так:
Пользователь хочет нажать на картинку с горами и солнцем, но внезапно появляется рекламный блок. Он промахивается и вместо этого попадает по нему.
Почему важно следить за CLS
Сам по себе CLS является одним из Core Web Vitals – наиважнейших метрик для оценки качества сайта. С 2021 года, кстати, тот используется в том числе и при измерения рейтинга сайтов в Google.
Чем меньше его значение, тем выше будет сайт при отображении в поиске.
Какие программы помогают определять CLS
Что до инструментов для мониторинга, то есть варианты в духе Lighthouse. Программа проверяет производительность и доступность веб-страниц. Работает как расширение для браузера, так и как отдельная утилита, доступная через инструменты разработчика – Chrome DevTools.
Google Search Console
Консоль помогает проверять поисковые запросы, статусы индексации (те самые коды ошибок, когда выполняется переход на сайт – 404, 301 и прочие), а также оптимизировать видимость страниц. Вся информация в Google Search Console доступна в несколько кликов, она находится в графе с основными показателями.
Справедливости ради отметим, что тут нет таких подробностей, как, например, в том же Lighthouse, но общую картину происходящего получить все еще можно.
Яндекс.Метрика
Есть и Яндекс.Метрика. Там, в отчете «Время загрузки страниц», можно понять, как быстро содержимое страниц отображается на экранах пользователей, и возникают ли проблемы с загрузкой (и если возникают, то какие).
Наконец, можно попросить знакомого/товарища/друга попросить зайти на сайт и узнать из первых уст, что тому помешало во время загрузки.
Пару слово том, почему CLS вообще возникает
Часто это происходит из-за асинхронной загрузки данных или появления новых элементов поверх уже существующих. Например, если выше видимой области подгружается видео, изображение, какой-нибудь нестандартный шрифт или виджет, все, что находится ниже, может резко «прыгнуть» вниз или вверх.
Дело в том, что во время разработки сайт ведет себя иначе, чем на экране у реальных пользователей: при разработке тестовые изображения часто уже находятся в кэше браузера разработчика, а локальные вызовы API выполняются быстро, и задержки незаметны.
API – Application Programming Interface – инструмент, позволяющий программам взаимодействовать друг с другом по определенным правилам и обмениваться информацией.
Лечится это только заблаговременной проверкой того, как часто и насколько сильно макет страницы «дергается» у клиентов. Например, организовав бета-тест и собрав обратную связь.
