Cumulative layout shift что это
Автор ApiX-Drive
Время прочтения: ~3 мин
CLS (англ. Cumulative Layout Shift – совокупный сдвиг макета) – оценка, позволяющая измерить, насколько контент переместился на экране после его визуализации.
Грубо говоря, этим термином описывается ситуация, когда читаемый на экране текст сдвигается из-за того, что подгрузились другие элементы страницы. Поскольку при этом пользователь может потерять место, где он читал, подобная ситуация не вызывает ничего, кроме раздражения. Нередки также ситуации, когда нажимается не та кнопка, поскольку в момент нажатия произошло смещение элементов страницы.
CLS (совокупное смещение макета) указывается в процентах, показывающих смещённую область просмотра. Соответственно, чем выше показатель, тем хуже. Ведь даже небольшие смещения могут вызывать раздражение у пользователя.
Основными причинами возникновения такого эффекта могут быть «тяжёлые» изображения и динамическая реклама. В первые годы развития интернета, когда размеры экранов у компьютеров были более или менее одинаковыми, хорошей практикой считалось указывать атрибуты высоты и ширины для тегов изображений. В результате браузер резервировал место для изображения, которое могло загружаться несколько минут (скорости в годы dial-up были совсем невысокими) и текст не двигался.
Сегодня же, когда в мире существует огромное количество самых разнообразных экранов, сайты уже не могут быть статическими, нормой стал адаптивный дизайн. Проблема заключается в том, что браузер должен начать загрузку изображения, чтобы определить его размеры и выделить для него правильное место на странице. Текст загружается первым, но часто перескакивает по мере того, как страница перекомпоновывается, «подгоняясь» под изображения.
Оптимизация Cumulative Layout Shift (CLS)
Эдди Османи написал пост про решение проблем сдвига контента — «Optimize Cumulative Layout Shift».
Cumulative Layout Shift (CLS) — это метрика Web Vitals, которая измеряет нестабильность контента, складывая смещение всех элементов, которое происходит независимо от действий пользователя. То есть если на странице происходит сдвиг после пользовательского ввода, например, пользователь открыл список-аккордеон после загрузки страницы, то такое смещение не будет влиять на CLS.
Самые распространённые причины нежелательных смещений:
- изображения без заданных размеров (можно исправить добавлением атрибутов width и height );
- реклама, iframe, встраиваемый контент (можно исправить, предварительно выделив необходимое место);
- динамически добавляемые блоки — GDPR-сообщения, похожие товары и т.п. (вместо них можно использовать временные заглушки);
- web-шрифты, вызывающие FOIT/FOUT (такое смещение можно устранить с помощью font-display: optional и ).
В свете последних новостей о том, что Google будет использовать показатели Web Vitals для ранжирования сайтов, очень советую почитать статью.
Почему у вас проблемы от высокого CLS и как их исправить
CLS — одна из метрик оценки технической оптимизации сайта. Рассказываем, как устранить проблемы с CLS и соответствовать требованиям Google.
Проблемы с CLS могут повлечь за собой просадку сайта в поисковой выдаче Google. Почему? Дело в том, что Cumulative Layout Shift или совокупный сдвиг вёрстки — одна из ключевых метрик оценки технической оптимизации сайтов в Google.
Суть в том, что любые элементы на странице не должны произвольно менять своё положение в процессе загрузки. Это выглядит не очень красиво и посетитель может промахнуться по кнопке, как на видео ниже.
Чем больше суммарная площадь таких «прыгающих» элементов и чем дальше они «прыгают», тем хуже будет метрика CLS. В идеале она должна быть равна нулю.
В сентябре 2020 года наша команда разработки окончательно победила Cumulative Layout Shift — контент больше не смещается при загрузке. Некоторые проблемы с CLS всё ещё остались, но 75-й перцентиль за 7 дней нулевой:
По таблице видно, что у нас завышена задержка первого ввода (First Input Delay) на мобильных и опасный тренд по времени отрисовки контента (Largest Contentful Paint) — над этим мы поработаем. Google, однако, считает, что проблем нет уже сейчас:
Поделюсь ключевыми приёмами по работе над избавлением от сдвигов контента. В нашем случае 90% проблем решилось довольно просто и свелось к трём правилам.
Приём для решения проблем с CLS #1
Если размеры элемента известны заранее, то их надо прописать явно. Например, блок счётчика комментариев, закладок и лайков у нас подгружается динамически, но высота иконок известна заранее и её можно прямо задать в CSS.
Приём для решения проблем с CLS #2
Если вы загружаете контент после «скелета» страницы, то вставляйте на место контента плейсхолдер с высотой 100vh, который будет удерживать подвал вне экрана. Когда контент подтянется, удалите плейсхолдер. Пример: страница вакансий.
Приём для решения проблем с CLS #3
Отображайте динамически подгружаемые блоки в том порядке, в котором они не смещают другие блоки. Либо дождитесь загрузки всех блоков и покажите их одновременно. Пример: у нас на главной в правом сайдбаре на десктопе.
Для диагностики удобно использовать DevTools в Google Chrome. Установите эмуляцию медленного Интернет-соединения и поставьте галку Layout Shift Regions на вкладке Rendereing. Либо используйте отладчик Performance, недавно он научился выделять области со сдвигами контента.
Cumulative Layout Shift (CLS) что такое и как улучшить показатели
Расскажем в нашем сегодняшнем обзоре о том, что собой представляет этот важный параметр оценки производительности и скорости загрузки сайта, а также о том, как сделать его минимальным, чтобы сайт не терял посетителей и ваш бизнес не страдал от этого.
Cumulative Layout Shift (CLS) и причины повышения этого параметра
Представьте, что вы находитесь на главной странице сайта, читая текст или просматривая новостную ленту. Внезапно без вашего участия формат текста меняется и вы теряете место, на котором были, а вернуться туда просто так не получается, поэтому приходится заново пролистывать уже просмотренный блок информации, возвращаясь к нужному фрагменту. Или, что ещё хуже, вы пытаетесь нажать на кнопку скачивания файла, но курсор мышки автоматически скатывается на расположенную ниже кнопку «Отменить» и вы в итоге нажимаете на неё. Согласитесь, что, как минимум, это очень раздражает, а как максимум может привести к потере пользователей, которые точно не будут пользоваться неудобным источником контента, где придётся прикладывать усилия, чтобы что-то скачать или просто прочитать. Тем более, что в условиях жёсткой конкуренции в наше время, найти что-то похожее, но нормально работающее, труда в общем не составит.
Основные причины подобных сдвигов на сайте:
- чаще всего причиной является загрузка элементов сайта, происходящая по асинхронному типу. Если при планировании структуры сайта не предусмотрена синхронизация загружаемых блоков контента (то есть, к примеру, расположенное над текстовым блоком видео начинает грузиться независимо от самого сайта), то при его загрузке с возможным переходом в полноэкранный режим текст может сдвинуться вниз, уйдя из области просмотра;
- отсутствие предусмотренной возможности «ленивой» загрузки картинок и визуальных блоков сайта. Если говорить простым языком, то работает это так: образ сайта, который загружается быстрее тяжёлого визуального контента, уже предусматривает наличие встроенных ограничителей в тексте по форме загружаемого чуть позже контента.
Решение подобных проблем состоит в исследовании реального сдвига контента, который может произойти у обычного пользователя при стандартных условиях использования сайта. Сдвиг общего макета обычно случается каждый раз тогда, когда видимый пользователем в зоне просмотра визуальный элемент меняет своё местоположение от одного кадра к другому.
Стабильность работы сайта в его визуальном аспекте как раз и измеряется с помощью специального показателя Cumulative Layout Shift, который расшифровывается, как «совокупный сдвиг макета». Важность показателя можно понять по тому, что он, наряду с ещё двумя важными параметрами работы сайта, входит в тройку оцениваемых моментов в единой метрике оценки опыта пользователя при работе с сайтом Core Web Vitals. Метрика CLS позволяет учесть все неожиданные сдвиги такого формата, которые могут произойти при взаимодействии рядового пользователя с вашим сайтом. Он в совокупности учитывает все оценки сдвига любого элемента макета сайта для любой неожиданной ситуации, которая может возникнуть у пользователя в процессе использования сайта. Чем ниже этот показатель, тем лучше для пользовательского опыта. В идеальном мире показатель не должен превышать 0,1, а адекватным показателем станет ситуация, при которой не менее 3/4 от всех проходящих сессий использования сайта не превысят этого значения. Причём расчёт производится отдельно на десктопной и мобильной версиях сайта.
Как измеряется показатель
Инструменты UER, используемые Google, собирают данные по основным пользовательским метрикам загрузки сайта и работы с ним. Используются при этом данные оценки 2 инструментов: PageSpeed Insights и Search Console от CWS.
Кстати, не все виды сдвига макетов являются негативными факторами
В мобильном приложении или на сайте все изменения контента и его отображения происходят после действий пользователя при его просмотре. Пользователь вводит данные в строке поискового запроса и на сайте появляется результат поиска или всплывающие подсказки с возможными вариантами слова, кликнул по названию товара или отдельному блоку информации и после этого загрузилась карточка товара или информационный блок с описанием, нажал на кнопку регистрации, после чего появилась кнопка с подтверждением действия. Если все эти действия происходят своевременно после выполненного пользователем действия, то сдвиг исходного макета является нормальным.
Если действие со стороны пользователя требует загрузки, занимающей длительное время, то стоит отобразить в видимой части экрана значок загрузки, при этом убрав с него ненужные в этот момент времени визуальные элементы и текст. Таким образом пользователь поймёт, что ему нужно сейчас ожидать, а не кликать мышкой по экрану, ожидая отклика приложения или сайта.
Есть несколько способов отображения новых для пользователя элементов так, чтобы его не запутать. Дело в том, что любой контент, который на экране появится внезапно, может ввести пользователя сайта или приложения в заблуждение или заставить его совершить ненужные для владельца сайта действия. Плавные или анимированные переходы станут выходом в ситуации, когда вам нужно замаскировать запланированные сдвиги текста или визуальных блоков сайта. Свойства разработки сайта на CSS позволяют использовать анимацию, не ведущую при этом к сдвигам макета:
- используйте механику transform: scale() вместо привычных блоков width и height;
- также применяйте свойство transform: translate(), чтобы не задействовать стандартные варианты аспектов работы страницы. Это свойство позволит заранее выделить место возможного сдвига макета и минимизирует его риски.
Что можно предпринять для значительного улучшения оценки показателя Cumulative Layout Shift
Есть несколько простых лайфхаков, которые позволят минимизировать риск сдвигов макета при работе пользователя с сайтом или вообще исключить вероятность подобных происшествий:
В любое используемое на сайте изображение и визуал обязательно вставляйте при вёрстке атрибуты размерности. Вторым вариантом резервирования достаточного места для их корректного отображения является использование такого инструмента CSS, как соотношение полей и сторон рисунка или визуального блока. Так при загрузке сайта любой используемый им браузер сможет автоматически выделить достаточное количество места для нормального отображения потенциально опасного для возможного сдвига блока информации или визуала.
Старайтесь вообще не вставлять блоки контента сверху уже загруженного, кроме того, где нужен ответ от пользователя при его взаимодействии с сайтом. В таком случае любые визуальные эффекты, которые появятся на сайте, не станут для пользователя неожиданными и не вызовут отторжения.
Используйте плавные анимированные переходы и мягкие визуальные эффекты, чтобы пользователи сайта или приложения не видели резких сдвигов макетов.
Обращайтесь к нам! Обеспечим написание кода или исправление уже существующего по факту, чтобы минимизировать риски сдвига макета и сделать показатель Cumulative Layout Shift (CLS) минимальным.