Оптимизация CLS — как проработать видимую составляющую сайта

Ссылка на релевантное фотоСсылка на релевантное фото

Сдвиги макета страницы, к сожалению, являются довольно распространенной проблемой среди многих сайтов, из-за которой страдают в первую очередь пользователи. Если съезжает текст, который читает посетитель ресурса, то это просто раздражает. Однако если съезжает кнопки, например, принятия и отмены заказа в интернет-магазине, то это может привести к проблемам посерьезней.

С другой стороны, теперь это может навредить и SEO-оптимизации сайта из-за внедренных недавно метрик оценки пользовательского опыта — Core Web Vitals. Всего их три, и одна из них, а именно — Cumulative Layout Shift (CLS) и следит за сдвигами видимых элементов сайта.

Поэтому если ваш ресурс страдает этим недугом, его необходимо лечить. Если не для пользователей, то хотя бы для SEO-оптимизации.

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

Содержание страницы: "Оптимизация CLS: как проработать видимую составляющую сайта":

Почему содержимое страницы сдвигается?

Конечный результат разработки сайта и то, как его видит пользователь, могут отличаться, а содержимое страницы на устройстве разработчика и посетителя ресурса может вести себя по-разному.

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

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

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

Читайте интересные статьи: 

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

Оптимизация показателя LCP. Как ускорение загрузки картинок влияет на качество сайта 

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

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

Что такое CLS?

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

Следовательно, чем ниже CLS, тем лучше пользовательский опыт.

Идеальный показатель равен 0,1 или менее. К такому результату необходимо стремиться абсолютному большинству сайтов. Ресурсы с такой оценкой считаются поисковой системой качественными для пользователей.

Также хорошим результатом будет, если три четверти всех пользовательских сессий будут иметь такой показатель. При этом важно разделить метрику по устройствам: мобильным и десктопным версиям.

Сбором статистики по пользователям собирает сервис Chrome User Experience Report, а полученные данные отображаться в отдельном отчете по метрикам Core Web Vitals, куда помимо двух других и входит CLS. Проверить эти данные можно двумя основными способами:

  • Google Search Console. Можно воспользоваться встроенным инструментом Google для отслеживания статистики сайта. Нужная информация находится в «Отчете об основных интернет-показателях».
  • PageSpeed ​​Insights. Эти же метрики, включая CLS, можно отследить через инструмент Google для оценки скорости загрузки страницы. Здесь же можно получить еще много полезной информации о работоспособности сайта.

Читайте интересную статью: 

Оптимизация скорости загрузки сайта: инструкция по оптимизации скорости загрузки страниц 

Какие сдвиги макета не являются критичными?

На самом деле, далеко не всегда сдвиг макета страницы — это плохо для пользовательского опыта. В некоторых случаях это может происходить из-за действий посетителя.

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

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

Читайте интересные статьи: 

Основные критерии и оценка юзабилити для вашего сайта 

Чем отличается UI и UX: особенности интерфейсов 

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

Для этой же цели можно использовать анимированные элементы и переходы. Важно, чтобы сдвиг макета проходил плавно и пользователь мог за этим проследить.

Как улучшить показатель CLS?

Снизить количество внезапных изменений макета страницы можно при помощи простых рекомендаций, а именно:

  • Выделяйте пространство для подгружаемых элементов. Это можно сделать при помощи атрибутов размера, если речь идет о графическом контенте. Необходимо зарезервировать определенное пространство, на котором и будет располагаться подгружаемый элемент.
  • Не настаивайте один контент на другой. Исключением из этого правила можно считать только ответ на запрос пользователя. Во всех остальных случаях все элементы страницы должны располагаться отдельно друг от друга.
  • Используйте анимацию и плавные переходы. Как уже говорилось ранее, это поможет пользователю понять, что макет страницы меняется. Если это будет происходить слишком резок, это может сбить с толку.

Читайте интересную статью: 

9 тенденций веб-дизайна сайта, которые сильно подкупают аудиторию 

Эти несложные советы помогут вам избавиться от большинства нежелательных сдвигов и сделать пользовательский опыт значительно приятнее.

Подводим итоги

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

Кроме того, теперь для этого есть отдельная метрика, которая следит за этим фактором и оценивает на его основе качество самого сайта. Поэтому из-за сдвигов макета может испортиться SEO-оптимизация ресурса.

Чтобы этого избежать, необходимо изучить этот параметр и исправить все ошибки. Если показатель CLS в Google Search Console или PageSpeed ​​Insights равен 0,1, то переживать не стоит. Но если он выше, то необходимо подробнее изучить структуру страниц.

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