Проблема с cls значение показателя выше порогового 0 25 устройство компьютеры

Обновлено: 06.07.2024

Мы ранее писали о нововведении в инструменте для вебмастеров Google Search Console – Основных интернет-показателях. Поскольку поисковая система Google сегодня активно использует данные из отчета Основные интернет-показатели (Core Web Vitals) в качестве важного сигнала для оценки страниц сайта при ранжировании, неразумным будет не обращать на них внимания. Для успешного продвижения своего сайта важно не только отслеживать данные показатели, но и оперативно решать проблемы при их наличии.

Сегодня мы поговорим о показателе CLS (Cumulative Layout Shift – совокупное смещение макета) в отчете Основных интернет-показателей инструмента Google Search Console. Детально и подробно рассмотрим данный показатель: что это такое, как измеряется и как посчитать CLS, примеры совокупного смещения макета, как улучшить свою оценку CLS, а также практические пути решения проблемы с совокупным смещением макета (ССМ).

Обратить внимание на данный показатель нас заставила текущая ситуация с сайтом: большое количество неэффективных URL, а также URL, которым нужно увеличить скорость. Ниже показан скриншот отчета Основных интернет-показателей в Search Console.

скриншот отчета Основных интернет-показателей в Search Console

Что такое CLS (Cumulative Layout Shift – совокупное смещение макета)?

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

Вероятные причины смещения макета: как правило, неожиданное перемещение контента страницы происходит из-за асинхронной загрузки ресурсов или при динамическом добавлении элементов DOM к существующему содержимому на странице. Это может быть картинка или видео, у которых не указаны размеры, динамически изменяемый шрифт, рекламное объявление или виджет, которые подгружаются асинхронно и могут влиять на макет страницы при первоначальной ее загрузке. Довольно часто причиной смещения макета может служить такой полезный функционал, как Lazy load подгрузка картинок.

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

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

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

Пример №1: динамическое смещение контента

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

Пример №2: несколько нестабильных элементов сдвигающих макет страницы

В данном примере показана следующая ситуация: при динамическом изменении контента страницы (загрузка результатов формы) имеется несколько нестабильных элементов, которые сдвигают макет страницы по мере ее загрузки. Первый элемент в списке (Кот) не меняет свою первоначальную позицию, поэтому он считается стабильным. Так же, как и новые элементы, которых не было в списке и в дереве DOM, поэтому их начальные позиции также не меняются – они тоже стабильны. Например, если бы они шли в конце списка. В нашем примере таких элементов нет. Но другие элементы макета (Крокодил, Лев и Слон) сдвигают свое начальное положение и положение других элементов, делая их нестабильными элементами.

Как посчитать совокупный сдвиг макета (CLS)?

К хорошим показателям относятся значения CLS ниже 0,1 , от 0,1 до 0,25 – можно улучить, свыше 0,25 – плохо. Чтобы пользователям было удобно работать с вашим сайтом, вы должны стремиться к показателю CLS ниже или равным 0,1 .

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

Чтобы вычислить оценку сдвига макета, браузер запоминает размер области просмотра и перемещение нестабильных элементов в этой области в двух временных рамках (пока происходит рендеринг страницы). Оценка совокупного смещения макета рассчитывается по двум показателям этого перемещения: Процент воздействия и Величина расстояния.

Процент воздействия

Этот показатель измеряет, как нестабильные элементы влияют на область окна просмотра в двух временных рамках (между двумя кадрами). Например, в Примере №1 выше, текстовый блок занимает почти всю область просмотра в одном кадре (75% – процент воздействия составляет 0,75 ). Затем в следующем кадре этот элемент сдвигается вниз на 25% от высоты области просмотра. Красным пунктиром обозначено объединение видимой области элемента в обоих кадрах. Процент сдвига суммируется с процентным значением объема элемента в области просмотра.

Величина расстояния

Вторая составляющая – это расстояние, на которое нестабильные элементы переместились относительно области просмотра (по горизонтали или вертикали), деленное на наибольший размер области просмотра (ширина или высота, в зависимости от того, что больше).

В приведенном выше Примере №1 наибольшим размером области просмотра является высота, а нестабильный элемент переместился на 25% высоты области просмотра, что составляет величину расстояния 0,25 .

Посчитаем для Примера №1 оценку совокупного смещения макета.

