cls что это значит
Что такое 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 и как их исправить».
Как оптимизировать 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 и избавиться от внезапных сдвигов
На большинстве сайтов можно избежать всех неожиданных сдвигов макета благодаря этим правилам:
Расскажите в комментариях, о чем еще вам было бы интересно почитать в блоге по теме навигации и юзабилити или по другим темам о развитии сайтов.
Система общих типов CTS и спецификация CLS
Система общих типов CTS
Чтобы сделать это без каких-либо затруднений, требуется способ описания всех поддерживаемых типов. Именно за это и отвечает система общих типов CTS. Она предназначена для выполнения следующих задач:
Система CTS определяет две разновидности типов, которые должны поддерживаться: типы значений и ссылочные типы. Имена разновидностей указывают на их определения.
Объекты ссылочных типов представлены ссылкой на фактическое значение объекта. Здесь ссылка аналогична указателю в C/C++. Она просто указывает на адрес памяти, где находятся значения объектов. Это оказывает значительное влияние на способ использования этих типов. Если назначить ссылочный тип переменной, а затем передать эту переменную, например, в метод, любые изменения объекта будут отражены на основном объекте. Копирование при этом не выполняется.
В типах значений объекты, наоборот, представлены своими значениями. Назначение типа значения переменной, по сути, равнозначно копированию значения этого объекта.
Система CTS определяет несколько категорий типов, каждый из которых имеет собственную семантику и способ использования:
Система CTS также определяет все другие свойства типов, такие как модификаторы доступа, которые являются допустимыми членами типа, порядок наследования и перегрузки и т. п. К сожалению, детальное рассмотрение этих аспектов выходит за рамки данной вводной статьи, но вы можете обратиться к разделу Дополнительные ресурсы в конце статьи, где приведены ссылки на более подробные материалы по этой теме.
Спецификация CLS
Для получения общих сведений обо всех функциях CLS см. документы в приведенном ниже разделе Дополнительные ресурсы.
Оптимизация CLS: как измерить и улучшить этот показатель
Автор: Аймен Лукил (Aymen Loukil) – консультант по SEO, предприниматель и бывший разработчик.
Совокупное смещение макета (Cumulative Layout Shift, CLS) – это одна из самых важных метрик пользовательского опыта и веб-производительности в настоящее время.
CLS является частью Core Web Vitals (LCP, FID и CLS) – набора показателей для оценки UX, предложенного Google, и измеряет стабильность шаблона страницы.
В статье вы узнаете подробнее о том, что представляет собой CLS, как измерить этот показатель, и как его улучшить.
Что такое CLS?
CLS или совокупное смещение макета – это новая метрика производительности и пользовательского опыта, которая призвана отражать визуальную стабильность макета веб-страницы. Этот показатель сообщает, как часто пользователь сталкивается с неожиданными смещениями макета при загрузке страницы.
Мы все сталкивались с сайтами, особенно на мобильных устройствах, страницы которых сдвигались вверх, вниз, вправо или влево во время загрузки.
Появляется текст, вы начинаете читать статью и тут загружается изображение и сдвигает текст вниз. Вы думаете, что теперь уже всё загрузилось, хотите нажать на «Подробнее», а страница снова сдвигается и вместо нужно ссылки вы нажимаете на рекламное объявление. Знакомая ситуация? Это очень раздражает.
Что касается оценки CLS, то низкое или равное нулю значение свидетельствует о хорошем пользовательском опыте, а высокое – о плохом.
Хороший, средний или плохой CLS?
Хороший показатель CLS должен быть меньше 0,1. При этом на уровне домена важно добиться 75-го процентиля загрузки страницы для мобильных и десктопных пользователей.
По сравнению с LCP показатель CLS имеет меньший вес в расчёте общей оценки по сайту в Lighthouse:
Как измерить CLS?
Совокупный сдвиг макета можно измерить как в синтетической (лабораторной) среде, так и в «полевых» условиях (мониторинг поведения реальных пользователей).
CLS в синтетических инструментах:
СОВЕТ: кликните на «View JSON result», чтобы просмотреть подробные данные по сдвигам макета:
CLS в «полевых» условиях:
medium_cls AS needs_improvement,
Какие элементы смещаются?
Чтобы узнать, какие элементы сдвигаются, выполните аудит в Lighthouse и прокрутите отчёт вниз до раздела «Устраните большие смещения макета». Кликните по нему, чтобы увидеть список элементов.
СОВЕТ: закрепите панель Chrome DevTools слева или справа, чтобы при наведении курсора на элементы в отчёте Lighthouse вы могли видеть их на странице.
Как улучшить CLS
Cls что это значит
Смотреть что такое «CLS» в других словарях:
CLS — may refer to: Contents 1 Academic fields 2 Educational institutions 3 Academic associations, divisions, programs and facilities 4 Societies and assoc … Wikipedia
CLS — abbreviation for Community Legal Service. Collins dictionary of law. W. J. Stewart. 2001. CLS Christian Legal Society … Law dictionary
CLS — [Abk. für Clear Screen, dt. »lösche Bildschirm«], die Anweisung zum Löschen des Bildschirminhalts. Sie ist Bestandteil einiger Programmiersprachen und findet sich bei manchen Betriebssystemen (z. B. DOS). Bei manchen EDV Systemen mit… … Universal-Lexikon
CLS — Abk. für Continuous Linked Settlement. 1. Begriff: CLS ist ein privatwirtschaftliches, globales System zur Abwicklung und Verrechnung von Devisenhandelstransaktionen. 2. Entwicklung: 1997 wurde die CLS Service Limited (CLSS) mit Sitz in London… … Lexikon der Economics
CLS — Die Abkürzung CLS steht für: Canadian Light Source, ein Synchrotron der 3. Generation an der University of Saskatchewan, in Saskatoon, Kanada clear screen, Befehl im Betriebssystem MS DOS und teilweise in der Programmiersprache BASIC sowie in C++ … Deutsch Wikipedia
CLS — Cette page d’homonymie répertorie les différents sujets et articles partageant un même nom. Sigles d’une seule lettre Sigles de deux lettres > Sigles de trois lettres Sigles de quatre lettres … Wikipédia en Français
CLS — contracted logistic support … Military dictionary
CLS — Common Language Specification (Computing » General) Clinical Laboratory Science (Academic & Science » Universities) **** Celestica, Inc. (Business » NYSE Symbols) **** Continuous Linked Settlement (Community » Law) **** Clinical Laboratory… … Abbreviations dictionary
CLS — cafe au lait spot; classical least square; Clinical Laboratory Scientist; Coffin Lowry syndrome; Cornelia de Lange syndrome … Medical dictionary
CLS — • ConnectionLess Service • Clear Screen • Common Language System ( > IEEE Standard Dictionary ) • Closed Loop System (Reaktortechnik > IEEE Standard Dictionary ) • Clear and Substract (Assembleranweisung) • Concept Learning System •… … Acronyms