CLS — базовая метрика Web Vitals, измеряющая нестабильность контента путем суммирования оценок сдвига по сдвигам макета, которые не происходят в течение 500 мс, после того, как пользователь зашел на сайт. Он показывает, насколько видимый контент сместился в окне просмотра, а также расстояние, на которое сместились элементы.
Ниже представлена шкала CLS, что есть хорошо, а что есть плохо:
Причины плохого показателя по CLS
Давайте рассмотрим наиболее распространенные причины плохого показателя по CLS:
- Реклама, встраивание и фреймы без размеров
- Веб-шрифты, вызывающие FOIT / FOUT
- Изображения без размеров
- Динамический внедренный контент
Изображения без размеров
Особое внимание хотелось бы уделить изображениям без размеров:В этом случае всегда необходимо применять атрибуты размеров width и height на изображения и элементы видео. В качестве альтернативы, зарезервируйте необходимое место с полями соотношения сторон CSS . Такой подход гарантирует, что браузер может выделять правильный объем пространства в документе во время загрузки изображения.
Если задуматся об адаптивных изображениях, необходимо рассмотреть атрибут — «srcset» который определяет изображения , которые позволяют браузеру выбрать какой размер выбрать изображение под какой размер экрана. Чтобы обеспечить <img>возможность задания атрибутов ширины и высоты, каждое изображение должно использовать одинаковое соотношение сторон.
Динамический контент
Избегайте вставки нового содержимого поверх существующего, если только это не является желанием или действием пользователя. Это обеспечивает ожидаемые сдвиги слоёв страниц. К примеру, возможно, вы сталкивались с таким как подобно рекламе, это часто случается с баннерами и формами, которые сдвигают содержимое страницы.
Веб-шрифты, вызывающие FOIT / FOUT
Загрузка и рендеринг веб-шрифтов могут вызвать сдвиг слоёв страницы двумя способами:
- Когда резервный шрифт заменяется новым шрифтом (FOIT — флеш из неустановленного текста)
- «Невидимый» текст отображается до отображения нового шрифта (FOUT — вспышка невидимого текста)
Инструменты измерения CLS:
Хочу поделиться инструментами, которые помогут измерять CLS:
Маяк 6.0 и выше включает поддержку для измерения CLS в лабораторных условиях. В этом выпуске также будут выделены узлы, которые вызывают наибольшее смещение слоёв страницы.
Панель « Производительность» в DevTools в браузере Chrome версии 84, определяет сдвиги слоёв страницы в разделе «Опыт». Представление «Сводка» для Layout Shift записи? включает в себя совокупный показатель сдвига слоёв страницы, а также наложение прямоугольника, показывающее затронутые области.
На этом закончим данную статью. Надеюсь, что эта информация будет вам полезна и поможет сделать ваши страницы сайта более стабильными 🙂