Показатель CLS зашкаливает? Мы расскажем, как исправить

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

Данная проблема актуальна как для пользователей, которые заходят на ваш ресурс со стационарных компьютеров, так и для тех, кто посещает странички с планшетов и смартфонов. 

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

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

Основные причины смещения контента

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

Как улучшить значение CLS для своего сайта?

Для начала следует провести тщательный анализ сайта. Затем отредактировать элементы, из-за которых и происходят сдвиги контента при загрузке или просмотре страницы. Кроме того:

• Рекомендуем четко прописывать ширину и высоту картинок на страницах сайта, в боковых панелях, рекомендованных блоках и т.д. задавайте фиксированные разрешения, прописывайте размеры вручную или используйте код для прописывания высоты и широты автоматически.
• Когда все размеры указаны, но проблема остается, измените тему. Ваша тема может содержать множество интерактивных элементов, которые созданы с помощью JavaScript
• Располагайте динамические блоки таким образом, чтобы они не смещали друг друга, сохраняйте порядок, используйте отступы
• Зарезервируйте заранее необходимое пространство с помощью CSS стилей, чтобы браузер смог выделить правильный объем места при загрузке изображения
• Не размещайте новый контент поверх старого
• Если на вашем сайте размещаются рекламные блоки, четко определите место под них, пропишите размер в соответствии с размером рекламного места и пропишите стиль
• Если вам нужно подгрузить внешние шрифты, делайте это с помощью атрибута rel="preload", который прописывается в теге <link>. Не забывайте устанавливать свойство font-display: swap; для инструкции в CSS стилях, а в конце урл-адреса шрифта пропишите параметр &display=swap
• Откажитесь от анимации свойств с пользу анимации преобразований, это позволит анимировать элементы без сдвига макета.

Учтите, любые внесенные изменения отобразятся в результатах примерно через 2 недели, так как на сбор и обработку информации роботам Гугл тоже нужно время. Но исправлять ошибки нужно обязательно, высокая скорость и корректность работы вашего сайта будет по достоинству оценена поисковыми машинами Google, что обязательно положительно скажется на ранжировании вашего сайта.