Такая оценка приведет к следующему результату для CLS: Можно улучшить.

Теперь давайте посчитаем оценку для Примера №2, для нескольких нестабильных элементов.

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

Красным пунктиром показаны новые добавленные элементы. Эти элементы делают нестабильными старые элементы (Лошадь, Свинья и Собака), которые занимают порядка 35% от всей области просмотра (процент воздействия 0,35 ).

Стрелки показывают примерное расстояние, на которое переместились из своих исходных положений нестабильные элементы. Элемент «Собака» переместился больше всего, примерно на 25% высоты области просмотра. Таким образом, величина расстояния в этом примере равна 0,25 .

Оценка совокупного смещения макета для Примера №2 составляет 0,35 x 0,25 = 0,0875 .

Такая оценка приведет к следующему результату для CLS: Хорошо.

Как отслеживать оценку CLS для своего сайта?

Все популярные инструменты Google для веб-разработчиков способны измерять CLS: Lighthouse, PageSpeed Insights, Chrome DevTools, Google Search Console и другие. Одним из самих простых способов диагностировать проблемы с CLS является Google Search Console.

Войдите в Google Search Console и откройте раздел Основные интернет-показатели. Здесь данные разделены на две группы: Мобильные и ПК.

Вот какой результат был у нас для Мобильных до начала процесса оптимизации сайта.

наш результат до начала процесса оптимизации сайта

Теперь нажмите ссылку Открыть отчет.

Вы увидите более детальные сведения по существующим проблемам.

подробные сведения по существующим проблемам с CLS

У нас наблюдается следующее:

Статус: Низкая скорость
Тип проблемы: Проблема с CLS: значение показателя выше порогового (0,25). Устройство: мобильные устройства.
URL адреса: 1130

Любопытный факт: все AMP страницы нашего сайта имеют отличную оценку.

Теперь кликните по блоку со сведением о проблеме, и вы увидите еще более детальные данные по проблеме. Так это выглядит у нас:

еще более детальные данные по проблеме с CLS

Если кликнуть по ссылке(ах) в блоке Примеры, вы увидите сводный CLS для группы похожих URL, сможете почитать больше о проблеме, экспортировать отчет в таблицу Exsel или в формате CSV, а также сможете запустить сервис PageSpeed Insights для определенных ссылок своего сайта.

Ожидаемые и неожиданные смещения в макете

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

Как самостоятельно измерить значение CLS на ПК

CLS можно измерить, например, с помощью инструмента PageSpeed Insights.

Также вы можете измерить значение CLS самостоятельно с помощью небольшого JavaScript кода в браузере Chrome. Откройте в браузере инструмент Chrome DevTools (инструменты разработчика). Для этого нажмите сочетание клавиш Ctrl+Shift+J (для Windows и Linux), или Command+Option+J (для Mac).

Теперь для измерения смещения макета (тип layout-shift ), вам нужно явно включить соответствующий API – LayoutInstabilityAPI. Для этого нужно установить флаг API. Запустите командную строку в браузере Chrome (нажмите сочетание клавиш Ctrl+Shift+P ) и введите следующее значение:

Теперь вы можете использовать API нестабильности макета (LayoutInstabilityAPI) из консоли браузера. Откройте консоль (нажмите сочетание клавиш Ctrl+Shift+J ) и введите следующий JavaScript код, который прослушивает записи неожиданных сдвигов макета, накапливает их и записывает в лог консоли:

Теперь прокручивайте нужную страницу сайта и в консоли вы будете видеть записи об изменении в макете (неожиданные сдвиги).

как самостоятельно измерить значение CLS на ПК

Как улучшить значение CLS для своего сайта

Рассмотрим некоторые основные рекомендации, которые позволят большинству сайтов избежать всех неожиданных смещений в макете:

