[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"page:\u002Fblog\u002Fcumulative-layout-shift-cls-kak-snizit":3,"crumbs:\u002Fblog\u002Fcumulative-layout-shift-cls-kak-snizit":9},{"path":4,"url":5,"title":6,"description":7,"h1":6,"html":8},"\u002Fblog\u002Fcumulative-layout-shift-cls-kak-snizit\u002F","https:\u002F\u002Fseopeak.ru\u002Fblog\u002Fcumulative-layout-shift-cls-kak-snizit\u002F","Cumulative Layout Shift (CLS): совокупное смещение макета","CLS показывает, насколько блоки страницы неожиданно смещаются. Из-за чего смещается макет и как удержать показатель в пределах 0,1.","\u003Cp>Cumulative Layout Shift, коротко CLS, — совокупное смещение макета. Метрика показывает, насколько блоки страницы сами меняют положение, пока человек её смотрит. Это одна из Core Web Vitals. Хороший CLS — до 0,1 у 75% визитов. От 0,1 до 0,25 показатель средний, выше 0,25 — плохой. Телефон и компьютер считают отдельно.\u003C\u002Fp>\n\u003Cp>В оценку попадает только неожиданный сдвиг. Клик, тап и ввод текста двигают страницу ожидаемо: такие смещения в ближайшие 500 миллисекунд в CLS не входят. Как метрика держит адрес в группе эффективных URL, разобрано в материале \u003Ca href=\"\u002Fblog\u002Fcore-web-vitals-kak-uvelichit-chislo-effektivnyh-url\u002F\">Core Web Vitals: как увеличить число эффективных URL\u003C\u002Fa>.\u003C\u002Fp>\n\n\u003Ch2>Откуда берётся число\u003C\u002Fh2>\n\u003Cp>У каждого сдвига две доли. Первая — какая часть экрана затронута. Вторая — как далеко уехал самый подвижный блок относительно большей стороны экрана. Доли перемножают. Сдвиги, между которыми меньше секунды, складываются в одно окно, и окно не длиннее 5 секунд. В зачёт идёт самое тяжёлое окно за визит, а не сумма всех смещений с момента открытия.\u003C\u002Fp>\n\u003Cp>Один баннер, выехавший над текстом на половину экрана, портит CLS сильнее, чем серия мелких движений далеко внизу. Блок за пределами экрана оценку не увеличивает: человек его смещения не видит.\u003C\u002Fp>\n\n\u003Ch2>Из-за чего макет смещается\u003C\u002Fh2>\n\u003Cul>\n\u003Cli>Картинка, видео или iframe без ширины и высоты. Браузер не знает пропорцию, рисует текст, файл доезжает — текст уезжает вниз.\u003C\u002Fli>\n\u003Cli>Реклама, карта, плеер и чужой виджет. Блок вставляют туда, где контент уже стоит, и всё под ним опускается.\u003C\u002Fli>\n\u003Cli>Шрифт. Страница сначала рисуется запасным шрифтом, затем приезжает свой. Строка становится выше или шире, заголовок переносится, блоки под ним смещаются.\u003C\u002Fli>\n\u003Cli>Скрипт дорисовывает шапку, полоску согласия, слайдер или блок рекомендаций над уже видимым текстом. Шапка меняет высоту после загрузки меню — прыгает весь первый экран.\u003C\u002Fli>\n\u003Cli>Стили приходят поздно. Сначала страница в голом HTML, потом CSS задаёт другие отступы, размеры карточек и сетку колонок.\u003C\u002Fli>\n\u003Cli>Анимация через top, height, margin или width. Эти свойства двигают соседей. Transform и opacity документ не перестраивают.\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Ch2>Как снизить по шагам\u003C\u002Fh2>\n\u003Col>\n\u003Cli>У каждой картинки, видео и iframe в HTML укажите width и height — реальные пропорции файла. В CSS оставьте height: auto и ограничение по ширине. Место будет занято ещё до загрузки файла. То же для кадров слайдера: пустой слайд не должен иметь нулевую высоту.\u003C\u002Fli>\n\u003Cli>Под рекламу и вставки заранее поставьте контейнер с min-height того размера, который блок займёт. Если объявления нет, контейнер не схлопывайте: схлопывание — такой же сдвиг.\u003C\u002Fli>\n\u003Cli>Новые блоки ставьте ниже уже показанного содержимого или поверх страницы. Полоска согласия, чат и кнопка «наверх» — с position: fixed. Они не должны отодвигать заголовок.\u003C\u002Fli>\n\u003Cli>Для первого экрана оставьте один файл шрифта и предзагрузите его. Запасной шрифт подберите близким по ширине букв и высоте строки. Текст не прячьте, пока файл едет: пустой блок, который потом заполняется, тоже толкает соседей.\u003C\u002Fli>\n\u003Cli>Стили первого экрана отдавайте сразу вместе со страницей. Файл CSS, который меняет высоты и сетку, не должен приезжать после текста.\u003C\u002Fli>\n\u003Cli>Появление блоков анимируйте через transform и opacity. Меню, вынутое из потока, не раздвигает документ, когда открывается.\u003C\u002Fli>\n\u003Cli>Ищите ошибку в шаблоне, а не на одной странице. Если прыгают все карточки, все статьи или все посадочные, общий источник один: галерея, шапка, рекламное место или шрифт.\u003C\u002Fli>\n\u003Cli>Сверяйтесь с полевыми данными. В отчёте Core Web Vitals цель — CLS до 0,1 у большинства визитов, отдельно на телефоне и на компьютере. Лабораторный прогон показывает, какой блок дёрнулся. В зачёт поисковика идут визиты людей.\u003C\u002Fli>\n\u003C\u002Fol>\n\n\u003Ch2>Что проверить после правки\u003C\u002Fh2>\n\u003Cp>Откройте страницу как новый посетитель, без кэша, на той ширине, где сдвиг заметнее. Обычно это телефон. Найдите блок, который дёрнулся первым: картинка, шапка, баннер или заголовок после подмены шрифта. Зарезервируйте место именно ему. После выкладки шаблона нужны новый обход и новые визиты: старые заходы ещё держат прежний CLS, и цифра в отчёте меняется не в минуту публикации.\u003C\u002Fp>\n\u003Cp>Крупный элемент первого экрана, из-за которого часто страдают и скорость отрисовки, и стабильность макета, разобран отдельно: \u003Ca href=\"\u002Fblog\u002Flargest-contentful-paint-lcp-kak-snizit\u002F\">Largest Contentful Paint (LCP): как снизить\u003C\u002Fa>.\u003C\u002Fp>\n",[10,13],{"path":11,"label":12},"\u002Fblog","Блог",{"path":14,"label":6},"\u002Fblog\u002Fcumulative-layout-shift-cls-kak-snizit"]