Понимание и оптимизация совокупного смещения макета (CLS)

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

Термин «кумулятивное изменение макета» (CLS) относится к фактору пользовательского опыта, оцениваемому Google, который основан на конкретных событиях, происходящих на веб-странице.

В 2021 году межъязыковая семантика (CLS) была введена в качестве важного элемента ранжирования. Поэтому понимание его сути и изучение способов его улучшения имеют решающее значение для целей оптимизации.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Как эксперт по SEO, я хотел бы рассказать о тонкой проблеме, с которой мы часто сталкиваемся: адаптивность к различным размерам объявлений. Например, размер объявления может быть 970×250 или 970×90 пикселей, и неправильный расчет пространства может привести к проблемам. Выделение 970 x 90 может привести к загрузке объявления размером 970 x 250, что приведет к деструктивному сдвигу. Поэтому крайне важно убедиться, что ваш макет поддерживает оба размера, чтобы обеспечить оптимальное взаимодействие с пользователем.

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

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

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

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

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

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

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

Альтернативное решение — отрегулировать высоту родительского элемента div, заключающего твит, путем применения правила стиля CSS.

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

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

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

Веб-шрифты

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

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

и используя font-display: swap; css в @font-face at-rule.

@font-face {
   font-family: Inter;
   font-style: normal;
   font-weight: 200 900;
  шрифт-дисплей: поменять местами;
   src: url('https://www.example.com/fonts/inter.woff2') format('woff2');
}

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

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

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

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

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

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

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

При настройке высоты компонентов HTML с помощью CSS или JavaScript, например при расширении элемента по вертикальной оси при сжатии содержимого, это может привести к изменению макета страницы, известному как корректировка вертикального макета.

Как человек, который на протяжении многих лет потратил бесчисленное количество часов на работу с CSS-анимацией, я могу с уверенностью сказать, что использование преобразований для выделения места для анимированных элементов меняет правила игры. Я усвоил этот трюк на собственном горьком опыте, столкнувшись с нежелательными сдвигами макета во время анимации. Правильно спланировав пространство трансформируемого элемента, вы можете обеспечить плавную анимацию без сбоев. Разница между CSS-анимациями, вызывающими сдвиг влево (без трансформации), и теми, которые используют трансформации, дневная и дневная — это как разница между неуклюжей поездкой на машине и плавной; оба могут привести вас к месту назначения, но один из них гораздо приятнее. Не делайте той же ошибки, что и я; используйте CSS-преобразования с умом!

Как рассчитывается совокупное смещение макета

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

CLS = ( Impact Fraction)×( Distance Fraction)

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

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

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

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

Проще говоря, пример Google включает в себя раздел, занимающий половину (50%) видимой области экрана (окно просмотра), за которым следует дальнейшее уменьшение, где он перемещается вниз еще на четверть (25%).

Термин «доля воздействия» относится к общей сумме, умноженной на 1, и обычно она представляется в виде десятичной дроби или дроби, например 0,75 в данном случае.

Расстояние Фракция

Термин для второй меры — «Коэффициент расстояния». Это соотношение показывает, насколько элемент на странице сместился от исходного положения к конечному.

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

Теперь совокупный балл компоновки определяется путем умножения коэффициента влияния на коэффициент расстояния.

0,75 x 0,25 = 0,1875

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

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

Понимание совокупного смещения макета

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

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

Смотрите также

2024-08-12 02:09