Что такое 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 рублей! Онлайн-образование — прибыльный бизнес, требующий минимальных вложений на старте. Для запуска нужна хорошая платформа, где можно создать дистанционную школу
Как оптимизировать CLS: сдвиги макета страницы, которые мешают пользователям
В статье:
Представьте, что вы читаете статью онлайн, но на странице что-то внезапно меняется и вы теряете место, на котором остановились. Или еще хуже — хотите нажать на кнопку и отказаться от предложения, как страница сама сдвигается и вы попадаете на кнопку «Скачать».
Из-за сместившихся кнопок пользователь промахнулся
В большинстве случаев это раздражает, а в некоторых может и нанести ущерб — к примеру, если из-за сдвига кнопки вы соглашаетесь что-то купить или оформить ненужную подписку.
Такой нестабильный сайт может потерять часть пользователей, потому что с ним невозможно удобно работать. И, к сожалению, это частая проблема сайтов. Разберемся, как ее решать.
Причины внезапных сдвигов на странице
Неожиданные сдвиги содержимого обычно случаются из-за асинхронной загрузки ресурсов или динамического добавления элементов DOM над существующими на странице элементами.
Если добавить до расположения контента, который смотрит пользователь, асинхронно загружающееся видео, изображение, шрифт, который отображается больше или меньше, чем его запасной вариант, или сторонний виджет, меняющий размер, при загрузке этих элементов контент ниже может сдвинуться.
Дело в том, что функционирование сайта в процессе разработки отличается от того, что в итоге воспринимают пользователи. Персонализированный и сторонний контент часто ведет себя по-разному. При разработке тестовые изображения часто уже находятся в кэше браузера разработчика, а локальные вызовы API выполняются быстро и задержки незаметны.
Решить проблему поможет измерение того, как часто сдвиги макета происходят у реальных пользователей.
CLS — показатель визуальной стабильности сайта
Сдвиг макета происходит каждый раз, когда видимый элемент изменяет свое положение от одного визуализируемого кадра к другому.
Визуальная стабильность сайта количественно измеряется показателем Cumulative Layout Shift. CLS — это совокупный сдвиг макета. Показатель входит в перечень трех главных метрик оценки пользовательского опыта — Core Web Vitals.
CLS помогает оценить, как часто пользователи сталкиваются с неожиданными сдвигами. Он измеряет общую сумму всех индивидуальных оценок сдвига макета для каждого неожиданного сдвига, который происходит в течение всего срока службы страницы.
Чем ниже показатель CLS, тем лучше.
Сайты должны стремиться к тому, чтобы CLS не превышал значение 0,1. Хороший показатель, если не меньше 75% сессий, сегментированных по мобильным и настольным устройствам, не превышают это значение.
Шкала CLS
Как измерить CLS
Инструмент Chrome User Experience Report собирает данные по пользователям для метрик Core Web Vitals, включая CLS. Эти данные используют два инструмента, которые доступны рядовому пользователю:
Есть еще вариант — проверить скорость сайта в инструменте от PR-CY. Он проанализирует процесс загрузки, разложит его по этапам и даст советы по улучшению каждого. Работает бесплатно онлайн.
Фрагмент результатов
Не все сдвиги макета — это плохо
На сайтах и в приложениях элементы меняются в зависимости от действий пользователя. Он ввел данные в поисковую строку и появились подсказки, кликнул по ссылке в названии и подгрузилась карточка с описанием, щелкнул по кнопке и появилась дополнительная кнопка для окончательного согласия. Если ожидаемые пользователей окна и кнопки появляются сразу в ответ на действие — сдвиг макета допустим.
Если действие пользователя запускает какой-то сетевой запрос, требующий времени на загрузку, лучше освободить место под элементы, которые должны появиться, и отобразить значок загрузки. Так пользователь поймет, что сейчас что-то появится, и не будет пытаться кликать куда-то еще во время ожидания.
Как отобразить новые элементы и не сбить с толку пользователя
Контент, который резко и неожиданно появляется на странице, может сбить с толку, ведь пользователь уже решил куда-то кликнуть. Анимация и переходы — хороший способ отобразить новые элементы на странице так, чтобы пользователь понял, что происходит, и был к ним готов.
Свойство CSS позволяет анимировать элементы, не вызывая сдвигов макета:
Что делать, чтобы улучшить CLS и избавиться от внезапных сдвигов
На большинстве сайтов можно избежать всех неожиданных сдвигов макета благодаря этим правилам:
Расскажите в комментариях, о чем еще вам было бы интересно почитать в блоге по теме навигации и юзабилити или по другим темам о развитии сайтов.
EduNeo
актуальные методики преподавания, новые технологии и тренды в образовании, практический педагогический опыт.
Google Classroom: функционал и краткая инструкция по созданию онлайн-курса
Кратко о платформе Google Classroom
Вебинар “Как создавать тесты: основы педдизайна и организация тестирования онлайн”.
Где найти приложение Google Glassroom
Познакомимся с основными элементами Google Classroom необходимыми при сборке учебного курса. Найти Google Classroom достаточно просто, для этого откройте браузер Google Chrome, и далее просмотрите приложения Google.
Иконку Google Classroom вы может сразу и не увидеть, нажмите Еще (More…) и обязательно найдете.
После открытия вы попадете в Google Classroom где можно начать создавать свой курс или вы найдете учебные курсы, к которым вам дали доступ.
Рисунок 2. Google Класс
Структура дистанционного курса на платформе Google Classroom
Познакомимся с основными элементами Google Classroom на примере дистанционного тренинга “Мой курс в Google Класс”.
При создании и организации курса Вам будут доступны три основные вкладки: ЛЕНТА, ЗАДАНИЯ, ПОЛЬЗОВАТЕЛИ.
Первоначально видны две вкладки: ЛЕНТА и ПОЛЬЗОВАТЕЛИ (актуально на 14.01.2019 – примечание Редакции). Вкладку “ЗАДАНИЯ” нужно добавлять в курс. О том, как это сделать читайте ниже.
В ЛЕНТЕ собирается и отображается актуальная информация по курсу: учебные материалы, объявления, задания, видны комментарии пользователей.
Вкладка ЗАДАНИЯ позволяет добавить учебные материалы в курс и распределить задания по темам и в необходимой последовательности.
В разделе ПОЛЬЗОВАТЕЛИ будет список обучаемых, присоединившихся к курсу (по коду или добавленных вручную). Код курса можно найти нажав на изображение шестерёнки.
Рисунок 3. Дистанционный курс в Google Classroom
Лента: информация о происходящем в курсе
В ленте отображается происходящее в Курсе в той последовательности, в которой преподаватель добавляет информацию в курс:
При создании Объявлений преподаватель (кроме текста) может добавить различный материал: прикрепить файл (загрузить с компьютера), добавить файл из Google Диска, опубликовать ссылку на видео с Youtube или дать ссылку на внешний сайт.
Учащиеся могут просматривать Объявления и комментировать их.
Для добавления Объявления используйте “Добавить новую запись”.
Рисунок 5. Добавляем Объявление для учащихся в Google Classroom
Обратите внимание, что весь загруженный материал в Ленту курса (в раздел Новая запись) помещается в папку курса на Google Диске. Увидеть папку можно во вкладке “Задания”.
Рисунок 6. Папка с учебными материалами на Google Диске
Обратите внимание на Настройки курса (шестеренка в верхнем правом углу на странице курса). Можно разрешить/запретить учащимся оставлять записи в ленте курса.
Задания: проверяем знания слушателей
Для создания вкладки “Задания” на вашем учебном курсе нажмите на значок ? в левом нижнем углу.
Рисунок 7. Добавляем вкладку Задание на курс
Это новая вкладка Google Classroom. Во вкладке “Задания” вы можете:
Задания для слушателей могут быть различного типа. Преподаватель может прикрепить в качестве Задания любой документ находящийся на ПК или на Google Диске, дать ссылку на видео. Также может предложить выполнить практическую работу или контрольную работу в виде теста. Добавить вопрос, который смогут комментировать как преподаватели, так и другие учащиеся (при определенных настройках).
Рисунок 9 Задание для слушателей
В настоящее время (актуально на 14.01.2019 г. – прим. редакции) появилась возможность создавать Задания с использованием Google Формы. Google Формы очень многофункциональны и при их помощи легко создавать тесты с выбором одного или нескольких ответов, открытые задания, задания с использованием рисунков и видео и др.
Заданиям можно выставить срок сдачи.
После выполнения заданий слушателями, сведения об этом автоматически поступают к преподавателю. Для просмотра сданных заданий преподаватель переходит в раздел ЛЕНТА, затем нажимает Все задания.
У преподавателя появляется информация о сданных/несданных работах.
Рисунок 10 Просмотр заданий, которые выполнили ученики
Преподаватель может проверить задания учащихся, выставить оценки, прокомментировать ответы слушателей.
Рисунок 11 Проверяем домашнее задание
Добавление учащихся к курсу
Как правило, после создания курса автор создаёт посадочную страницу, в которой кратко представляет описание курса – программу, дату начала и окончания курса, правила работы и требования к обучаемым, ссылку на форму регистрации.
Автор курса отправляет всем прошедшим регистрацию на посадочной странице Код курса (обучающиеся сами добавляются на курс) или вручную приглашает учеников на курс. Как это сделать? Во вкладке “Пользователи” можно увидеть Код курса или пригласить учащихся (по имени или по адресу электронной почты).
Рисунок 12. Приглашаем учащихся на курс
Новый фактор ранжирования Google — Page Experience: как подготовиться и почему это важно делать уже сейчас
28 мая Google анонсировала новый алгоритм ранжирования, который начнёт действовать в 2021 году. Как и было обещано, о крупных апдейтах теперь оповещают заранее. Давайте разберёмся, что нас ждёт, к чему начинать готовиться и почему это важно начать делать уже сейчас.
Обновление Google Page Experience направлено на оценку сайтов с учётом того, как пользователи взаимодействуют с ним. Часть факторов, которые сказываются на взаимодействии пользователей со страницей и влияют на внутрисайтовые поведенческие факторы, становятся подтвержденными сигналами ранжирования.
В целом, всё это уже так или иначе работает в Google. Пожалуй, главное нововведение — CLS в составе блока Core Web Vitals (основные веб-показатели). Разберём их подробнее и рассмотрим рекомендуемые значения.
Метрика отвечает за отображение самых крупных элементов контента на странице. В отличие, например, от времени первой отрисовки контента (FCP), показатель более удобен с точки зрения понимания пользовательского опыта и отвечает за скорость загрузки именно видимой части контента.
Рекомендуемое значение: 2,5 секунды после начала загрузки страницы.
Ниже пример первой отрисовки контента (FCP) и отрисовки основного контента (LCP).
Метрика отвечает за время между первым взаимодействием со страницей и ответом сервера. Взаимодействием, как правило, считается первый клик (на ссылку, кнопку, JS-элемент и прочее).
Показатель FID непосредственно связан со временем блокировки ввода (TBT) — это время между первой отрисовкой контента (FCP) и время для готовности для взаимодействия (TTI).
Измерить можно с помощью Lighthouse от Google, а уменьшить время загрузки поможет:
Новая метрика, помогающая Google оценивать визуальную стабильность страницы, то есть буквально неожиданное изменение страницы без намеренного взаимодействия. Например, непонятное перемещение текста, исчезание или изменение элементов при попытке взаимодействия и другие раздражающие пользователей факторы.
Измеряется частота возникновения таких смещений (проверить можно также с помощью Lighthouse).
Рекомендуемое значение: менее 0,1 (относительная шкала).
Как правило, на возникновение подобных перемещений элементов влияет асинхронная загрузка DOM-элементов, когда подгрузка изображений, шрифтов, видео или рекламных баннеров влияет на отображение нужного пользователю контента, изменяя его изначальное положение.
Речь идёт только о непредсказуемых и неожиданных изменениях. Интерактивные и меняющиеся элементы, которые не мешают пользователю, а улучшают его опыт взаимодействия со страницей, Google только поощряет.
Помимо обновленного блока с основными веб-показателями (Core Web Vitals), апдейт затронет уже знакомые нам параметры, влияющие на поведение пользователей:
Список факторов, которые войдут в состав монома «Page Experience» уже сейчас сказывается на качестве взаимодействия пользователей с вашим проектом и том, как успешно сайт решает задачу пользователя.
Это значит, что улучшив «Page Experience» и факторы, которые влияют на оценку, вы сможете поднять значения как внутрисайтовых поведенческих метрик, так и кликовых. К числу наиболее важных, на которые можно влиять с помощью «Page Experience» можно отнести:
Безусловно, важно заботиться об этих показателях и в текущих реалиях.
Google обещает уведомить вебмастеров за шести месяцев до начала апдейта. Есть время начать оптимизировать скорость сайта, работать над поведенческими и совершенствовать мобильную версию. В этом помогут:
Всем готовности к апдейту и высоких скоростей!
Спасибо, полезная статья
Для владельцев площадок есть решение от смещений макета. Кто знает можно ли это реализовать самому, например, в CSS?
Информационных сайтов это тоже касается?
Как и сейчас: формулы для инфо и коммерческих проектов РАЗНЫЕ, то есть, факторы могут быть одни, а их значимость — чуть ли не противоположная.
В реальности, разделение по формулам ещё более узкое.
Причём тут Яндекс вообще?
Смысл тот же, логика работы современных поисковых систем схожая
Это неправда. Касается это всех сайтов и всех запросов.
Любые другие факторы можно делить на инфо или коммерческие. Скорость загрузки не имеет этой привязки. И касается ранжирования только на мобильном поиске. Потому что довольно сложно сделать долгую загрузку на десктопе. Хотя до сих пор умельцы находятся.
2020 год на дворе, а гугл нас заставляет делать сайты без картинок, с минимальным количеством js и ксс. Любой интерактив на странице карается вычитанием баллов производительности, банальное подключение скрипта аналитики тоже рейтинг подкашивает.
Та нет, всё не так плохо.
Картинок может быть сколько угодно. Сжимаете, откладываете загрузку и используете современные форматы и Гугл не ругается и не отнимает баллы.
Минимальное количество JS? Ну да. А вам бандл на 10 мегабайт охота пропихнуть на сотку?)
CSS минимально? Ну да. А зачем загружать CSS, который не используется на этой странице? Почему нельзя инлайн вписать те стили, которые нужны для отображения экрана?
Этот коммент звучит как:
«2020 год на дворе, а гугл нас заставляет делать качественные сайты, с соблюдением правил для высокой производительности! Вот гады блин!»
Я говорю не про сайты разработанные в сферическом вакууме, специально для прохождения требований гугла. А про реальные проекты, где есть маркетинговые команды которые вас попросят как минимум иметь gtag подключенный + возможно какой-нибудь hotjar + intercom. И вот вы уже получаете на мобиле вместо 100, что-нибудь типо 60-70. Затем вы подключаете кастомный шрифт, очень маленький только нужного вам типа. Затем у вас есть по всему сайту приятные анимации, какой-то интерактив, контактная форма, GDPR баннер. Не сильно длинная страница, с хорошей версткой, где-то инлайновыми небольшими свг иконками, где-то фото галерея возможно(все с отложенной загрузкой как надо и с вебп), но вот вы получаете около 500 Dom елементов и гугл еще вычитает вам рейтинг.
Вот посмотрите примеры реальных сайтов, за которыми стоят большие команды и которые как не крути, а пытаются заботиться о своих сайтах:
Есть и хотджар. И Метрика и гуглтэгменеджер. И в нем пиксели и всё, что надо для крутого маркетолога.
Зеленая зона.
Значит можно работать? Трелло-то зачем вы замеряли? Их когда купил атлассиан, они свой проект с реактивности на джейквери перевели. И стало всё ясно.
Алексей, у вас типичный российский бизнес расчитаный на тупых клиентов. Все бы было хорошо если бы вы не написали.
Но видите в чем дело, hotjar, gtag используют не удовлетворительную cache политику, на которую ругается Google page speed, но у вас он почему-то не ругается 🙂 Что и сразу же подтвердило мою теорию и выше сказанное, так как чтобы это обойти вы специально не подгружаете эти скрипты, когда вы видите что запрос идет от Lighthouse или page speed.
Так что идите в своей шараге дальше людей разводите, а моим проектам такая помощь не нужна.
— Заходим Chrome Inspector
— Вводим network conditions
— Назначаем Custom user agent
— Вводим «Mozilla/5.0 (Linux; Android 6.0.1; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3694.0 Mobile Safari/537.36 Chrome-Lighthouse»
— И смотрим какие-же у нас скрипты начинают
— И ой как странно, куда-то пропал и хотжар и ga, ой да и вообще все js скрипты.
Ой разоблачил. Ой детектиииив.
И правда, они не подгружаются для лайтхаус. А кто вам мешает сделать тоже самое?
При этом, наш сайт полностью работает для лайтхаус и JS внутренний выполняется и не скрыт для ЛХ.
Итог такой. Если вы любите ныть в комментах про то, как несправедлива судьба и какой Гугл нехороший — то у вас это получается очень хорошо. Вы тот самый ёж, который ест кактус и рыдает. Выход есть, и да, он не самый изящный.
Никто не мешает, просто смысла самообманом заниматься не вижу, мухлюя и подстраивая работу сайта под прохождение теста, когда для фактического клиента разницы никакой не будет.
А вы конечно разводить можете и дальше своих клиентов.
Чувак, весь «seo бизнес» в СНГ это шарлатаны. Им бесполезно что-то доказывать, они на этом деньги делают.
