Проблема с CLS: значение показателя выше порогового – что за ошибка, как исправить
05.06.2020
Доброго времени суток.
Если вы открыли данный материал, то наверняка столкнулись с ошибкой, что отображается в Google Search Console. И это, естественно, может негативно отразиться в итоге на ранжировании сайта в поисковой системе Google. И если вы не хотите подобного развития событий, то появившуюся ошибку нельзя оставлять без внимания.
Давайте посмотрим, что это за ошибка и как с ней справиться.
Сводный показатель CLS – что это и как решить проблему с ним
Данная ошибка может относиться как к заходящим на ваш сайт с компьютеров, так и с мобильных устройств. В некоторых случаях указанная ошибка распространяется на оба типа устройств.
Google весьма витиевато указывает название данной ошибки CLS, а именно «совокупное смещение макета». Но для понимания природы данного показателя стоит описать типовую ситуацию.
Зайдя на сайт и начав ознакомление с находящимся там текстом или видео, в какой-то момент может произойти смещение содержания. И если в этот момент вы осуществляли нажатие по какому-либо элементу, то в итоге вы либо не попадёте в него, либо нажмёте не то. Вот за эти явления и отвечает рассматриваемый показатель.
Почему так может происходить? Причин несколько:
- Картинки, что представлены на сайте, не имеют прописанных параметров ширины и высоты.
- Дизайн сайта имеет интерактивные элементы, которые подгружаются и показываются при определённых событиях, к примеру полной загрузке страницы, наведении курсора мышки и т.д.
- Вставки блоков со сторонних ресурсов. Среди таких блоков могут быть iframe, рекламные и т.д.
- И некоторые другие специфические причины.
Что можно сделать в данной ситуации, дабы исправить высвечивающуюся ошибку со сводным показателем CLS?
Как вы понимаете, простыми действиями здесь не обойтись, необходимо обратиться к специалисту, который проанализирует ваш сайт и отредактирует все те элементы, что вызывают сдвиги при загрузке и просмотре станиц вашего сайта. Оных можно поискать на биржах фриланса. Т.к. на данных площадках высокая конкуренция среди специалистов, ищущих предложения по работе, то в итоге можно найти достойного и при этом не разориться при оплате за его услуги.
Из простых советов можно порекомендовать следующее:
- Прописать у выводимых картинок на сайте ширину и высоту. Если статей много, то можно воспользоваться кодом, что приведён в материале «Автоматическое прописывание высоты и ширины (width и height) всем картинкам в статьях WordPress». И если у вас на сайте имеются боковые панели, блоки «читайте также» и т.п., где тоже выводятся изображения, то проверьте наличие и у них прописанных высоты и ширины. Если таковых нет, то задайте их, отредактировав используемую тему. К примеру, вы можете задать фиксированное разрешение, которое будет наиболее оптимально для подавляющего большинства выводимых изображений, а для «вписывания» не особо подходящих по высоте и ширине можете указать CSS свойство object-fit: cover; Тут вариантов много, это был лишь один из множества.
- Если у всех выводимых на сайте изображений размеры прописаны, а проблема сохраняется, то попробуйте поменять тему. Возможно, что та, которую вы используйте сейчас, имеет слишком много различных интерактивных элементов, реализованных посредством JavaScript и т.д.
И помните, что, внеся изменения, необходимо будет подождать пару недель, дабы увидеть изменения в Google Search Console. Это связанно с тем, что информация о работе сайта собирается метрикой из браузеров пользователей, что занимает некоторое время.
В итоге, решив проблему, поисковая система Google оценит высокую скорость и корректность работы вашего сайта, как оценят оную и ваши посетители. Ведь в конечном итоге всё это делается ради них.
Как отблагодарить автора, помочь сайту WPuse.ru