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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Напротив, если вы выделяете объявление размером 970×250 и оно загружает баннер размером 970×90, вокруг него будет много белого пространства, из-за чего страница будет выглядеть плохо.

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

Динамически внедренный контент

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

Например, посты в X (ранее Twitter), загружающие содержимое статьи, могут иметь произвольную высоту в зависимости от длины содержимого поста, что приводит к смещению макета.

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

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

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

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

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

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

Веб-шрифты

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

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

и используя свойство font-display: swap; css на @font-face правило.

@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.

Расстояние Дробь

Второе измерение называется Distance Fraction (доля расстояния). Дробь расстояния — это количество пространства, на которое элемент страницы переместился из исходного положения в конечное.

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

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

0,75 х 0,25 = 0,1875

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

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

Понять кумулятивный сдвиг макета

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

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

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

Кредит главного изображения: BestForBest/Shutterstock