Что такое CLS сайта и почему он важен
Авторизуйтесь
Что такое CLS сайта и почему он важен
Совокупный сдвиг вёрстки (Cumulative Layout Shift) — метрика пользовательского опыта измеряющая то, настолько нестабильный контент отображается пользователю. Сдвиг вёрстки происходит, когда контент страницы неожиданно съезжает вниз уже после того, как был показан пользователю.
Пример такого сдвига — вы читаете статью на сайте, и в процессе скролла на ней подгружается реклама, которая вклинивается в текст, и он прыгает туда-сюда.
Совокупный сдвиг вёрстки измеряет насколько смещается содержимое страницы. Он является одной из Google’s Core Web Vitals — важных метрик для оценки качества сайта. Поэтому сейчас ему уделяется много внимания. В 2021 году он будет использоваться в рейтинге SEO от Google, и чем меньше его значение, тем выше будет ранг сайта при отображении в поиске.
По состоянию на январь 2021 года, CLS является частью черновика спецификации группы сообщества инкубаторов веб-платформ (WICG), но еще не является частью отслеживаемых стандартов W3C. На данный момент он поддерживается только в браузерах на основе движка Blink (Chrome, Opera, Edge).
Что такое CLS сайта?
CLS — это оценка, которая начинается с 0,0 (для ожидаемых сдвигов) и увеличивается от каждого неожиданного сдвига на странице.
Эта оценка является относительной, теоретически она может быть в пределах от 0,0 до 100 (на страницах с сильным смещением). Но в реальности 99,5% оценок меньше чем 2,0.
По рекомендациям Google, CLS до 0,10 означает хороший UX, до 0,25 — требующий улучшения. Значения выше 0,25 — плохой UX.
Отметим, что Google рекомендует величину CLS 0,10 для 75-го перцентиля пользователей мобильных и десктопных устройств.
Как и любая метрика производительности, CLS — это целый набор значений для страниц сайта. В то время как отдельные синтетические тесты (такие как WebPagetest или Lighthouse) могут давать только один (или несколько) результатов, в случае с CLS из реальных данных RUM, у вас могут быть тысячи или миллионы отдельных значений. CLS будет разным для разных типов страниц, посетителей, устройств и экранов.
Предположим, по некоторым данным (например mPulse RUM или CrUX) CLS вашего сайта равен 0,31 для 75-го перцентиля.
Распределение может выглядеть так:
Это частотное распределение показывает реальные данные (от mPulse) сайта розничной торговли за один день и содержит более 7 миллионов результатов. Обратите внимание, что в то время как 75-й перцентиль равен 0,31 (плохо), медиана (50-й перцентиль) равна 0,16 (требуется улучшение).
Распределение не является нормальным и показывает, что существует несколько групп сходных баллов CLS, то есть около 0,00, 0,10, 0,17 и 1,00. Возможно, эти холмы представляют подмножества данных, такие как разные типы устройств или страниц.
Попробуем разделить данные на мобильные и десктопные:
Отсюда видно, что данные действительно отличаются. У пользователей компьютеров CLS чаще от 0,0 до 0,4, и изредка около 1,0.
У мобильных пользователей CLS в основном около 0,0, всплеск на 0,06-0,10, а затем довольно равномерное распределение вплоть до 1,0.
Страницы одного сайта могут быть устроены по разному и иметь различное содержание. Анализ результатов CLS для двух уникальных групп страниц показывает хороший CLS для первого типа страниц и много плохих результатов для второго типа страниц:
Это говорит о том, что при тестировании CLS сайта нужно понимать из чего состоит итоговый набор данных, чтобы определить и устранить основные причины его роста.
Почему важно следить за CLS?
CLS — один из способов измерить качество пользовательского опыта. Есть много факторов влияющих на то, как пользователи воспринимают ваш сайт, и CLS — показатель, который может помочь прояснить некоторые негативные моменты.
Плохая оценка CLS может указывать на то, что пользователи видят, как контент прыгает, когда они пытаются взаимодействовать с вашим сайтом, что может быть неприятно. Расстроенные пользователи могут покинуть ваш сайт.
В некотором смысле совокупный сдвиг вёрстки — это скорее показатель качества пользовательского опыта и веб-дизайна, чем производительности веб-сайта. Он оценивает то, что видит пользователь, а не то, сколько времени что-то занимает.
Google продвигает эту метрику в Google’s Search Engine Optimization (SEO) rankings. Поисковое ранжирование напрямую влияет на пользователей, и поэтому всё больше внимания уделяется CLS.
О том, что делать с большим CLS сайта читайте в статье — «Почему у вас проблемы от высокого CLS и как их исправить».
Core Web Vitals: как Google решил оценивать сайты
Сегодня поговорим о важности пользовательского взаимодействия, ведь совсем скоро придется подготовить свои сайты к максимальному ускорению загрузки. Возможно, вы уже слышали про Core Web Vitals…
В прошлом году Google начал масштабный пересмотр факторов ранжирования в поисковике, чтобы улучшить качество поисковой выдачи. И в ноябре команда Google анонсировала Core Web Vitals — новые факторы оценки качества ресурсов, которые смогут влиять на индексацию и вступят в силу в мае 2021 года. Давайте разбираться.
Существуют сотни факторов ранжирования, однако Core Web Vitals будет анализировать ещё больше информации и иметь непосредственное влияние на дальнейшую индексацию. Нужно отметить, что скорость загрузки напрямую не влияет на индексацию, однако имеет значительное влияние на поведение пользователя, которое является важным сигналом для поисковых алгоритмов Google.
Чем Core Web Vitals отличается от прочих факторов ранжирования?
Положительная сторона Core Web Vitals — в прозрачности: это понятные, публично доступные критерии, которые можно отслеживать и улучшать с помощью специального набора инструментов. Кроме того, с момента анонсирования и до официального запуска есть много времени, чтобы уже начать работать над Core Web Vitals.
Андрей Липатцев, Web Partnerships Google
Core Web Vitals
Среди многих показателей ранжирования (оптимизации для мобильных устройств, безопасный просмотр, безопасность HTTPS и т.д.) Google выделил основные (core), жизненно важные для пользователя. Метрики, составляющие Core Web Vitals, со временем будут развиваться и дополняться.
Текущий набор показателей фокусируется на трех аспектах взаимодействия с пользователем: 
LCP (загрузка)
Для разработчиков всегда было непросто измерить, насколько быстро контент веб-страницы загружается и становится видимым для пользователей.
Старые метрики, такие как load или DOMContentLoaded, не подходят, так как они всегда соответствуют тому, что пользователь видит на экране. А более новые показатели производительности, такие как First Contentful Paint (FCP), отражают только самое начало процесса загрузки.
В ходе исследований обнаружилось, что более точный способ измерить загрузку основного содержимого страницы, – это посмотреть, когда был отрисован самый большой элемент.
Так появилась метрика Largest Contentful Paint (LCP), которая измеряет время рендеринга самого большого элемента на странице. 
Что считается большим элементом?
Как это работает?
Веб-страница загружается поэтапно, и в результате самый большой элемент на ней может измениться.
Чтобы справиться с таким изменением, браузер отрисовывает первый кадр и отправляет PerformanceEntry с параметром large-contentful-paint, который идентифицирует самый большой элемент. Но затем, после рендеринга последующих кадров, браузер будет отправлять PerformanceEntry при каждом изменении самого большого элемента.
Важно отметить, что элемент может считаться самым большим содержимым только после того, как он будет отрисован и виден для пользователя.
Браузер перестает сообщать о новых записях, как только пользователь начнет взаимодействовать со страницей, поскольку взаимодействие может визуально изменить страницу (прокрутка, модальное окно и т.д.).
Рис.1. Изменение самого большого элемента по мере загрузки содержимого
Как определяется размер самого большого элемента?
Размер элемента определяется в области видимости пользователя: если элемент выходит за её пределы (обрезан или имеет overflow: hidden), то эти части не учитываются.
Если у изображения видимый и исходный размеры отличаются, то будет учитываться меньший из них. Например, если изображение сжали до меньшего размера, чем его исходный, то передается видимый размер, а если растянули — исходный.
Для текстовых элементов учитывается только размер их текстовых узлов.
Для всех элементов любые margin, padding или border не рассматриваются.
FID (интерактивность)
Метрика First Input Delay (FID) помогает измерить первое впечатление пользователя об интерактивности и быстродействии вашего сайта.
FID измеряет время с момента, когда пользователь впервые взаимодействует со страницей, до того, как браузер действительно может начать обработку событий в ответ на это взаимодействие.
Задержка ввода возникает из-за того, что основной поток браузера занят чем-то другим (синтаксическим анализом или выполнением большого бандла), поэтому он (пока) не может ответить пользователю.
FID можно измерить только в реальных условиях.
Почему рассматривается именно первый ввод?
CLS (визуальная стабильность)
Cumulative Layout Shift — важный, ориентированный на пользователя показатель для измерения стабильности верстки и элементов, не препятствующих взаимодействию с контентом.
Например, вы переходите на сайт, почитать статью. Пока сайт прогружался, на странице появилось ещё несколько элементов и положение скролла неожиданно изменилось. Неприятно.
Рис.2. Пример Cumulative Layout Shift
Первая ассоциация при виде этого примера — реклама. Думаю, что каждый хотя бы раз сталкивался с таким неожиданным появлением элемента.
Это может происходить из-за асинхронной загрузки ресурсов или динамического добавления DOM-элементов на странице. Причиной может быть изображение или видео с неизвестными размерами, сторонняя реклама или виджет, которые динамически изменяют размер.
CLS измеряет общую сумму всех показателей визуальной стабильности верстки в течение сессии страницы.
Показатель визуальной стабильности определяет Layout Instability API, который отправляет layout-shift каждый раз, когда существующий элемент меняет свое начальное положение между двумя кадрами.
Обратите внимание, что визуальная стабильность не учитывается, когда новый элемент добавляется в DOM или существующий элемент меняет размер.
Чтобы вычислить коэффициент визуальной стабильности, браузер смотрит на размер области просмотра и перемещение нестабильных элементов между двумя визуальными кадрами. Коэффициент вычисляется двумя показателями: коэффициентом воздействия и расстояния.
Рис.3. Коэффициент воздействия
На изображении выше есть элемент, который занимает половину области просмотра в одном кадре. Затем в следующем кадре элемент смещается вниз на 25% от высоты экрана. Красный пунктирный прямоугольник указывает на объединение видимой области элемента в обоих кадрах, которая в данном случае составляет 75% от экрана.
Рис.4. Доля расстояния
Доля расстояния — это наибольшее расстояние, на которое любой нестабильный элемент переместился в кадре (по горизонтали или вертикали), деленное на размер экрана.
В приведенном примере наибольшим размером экрана является высота, а нестабильный элемент перемещается на 25%.
Коэффициент визуальной стабильности = 0.75 * 0.25 = 0.1875
Как улучшить показатели Core Web Vitals?
Если ваше приложение не дотягивает до идеальных показателей, то нужно заняться вопросом повышения скорости. Итак, что можно сделать:
Библиотеки и инструменты
Самый простой способ измерить все Core Web Vitals — использовать js-библиотеку web-vitals, которая измеряет каждую метрику в соответствии с Инструментами Google.
Или можно использовать расширение Web Vitals для Chrome.
Не забывайте периодически следить за скоростью загрузки своего приложения. Быстрая реакция на любые негативные изменения позволит минимизировать потери и вовремя внести необходимые коррективы. Core Web Vitals влияет не только на индексацию, но и главным образом на конверсию, посещаемость и в результате на прибыль. К счастью, Google предупредил заранее о запуске новых факторов ранжирования, поэтому у вас есть еще время исправить все погрешности к запуску Core Web Vitals (май 2021).
Полезные ссылки и используемые материалы:
Как оптимизировать показатель LCP — ускоряем загрузку контента для пользователей
В статье:
В мае Google определил новый способ оценки пользовательского опыта. Показатель называется Google Core Vitals, он связан со скоростью загрузки сайта и появления на нем контента.
Google Core Vitals состоит из трех метрик:
Про CLS у нас есть подробный материал «Как оптимизировать CLS: сдвиги макета страницы, которые мешают пользователям», в этой статье поговорим о показателе LCP и способах его улучшить.
Что такое LCP — показатель Largest Contentful Paint
Largest Contentful Paint — время рендеринга самого большого элемента, видимого в области просмотра пользователем — изображения, текстового блока, видео или другого контента. Учитываются те размеры элементов, которые видны пользователю. Если элемент частично скрыт за областью просмотра, эти невидимые части не берутся в расчет.
Самый аккуратный способ определить время отображения основного содержимого страницы — использовать API Largest Contentful Paint (LCP).
Как это происходит:
При загрузке страницы контент может меняться, поэтому каждый раз, когда появляется новый большой элемент, браузер отправляет PerformanceEntry c типом largest-contentful-paint. Когда пользователь начинает взаимодействовать со страницей, отправка метрики прекращается. Нужное значение — время самого последнего отправленного события.
Отрисовка самого большого элемента может происходить и до полной загрузки страницы. К примеру, логотип Instagram — самый большой элемент, он загружается относительно рано и остается самым большим элементом, пока постепенно отображается остальной контент.
Самый большой элемент загрузился до конца загрузки остального контента
В следующем примере самый большой элемент изменяется по мере загрузки содержимого — сначала им был текст, потом самым большим объектом стала картинка.
Самый большой элемент менялся по мере загрузки
Как измерить LCP: инструменты веб-мастера
Инструменты, которые позволяют измерить показатель LCP:
Проверка скорости сайта от PR-CY бесплатно анализирует загрузку страницы по ключевым параметрам, проверяет десктопное и мобильное отображение. Сервис дает рекомендации и прикидывает, сколько можно сэкономить, если их внедрить на сайте.
Интерфейс проверки скорости сайта
Какой показатель LCP считается хорошим
Нужно стремиться, чтобы отрисовка самого большого контента происходила не дольше, чем за 2,5 секунды после начала загрузки страницы. Тогда пользователям будет удобно работать на сайте.
Инструменты для измерения показывают сводный показатель LCP для 75 % посещений URL.
Как улучшить показатель LCP
На LCP влияют четыре фактора:
Рассмотрим эти факторы, сопутствующие им проблемы и способы оптимизировать показатели.
Медленный ответ сервера
Чем быстрее браузер получает контент с сервера, тем быстрее загрузка страницы и тем лучше показатель LCP.
Вы можете улучшить TTFB — время до первого байта. Какие есть способы:
Другой вариант — dns-prefetch для ускорения поиска DNS, подходит для браузеров, которые не поддерживают preconnect.
Можно использовать оба варианта для разных браузеров.
Блокировка рендеринга JavaScript и CSS
Браузер преобразовывает разметку HTML в дерево DOM, а потом уже отображает контент. Он не сможет продолжать работу, если обнаружит ресурсы, блокирующие рендеринг: внешние таблицы стилей link rel=»stylesheet» и сценарии JavaScript script src=»https://pr-cy.ru/news/p/main.js». Чтобы ускорить загрузку содержимого страницы, нужно отложить все некритические JavaScript и CSS.
Неиспользуемый JavaScript и CSS можно найти с помощью Chrome DevTools на вкладке Coverage.
Поиск неиспользуемого CSS и JavaScript
Найденный неиспользуемый CSS можно вообще удалить или переместить в другую таблицу стилей, если он нужен на других страницах сайта.
Если CSS не нужен для начального рендеринга, можно использовать loadCSS для асинхронной загрузки файлов, который использует rel=»preload» и onload.
Как улучшилось LCP после откладывания некритического CSS
Критический CSS можно включить в head, если он нужен для верхней части страницы. Встраивание стилей таким образом позволит не делать двусторонний запрос для получения критического CSS.
Как автоматизировать добавление встроенных стилей на сайт:
Для JavaScript также можно использовать асинхронную загрузку.
Еще полезна минификация или минимизация кода CSS и JavaScript — удаление символов, которые не нужны браузеру для чтения кода. Минификаторы удаляют отступы, интервалы, разделители и комментарии, файл по сути не меняется, но становится легче.
Список бесплатных инструментов для минимизации CSS, JS, HTML-файлов есть в статье.
Как улучшилось LCP после минификации CSS
Долгая загрузка ресурсов
Время, которое требуется контенту для загрузки, влияет на LCP, так что имеет смысл поработать с элементами на странице.
Рендеринг на стороне клиента
Есть сайты, которые работают через рендеринг на стороне клиента (CSR) — то есть рендеринг страниц происходит в браузере с использованием JavaScript, все обрабатывается на стороне клиента, а не на сервере.
Основной недостаток такого подхода в том, что по мере роста сайта, добавления новых библиотек и кода начинает страдать скорость загрузки и отображения контента для пользователя.
В некоторых случаях можно использовать предварительный рендеринг. В таком способе рендер выполняется в headless браузере типа Chrome, который генерирует статические файлы HTML, а их уже подставляют в ответ сервера.
Предварительный рендеринг не нагружает реальный сервер и позволяет улучшить показатель LCP, но не подходит для страниц с изменяемым или с введенным пользователем контентом.
Как улучшилось LCP после предварительного рендеринга
Скорость загрузки ресурса на компьютере и мобильных устройствах можно проверить в Анализе сайта от PR-CY. Он проверяет сайт по 70+ параметрам, включая скорость загрузки и отображения контента, анализирует, что реализовано на сайте для ускорения, и дает советы, что еще можно улучшить.
Проверка скорости в Анализе сайта
Некоторые подробные тесты и графики, а также проверка внутренних страниц и отслеживание позиций доступны на платных тарифах. Но мы даем новым пользователям неделю на бесплатный тест сервиса — оставайтесь, если понравится!
В комментариях напишите, о чем еще вам было бы интересно почитать по теме оптимизации и работы с техническими характеристиками сайта.
Что такое Cumulative Layout Shift (CLS) в Chrome and WebPageTest и как его измерить
Что такое CLS – Cumulative Layout Shift?
Совокупный сдвиг макета (CLS) – это относительно новый показатель, который поможет вам понять впечатление пользователя от сайта. Помните такое, вы читаете сайт и вдруг, внезапно текст сдвигается вниз и вы теряете место, где читали. Это очень раздражает.
Что такое CLS – Cumulative Layout Shift?
Что такое CLS – Cumulative Layout Shift?
Как измерить CLS?
Помните, что замерять скорость полной загрузки сайта надо из России для сайта с аудиторией РФ. Ниже форма проверки скорости загрузки сайта из России:
В настоящий момент тип layoutShift доступен только при явном включении API. Если вы используете Chrome 76 или новее, вы можете запустить его через командную строку:
Измерение CLS в WebPageTest
WebPageTest (WPT) является популярным инструментом для контролируемых измерений веб-статистики производительности. Давайте посмотрим, как мы можем настроить запись CLS.
Выбор правильного браузера
WPT поддерживает множество браузеров из разных стран мира. Чтобы этот тест сработал, нам нужна более новая версия Chrome, поддерживающая функцию LayoutInstabilityAPI Blink. Поскольку стандартная версия хрома WPT на данный момент находится в 75-й версии, мы выберем Chrome Canary (версия 77), которая доступна в Dulles, VA test location.
Установка флага командной строки
На вкладке расширенных настроек «Chromium» есть поле для настройки параметров командной строки.
Измерение CLS в качестве индивидуальной метрики
Примечание: Опытные пользователи Astute WPT, читающие эту заметку, возразят против этого сценария, потому что он возвращает значение, а пользовательские метрики поддерживают только синхронный код. Больше нет! WPT теперь поддерживает пользовательские метрики async!
Этот скрипт будет преобразовываться в значение CLS для тестовой страницы, сдвиги компоновки которой сохранены в буфере.
Отлично! Вы готовы ввести адрес URL страницы, которую хотите протестировать и запустить тест. Результаты вы найдете на странице Custom Metrics (Пользовательские метрики).
Что такое CLS – Cumulative Layout Shift
Для этой страницы CLS равен 0,3. Это страница, которую создал тестировщик, большая часть пользовательского интерфейса которой динамически отображается с помощью скрипта, поэтому
Что такое CLS – Cumulative Layout Shift
Для визуализации этого мы можем использовать режим просмотра в виде полосы filmstrip, который показывает то, как выглядела страница при ее загрузке. В этом случае было пусто полсекунды, а затем отрисовывалось целиком. Неясно, где находится смещение компоновки, но это могло произойти за считанные миллисекунды. Если сдвиг компоновки происходит так близко к началу рендеринга, это необязательно означает плохой опыт пользователя, поэтому может возникнуть необходимость в настройке алгоритма CLS.
Подведем итоги
CLS все еще очень новая метрика, поэтому если вы начнете ее использовать, пожалуйста, оставьте отзыв о репозитории Layout Instability API GitHub.
Проверьте скорость загрузки вашего сайта из России прямо сейчас:
Статья составлена по материалам dev.to и web.dev.
Подпишись на AX.digital
Получай на свой e-mail все наши новые публикации.
Алексей Махметхажиев
Многодетный Маркетолог. Люблю DevOps, UX/UI, web performance. Знаю как сделать SEO-трафик и высокие конверсии. Развиваю loading.express. Веду колонку на VC.
Скорость сайта в 2020 году. Анонсы от Google.
Саммит разработчиков Chrome Developer Summit — это ежегодное мероприятие, посвященное новым разработкам в области веб-технологий. В течение двух дней разработчики Chrome делятся последними данными об экосистеме, инструментах и подходах. Поскольку и Google, и Chrome
Промокод на InnovationBro: платформа для онлайн-обучения и курсов в 2021
🎧 Слушайте наш подкаст про систему онлайн-обучения InnovationBro и получайте промокод на скидку в 5000 рублей! Онлайн-образование — прибыльный бизнес, требующий минимальных вложений на старте. Для запуска нужна хорошая платформа, где можно создать дистанционную школу
