Совокупное изменение макета (CLS) — это метрика Google Core Web Vitals, которая измеряет событие взаимодействия с пользователем.

CLS стал фактором ранжирования в 2021 году. Поэтому важно понимать, что это такое и как его оптимизировать.

Что такое накопительный сдвиг макета?

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

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

Минимизация CLS важна, поскольку перемещение страниц может ухудшить взаимодействие с пользователем.

Плохая оценка CLS (ниже > 0,1) указывает на проблемы с кодированием, которые можно решить.

Что вызывает проблемы CLS?

Существует четыре причины, по которым происходит совокупный сдвиг макета:

• Картинки без размеров.
• Объявления, встраивания и iframe без размеров.
• Динамически вставляемый контент.
• Веб-шрифты вызывают FOIT/FOUT.
• CSS или JavaScript-анимация.

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

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

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

Браузеры не могут определить размеры изображения, пока не загрузят его. Поэтому при попадании вHTML-тег, браузер не может зарезервировать место для изображения. Пример видео ниже иллюстрирует это.

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

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

Реклама может вызвать CLS

Если вы загружаете объявления AdSense в контент или в таблицу лидеров над статьями без надлежащего форматирования и настроек, макет может измениться.

С этим немного сложно справиться, поскольку размеры объявлений могут различаться. Например, это может быть объявление размером 970х250 или 970х90. Если вы выделите пространство размером 970 x 90, может загрузиться объявление размером 970 x 250, что приведет к смещению.

С другой стороны, если вы назначите объявление размером 970 x 250 и оно загрузит баннер размером 970 x 90, вокруг него будет много пустого пространства, что ухудшит внешний вид страницы.

Это компромисс: либо вы загружаете объявления одного размера и получаете выгоду от большего количества ресурсов и более высоких цен за тысячу показов, либо вы загружаете объявления разных размеров в ущерб удобству пользователя или показателям CLS.

Динамически вставляемый контент

Это контент, который вставляется на веб-страницу.

Например, публикации на

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

Один из способов смягчить этот сдвиг — назначить CSS-свойство «Средняя минимальная высота» родительскому тегу div твита, поскольку невозможно узнать высоту поста твита до его загрузки, поэтому мы заранее освобождаем пространство, которое можем назначить.

Другой способ исправить это — применить правило CSS к родительскому тегу div, содержащему твит, для установки высоты.

#tweet-div {
max-height: 300px;
overflow: auto;
}

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

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

Веб-шрифты

Загруженные веб-шрифты могут вызвать так называемую «вспышку невидимого текста» (FOIT).

Один из способов предотвратить это — использовать предустановленные шрифты.

и с отображением шрифта: swap; CSS-свойство Правило @font-face-at.

@font-face {
   font-family: Inter;
   font-style: normal;
   font-weight: 200 900;
   font-display: swap;
   src: url(' format('woff2');
}

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

Однако эффект под названием «Мигание нестилизованного текста» (FOUT) все же может возникнуть, чего нельзя избежать при использовании несистемных шрифтов, поскольку веб-шрифтам требуется некоторое время для загрузки, а в это время отображаются системные шрифты.

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

Видимость FOUT зависит от скорости соединения пользователя при реализации рекомендуемого механизма загрузки шрифтов.

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

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

CSS или JavaScript-анимация

Например, анимация высоты HTML-элементов с помощью CSS или JS приведет к расширению элемента по вертикали и уменьшению содержимого при его сползании вниз, что приведет к сдвигу макета.

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

Пример CSS-анимации, вызывающей CLS

Так рассчитывается совокупный сдвиг макета

Это продукт двух показателей/событий, называемых «доля воздействия» и «доля расстояния».

CLS = ( Impact Fraction)×( Distance Fraction)

Ударная фракция

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

Окно просмотра — это то, что вы видите на экране мобильного телефона.

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

Пример, который использует Google, — это элемент, который занимает 50% области просмотра, а затем опускается еще на 25%.

Сумма всех 75% дает значение доли влияния, которое выражается в виде балла 0,75.

Расстояния

Второе измерение называется компонентом расстояния. Компонент расстояния — это расстояние, на которое элемент страницы переместился от исходной до конечной позиции.

В приведенном выше примере элемент страницы переместился на 25%.

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

0,75 х 0,25 = 0,1875

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

Вот пример видео, которое наглядно иллюстрирует, что такое факторы воздействия и расстояния:

Общие сведения о совокупном сдвиге макета

Понимание совокупного смещения макета важно, но вам не обязательно знать, как выполнять расчеты самостоятельно.

Однако важно понимать, что это означает и как это работает, поскольку оно стало частью фактора ранжирования Core Web Vitals.

Дополнительные ресурсы:

Фото предоставлено: BestForBest/Shutterstock