CLS — cдвиг слоёв страницы, причины и оптимизация

CLS - cдвиг слоёв страницы, причины и оптимизация

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

Ниже представлена шкала CLS, что есть хорошо, а что есть плохо:

Причины плохого показателя по CLS

Давайте рассмотрим наиболее распространенные причины плохого показателя по CLS:

  • Реклама, встраивание и фреймы без размеров
  • Веб-шрифты, вызывающие FOIT / FOUT
  • Изображения без размеров
  • Динамический внедренный контент

Изображения без размеров

Особое внимание хотелось бы уделить изображениям без размеров:В этом случае всегда необходимо применять атрибуты размеров width и height на изображения и элементы видео. В качестве альтернативы, зарезервируйте необходимое место с полями соотношения сторон CSS . Такой подход гарантирует, что браузер может выделять правильный объем пространства в документе во время загрузки изображения.

Если задуматся об адаптивных изображениях, необходимо рассмотреть атрибут — «srcset»  который определяет изображения , которые позволяют браузеру выбрать какой размер выбрать изображение под какой размер экрана. Чтобы обеспечить <img>возможность задания атрибутов ширины и высоты, каждое изображение должно использовать одинаковое соотношение сторон.

Динамический контент

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

Веб-шрифты, вызывающие FOIT / FOUT

Загрузка и рендеринг веб-шрифтов могут вызвать сдвиг слоёв страницы двумя способами:

  • Когда резервный шрифт заменяется новым шрифтом (FOIT — флеш из неустановленного текста)
  • «Невидимый» текст отображается до отображения нового шрифта (FOUT — вспышка невидимого текста)

Инструменты измерения CLS:

Хочу поделиться инструментами, которые помогут измерять CLS:

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

Инструменты измерения CLS

Панель « Производительность» в DevTools в браузере Chrome версии 84, определяет сдвиги слоёв страницы в разделе «Опыт». Представление «Сводка» для Layout Shift записи? включает в себя совокупный показатель сдвига слоёв страницы, а также наложение прямоугольника, показывающее затронутые области.

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

Подписаться
Уведомить о
guest
0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии