Сталкивались ли вы с тем, что, когда вы собираетесь нажать кнопку на веб-странице, весь контент внезапно сдвигается вниз, и вы нажимаете совершенно не связанную рекламу или ссылку? Этот раздражающий опыт — именно та основная проблема, которую призван решить CLS (Cumulative Layout Shift, совокупный сдвиг макета).
CLS — один из ключевых показателей пользовательского опыта веб-страниц, представленный Google в 2020 году, специально предназначенный для измерения визуальной стабильности страницы. Проще говоря, он количественно оценивает степень непреднамеренного смещения контента во время загрузки страницы. Чем ниже показатель, тем лучше — в идеале он должен быть ниже 0,1, а показатель выше 0,25 считается диапазоном плохого пользовательского опыта.
Основная причина смещения макета страницы заключается в асинхронности загрузки контента и неопределенности размеров ресурсов. Когда браузер начинает отрисовку страницы, если размеры некоторых элементов (например, изображений, рекламы, встроенных видео) не определены заранее, браузер сначала отрисовывает их с размерами по умолчанию или нулевой высотой, а затем пересчитывает макет после полной загрузки ресурсов — этот процесс "пересчета" приводит к внезапному смещению уже отображенного контента.
Наиболее типичные сценарии включают:
Эти, казалось бы, незначительные сдвиги, накапливаясь, могут серьезно нарушить последовательность просмотра пользователем, особенно заметно на мобильных устройствах.
Формула расчета CLS: оценка воздействия × оценка расстояния.
Оценка воздействия — это доля видимой области, занимаемая смещенным элементом между двумя кадрами отрисовки. Например, если элемент изначально занимал 50% области экрана, а после смещения занял 25% новой области, то общая занимаемая площадь составит 75%, а оценка воздействия — 0,75.
Оценка расстояния — это отношение максимального расстояния смещения элемента к высоте области просмотра. Если элемент сместился вниз на 200 пикселей на экране высотой 800 пикселей, оценка расстояния составит 0,25.
Перемножив эти два значения, мы получаем оценку однократного смещения, а CLS — это сумма всех оценок непреднамеренных сдвигов макета за весь жизненный цикл страницы. Здесь ключевое слово "непреднамеренный" — сдвиги макета, вызванные действиями пользователя (например, разворачиванием контента по нажатию кнопки), не учитываются в CLS, наказываются только те смещения, которые происходят без какого-либо предупреждения пользователя.
Если ваш сайт относится к следующим типам, CLS должен стать приоритетной областью оптимизации:
Интернет-магазины и платформы для транзакций: Когда пользователи просматривают товары или вводят платежную информацию, внезапные скачки на странице могут привести к ошибочным действиям, таким как выбор неправильного товара или ввод неверной суммы, что напрямую влияет на конверсию и доверие.
Новости и медиа-контент: Читатель погружен в статью, и внезапно вставленная реклама отодвигает параграф, прерывая впечатление от чтения, что приводит к значительному увеличению показателя отказов.
Приложения с приоритетом мобильных устройств: На маленьких экранах телефонов любое смещение макета усиливается, особенно при медленном интернете, где задержки загрузки ресурсов легче вызывают значительные скачки.
Сайты, зависящие от SEO-трафика: CLS является одной из трех основных составляющих Google Core Web Vitals и напрямую влияет на поисковое ранжирование. Если CLS у ваших конкурентов лучше, ваш органический трафик может быть перенаправлен.
Представьте себе сайт онлайн-заказа еды: пользователь открывает страницу меню, видит изображение и цену блюда, собираясь нажать кнопку "Добавить в корзину". В тот момент, когда палец почти касается экрана, в верхней части страницы загружается рекламный баннер с акцией, и весь контент смещается вниз на 150 пикселей — в итоге пользователь нажимает кнопку следующего блюда, и ему приходится возвращаться и переделывать. Такой опыт не только раздражает, но и может привести к отказу от заказа.
Другой пример — технический блог: читатель просматривает пример кода, и вдруг шрифт на странице сверху меняется с системного на пользовательский, изменение высоты строки приводит к смещению блока кода вниз, и читателю приходится заново искать место, где он остановился. Если подобные помехи накапливаются несколько раз, пользователь, скорее всего, просто закроет страницу.
Суть решения проблемы CLS заключается в предварительном резервировании места для контента, чтобы избежать перестройки макета после загрузки ресурсов.
Установите явные атрибуты ширины и высоты для изображений и видео: Даже при использовании адаптивного дизайна, можно использовать CSS-свойство aspect-ratio или HTML-атрибуты width и height, чтобы браузер заранее рассчитал место для занимаемого пространства.
Зарезервируйте фиксированные контейнеры для рекламных мест и встроенного контента: Не ждите, пока загрузится рекламный скрипт, чтобы выделить место, а заранее обозначьте область пустым заполнителем или каркасом.
Оптимизируйте стратегию загрузки шрифтов: При использовании font-display: swap обращайте внимание на разницу в размерах между резервным шрифтом и целевым шрифтом, или используйте свойство size-adjust для максимально точного соответствия размеров резервного шрифта метрикам конечного шрифта.
Избегайте динамического вставления элементов поверх уже отрисованного контента: Если вставка необходима (например, уведомление-баннер), используйте плавные анимационные переходы или позволяйте новому контенту перекрывать, а не вытеснять существующий.
Откладывайте загрузку второстепенных ресурсов: Используйте ленивую загрузку для изображений и рекламы за пределами первой области экрана, чтобы уменьшить неопределенность при первоначальной отрисовке.
Значение CLS выходит далеко за рамки прохождения проверок Google или улучшения поискового ранжирования. Он действительно отражает степень вашего уважения ко времени и вниманию пользователя. Когда пользователям не нужно постоянно корректировать взгляд, переориентироваться на контент или беспокоиться о случайном нажатии на рекламу, они охотнее остаются на вашем сайте, доверяют ему и совершают целевые действия.
С коммерческой точки зрения, снижение CLS может напрямую улучшить ключевые показатели: коэффициент добавления в корзину на сайтах электронной коммерции, время пребывания на контентных сайтах, процент завершения заполнения форм. С точки зрения технической эволюции, появление CLS побудило всю отрасль к переосмыслению баланса между производительностью и удобством использования — быстрая загрузка контента, безусловно, важна, но если процесс загрузки нарушает поток внимания пользователя, преимущество в скорости может обернуться обузой.
CLS — это не показатель, к которому нужно стремиться к абсолютному нулю, а направление для постоянной оптимизации. Используя инструменты (такие как Chrome DevTools, Lighthouse, PageSpeed Insights) для мониторинга фактических данных и сочетая их с отзывами реальных пользователей, вы можете постепенно найти оптимальный баланс между производительностью, функциональностью и удобством использования.