Сдвиг накопительного макета (CLS)

Показатель Cumulative Layout Shift (CUY) измеряет визуальную нестабильность, количественно определяя, насколько неожиданно смещается видимый контент в течение всего времени существования страницы. Это один из основных показателей веб-стабильности Google, и, в отличие от показателей загрузки и адаптивности, это безразмерный показатель, а не продолжительность, рассчитываемый на основе доли области просмотра, затронутой смещением, и расстояния, на которое перемещается контент. Опубликованный Google пороговый показатель 0.1 или меньше считается хорошим результатом, соответствующим 75-му процентилю реального пользовательского опыта.

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

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

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

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

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

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