Всегда добавляйте атрибуты размера ширины ( width ) и высоты ( height ) для картинок, видео, тегов <iframe> . Если сделать так не получается, попробуйте зарезервировать необходимое пространство с помощью CSS стилей. Это позволит браузеру выделять правильный объем места на странице во время загрузки картинки.
Никогда не вставляйте новый контент поверх существующего контента, кроме как в ответ на взаимодействие с пользователем. Это гарантирует, что изменения макета будут предсказуемы.
Если у вас есть реклама на сайте, попробуйте уменьшить вред от сдвигов в макете. Зарезервируйте статическое место под рекламный блок, т.е., задайте стиль для элемента до загрузки рекламного объявления. Выберите наиболее вероятный размер рекламного места на основе исторических данных.
Подгружайте внешние шрифты с помощью атрибута rel="preload" для тега <link> . Также установите свойство font-display: swap; в CSS стилях для инструкции @font-face . Для Google Fonts добавьте параметр &display=swap в конец URL-адреса шрифта.
Отдавайте предпочтение анимации преобразований, а не анимации свойств, вызывающих изменение макета. Вместо изменения свойств высоты и ширины используйте transform: scale() . Свойство CSS transform позволяет анимировать элементы, не вызывая сдвигов макета и не удивляя пользователя. Чтобы перемещать элементы, избегайте изменения свойств top , right , bottom или left , а используйте вместо них transform: translate() .

Заключительная информация

Вот и все на сегодня! В данном уроке мы подробно рассмотрели показатель CLS (Cumulative Layout Shift – совокупное смещение макета) в отчете Основных интернет-показателей инструмента Google Search Console. Рассмотрели, что такое CLS, как измеряется и как его посчитать, увидели примеры совокупного смещения макета, варианты улучшения оценки CLS для своего сайта, а также узнали, какие есть практические пути решения проблемы с совокупным смещением макета (ССМ).

Проблемы с CLS могут повлечь за собой просадку сайта в поисковой выдаче Google. Почему? Дело в том, что Cumulative Layout Shift или совокупный сдвиг вёрстки — одна из ключевых метрик оценки технической оптимизации сайтов в Google.

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

Чем больше суммарная площадь таких «прыгающих» элементов и чем дальше они «прыгают», тем хуже будет метрика CLS. В идеале она должна быть равна нулю.

В сентябре 2020 года наша команда разработки окончательно победила Cumulative Layout Shift — контент больше не смещается при загрузке. Некоторые проблемы с CLS всё ещё остались, но 75-й перцентиль за 7 дней нулевой:

KPI команды разработки Tproger по Core Web Vitals — данные по внутренней аналитической системе Tproger

По таблице видно, что у нас завышена задержка первого ввода (First Input Delay) на мобильных и опасный тренд по времени отрисовки контента (Largest Contentful Paint) — над этим мы поработаем. Google, однако, считает, что проблем нет уже сейчас:

Поделюсь ключевыми приёмами по работе над избавлением от сдвигов контента. В нашем случае 90% проблем решилось довольно просто и свелось к трём правилам.

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

Если вы загружаете контент после «скелета» страницы, то вставляйте на место контента плейсхолдер с высотой 100vh, который будет удерживать подвал вне экрана. Когда контент подтянется, удалите плейсхолдер. Пример: страница вакансий.

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

3–4 декабря, Онлайн, Беcплатно

Для диагностики удобно использовать DevTools в Google Chrome. Установите эмуляцию медленного Интернет-соединения и поставьте галку Layout Shift Regions на вкладке Rendereing. Либо используйте отладчик Performance, недавно он научился выделять области со сдвигами контента.

Из-за сместившихся кнопок пользователь промахнулся

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

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

Причины внезапных сдвигов на странице

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

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

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

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

CLS — показатель визуальной стабильности сайта

Сдвиг макета происходит каждый раз, когда видимый элемент изменяет свое положение от одного визуализируемого кадра к другому.

Визуальная стабильность сайта количественно измеряется показателем Cumulative Layout Shift. CLS — это совокупный сдвиг макета. Показатель входит в перечень трех главных метрик оценки пользовательского опыта — Core Web Vitals.

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

Сайты должны стремиться к тому, чтобы CLS не превышал значение 0,1. Хороший показатель, если не меньше 75% сессий, сегментированных по мобильным и настольным устройствам, не превышают это значение.

Шкала CLS

Как измерить CLS

Инструмент Chrome User Experience Report собирает данные по пользователям для метрик Core Web Vitals, включая CLS. Эти данные используют два инструмента, которые доступны рядовому пользователю:

Есть еще вариант — проверить скорость сайта в инструменте от PR-CY. Он проанализирует процесс загрузки, разложит его по этапам и даст советы по улучшению каждого. Работает бесплатно онлайн.

Фрагмент результатов

Не все сдвиги макета — это плохо

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

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

Как отобразить новые элементы и не сбить с толку пользователя

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

