Как оптимизировать CLS и не сойти с ума Представьте себе, что вы...

Как оптимизировать CLS и не сойти с ума

Представьте себе, что вы – пользователь, который заходит на сайт что-то посмотреть. Вы заходите на страницу, начинаете что-то читать, но внезапно происходит сдвиг текста и вам нужно искать место, на котором произошла остановка. Или вы собираетесь нажать на кнопку «Посмотреть товар», но из-за сдвига контента случайно нажимаете кнопку «Купить» или «Подписаться».

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

Причины сдвига текста при загрузке страницы:

1. Загрузка рекламы. Вы читаете текст и в процессе скролла подгружается реклама, которая вклинивается в текст и сдвигает его.

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

3. Неправильное использование шрифтов. Например, не указано динамическое изменения шрифтов при загрузке страницы.

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

Что такое CLS

В 2020 году Google представил новую систему метрик – Core Web Vitals. Она измеряет три основных критерия: скорость загрузки страниц, интерактивность и визуальную стабильность со стороны пользователя сайта.

CLS (Cumulative Layout Shift) – это показатель который оценивает частоту и объем сдвига страничного макета. Он позволяет увидеть, как часто посетители страницы сталкиваются с непредвиденными сдвигами.

Измеряется по шкале от 0,0 до 1,0. 0,0 – ожидаемые сдвиги, которые считаются нормой. Чем больше случайных сдвигов, тем выше показатель и тем ниже будет ранг сайта в поисковой выдаче. Хорошим показателем считается значение до 0,1. Выше 0,25 – у страницы есть проблемы. Примеры инструментов для измерения CLS – PageSpeed Insights, Lighthouse.

Как снизить показатель CLS

1. Резервируйте место под изображения.

Включайте атрибуты размера в свои картинки и видео или каким-то другим способом резервируйте место так, чтобы браузер сам выбирал нужный объем изображения при загрузке страницы. Самый простой способ – используйте атрибуты ширины (width) и высоты (height). Если такой возможности нет, резервируйте объем с помощью CSS стилей.

2. Используйте инструменты анимации преобразований вместо анимации свойств, которые изменяют макет страницы.

Пользователь должен видеть плавность изменения макета. И для этого можно применять вместо HTML-атрибутов размера width и height атрибут CSS transform: scale(). Вместо HTML-атрибутов перемещения top, right, bottom или left - атрибут transform: translate(). Свойство transform позволяет плавно анимировать страничные элементы, не сдвигая макет.

3. Избегайте установки контента поверх того, что уже загрузилось на страницы.

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

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

Самые важные шрифты должны загружаться предварительно, сортируйте загружаемые шрифты и исключайте неиспользуемые. Для загрузки внешних шрифтов используйте атрибут rel="preload" для тега <link>.

5. Добавьте свойство font-display:optional – оно поможет избежать проблемы при переключении шрифтов.

————

Если вам знакомы другие методы оптимизации CLS, приглашаю обсудить их в комментариях.

@gelo_seo

Источник новости https://t.me/gelo_seo/46...