Показатель качества сайта CLS - что это такое и какие значения он должен иметь, как убрать дерганье контента сайта

18.06.21 ИТ / SEO 2545

Некоторое время назад сайты стали оцениваться поисковыми системами по всевозможным критериям и показателям качества. Один из таких показателей – CLS (Cumulative Layout Shift – Совокупный сдвиг макета).

Что такое CLS в Web? Это показатель, который обозначает насколько контент смещается на странице сайта после загрузки, что делает пользование сайтом неудобным и может вызывать ошибки и раздражать посетителя.

Показатель называется CLS (может иметь другие названия в других сервисах оценки качества сайтов, но смысл тот же) и входит в пакет инструментов Google для измерения качества сайтов – Core Web Vitals, который помимо CLS содержит еще и другие показатели, такие как LCP (Largest Contentful Paint – скорость загрузки основного контента), FID (First Input Delay – время ожидания до начала взаимодействия со страницей сайта) и т.д. Но в этой статье речь пойдет о CLS.

Идеальное значение CLS – 0, что означает что весь контент сайта строго зафиксирован и не происходит дергания содержимого страницы. Но на практике, сайты имеют показатели, отличающиеся от 0, допустимым являются значения вплоть до 0.25. Точнее:

– 0 является идеальным значением;

– значения до 0.1 являются хорошим показателем;

– значения от 0.1 до 0.25 уже требуют пересмотра схемы построения контента на странице;

– значения выше 0.25 являются плохими показателями, что может повлечь предупреждения со стороны поисковых систем.

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

Поэтому поисковые системы при ранжировании учитывают и такой критерий, как стабильность контента на странице, то есть CLS. Если с этим показателем есть проблемы – об этом будет сообщено в панели управления, например, в Google Search Console или в Яндекс Вебмастер. Конечно если владелец сайта использует такие инструменты.

Как убрать дерганье страницы сайта, то есть, как добиться хорошего показателя CLS? Для это достаточно следовать нескольким базовым правилам:

– при разработке важно правильно сделать верстку сайта;

– размещать блоки сайта в нужные теги с заданными размерами, использовать подходящие по семантическому смыслу теги;

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

– все элементы, включая текстовые надписи, должны строго занимать свое место и иметь фиксированный размер шрифта;

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

– стараться избегать внедрения стороннего содержимого с неопределенными размерами, особенно в те места страницы, которые повлияют на фокус посетителя и заставят его отвлекаться.

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