Свойство CSS позволяет анимировать элементы, не вызывая сдвигов макета:

вместо изменений height и width свойства, можно использовать transform: scale();
для перемещения элементов можно не менять top, right, bottom или left свойства и использовать вместо этого transform: translate().

Что делать, чтобы улучшить CLS и избавиться от внезапных сдвигов

На большинстве сайтов можно избежать всех неожиданных сдвигов макета благодаря этим правилам:

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

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

Приветствую, друзья. Сегодня разберем еще один элемент оптимизации сайта под требования Google Page Speed Insights, обозначенный как смещение макета страницы в процессе загрузки, в результатах проверки фигурирует под названием Cumulative Layout Shift (CLS).

Если говорить простым языком, то уровень Cumulative Layout Shift показывает, насколько сильно прыгают разные блоки на сайте, в течение загрузки веб-страницы.

Содержание:

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

Часто аналогичное влияние могут давать блоки рекламы, формы и т.д.

Для исправления необходимо обладать базовыми знаниями в CSS и уверенно пользоваться браузером.

Какой вред несет смещение макета

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

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

Параметр Cumulative Layout Shift лежит в диапазоне от 0 до 1.

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

На значение влияет доля контента, который сдвигается, и расстояния, на которое происходит смещение.

Нормальным совокупным смещением макета считается значение <0,1, CLS в диапазоне 0,1-0,25 приемлемы, но Google уже обратит внимание на проблему, а цифры выше 0,25 – явная ошибка.

К сожалению, сам Page Speed Insights не указывает конкретные элементы, оказывающие негативный эффект.

Встает вопрос, как оптимизировать Cumulative Layout Shift, если неизвестны проблемные места.

На помощь придет DevTools – утилита уже встроенная в Яндекс Браузер и Chrome.

Я покажу весь процесс на примере собственного сайта, на котором как раз оказались страницы с проблемами.

Работа проводится в 2 этапа:

Поиск элементов с неправильными свойствами;
Правка их CSS стилей.

Поиск элементов, смещающих макет

Чуть не забыл, найти страницы с высоким значением CLS, если они вам заранее неизвестны можно через Google Search Console (инструкция, как туда добавить сайт).

В консоли нужна вкладка «Основные интернет показатели», там пункт «Мобильный». Внизу страницы приведен список замечаний, требующих устранения, среди них находится CLS.

Клик по строке откроет список страниц.

Открываем страницу, требующую улучшения, в браузере и нажимаем одновременно кнопки Ctrl+Shift+I. Откроется инструмент веб-разработчиков. Второй вариант его запустить – кликнуть правой кнопкой мыши в любом месте сайта и в меню выбрать «Исследовать элемент».

В панели переводим сайт в мобильный режим и открываем вкладку «Perfomanse».

Теперь перезапускаем страницу в отладочном режиме, нажав на Ctrl+Shift+E.

Это действие приведет не только к обновлению страницы, но и к покадровой записи всего процесса загрузки страницы со сбором разной информации.

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

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

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

Под диаграммой идет сводный список сдвигаемых элементов.

По метке в Related Node мы поможет понять, какая часть сайта меняется и негативно влияет на Cumulative Layout Shift. Осталось понять, что приводит к изменениям.

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

Итак, то, что ломает наш макет обнаружено. В моем примере это картинка статьи, у которой неверно заданы начальные размеры. Стандартно, для десктопной версии, картинка имеет размер 300 на 170, а для маленьких экранов ширина меняется на 160, а высота была задана параметром auto. В результате браузер сначала подтягивал размер 170, а уже потом, когда картинка прогружалась полностью, пропорционально приводил высоту к ширине.

Исправление ошибок в макете

Теперь в базовом макете высота изображения устанавливается на 100 px вместо 170 и после полной загрузки контента изменения практически не происходят. В DevTools совокупное смещение макета показывает 0,0163, а проверка Гугл снизила Cumulative Layout Shift до 0.

У сайтов, работающих на CMS, как правило, ошибки имеют повторяющийся характер и связаны с настройками шаблона, поэтому, исправление в одном месте скажется на всех страницах сайта или на определенной группе страниц. В моем примере одна строка в CSS файле WordPress шаблона уменьшила Cumulative Layout Shift до нуля одновременно на главной и на всех страницах категорий.

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

Читайте также: