Вы заходите на сайт, начинаете читать первый абзац, тянетесь нажать кнопку «Купить», и в этот момент сверху подгружается баннер, весь текст прыгает вниз, а палец попадает в рекламу. Знакомо? Вот это и есть сдвиг макета, и метрика CLS измеряет ровно его.
CLS (Cumulative Layout Shift, по-русски «совокупный сдвиг макета») показывает, насколько сильно элементы страницы дёргаются и переезжают, пока она грузится. Чем меньше прыжков, тем выше оценка. Google и Яндекс учитывают CLS при ранжировании, так что плохая стабильность бьёт сразу по двум фронтам: и пользователь злится, и сайт проседает в выдаче.
В этой статье разберём по-человечески: откуда берётся сдвиг, как найти конкретного виновника прямо в браузере и чем его лечить. Будет таблица «причина → решение», отдельный разбор для WordPress и Тильды и список ошибок, которые допускают почти все.
КурсыСравнение 21 курса по WordPressЦены, школы, длительность, рассрочка
CLS — одна из трёх ключевых метрик визуальной стабильности в наборе Core Web Vitals. Что это за набор целиком и как измерять остальные показатели, мы подробно разобрали в обзорной статье про Core Web Vitals. Здесь же копаем только в сдвиг макета, не повторяя основы.
Статья пригодится не только верстальщикам. Сдвиг макета чинят и владельцы сайтов на конструкторах, и контент-менеджеры, и SEO-специалисты. Если хочется освоить вёрстку системно, загляните в нашу подборку курсов по frontend-разработке: там собраны программы от первых тегов до продвинутой оптимизации. А чтобы понимать, из чего вообще состоит внешний вид страницы, полезно сначала прочитать, что такое CSS и как он управляет расположением блоков.
КурсыСравнение 10 курсов по DevToolsЦены, школы, длительность, рассрочка
Что такое CLS и сдвиг макета простыми словами
Представьте лист бумаги, на котором текст сам собой переползает с места на место, пока вы читаете. Раздражает? На сайте происходит то же самое, только из-за того, что браузер рисует страницу по частям: сначала текст, потом картинки, потом шрифты и реклама. Каждый раз, когда новый элемент «толкает» уже показанный контент, случается сдвиг макета.
CLS складывает все такие сдвиги за время жизни страницы в одно число. Это число безразмерное, не секунды и не пиксели. Браузер оценивает, насколько крупный кусок экрана уехал и как далеко. Пороги от Google простые:
- Хорошо — CLS меньше 0,1
- Нужно улучшить — от 0,1 до 0,25
- Плохо — больше 0,25
Цель — удержать показатель ниже 0,1 минимум у 75 % посещений. Если PageSpeed Insights светит красным именно по CLS, значит контент на вашем сайте прыгает заметно для людей, а не только для роботов.
Главное про CLS. CLS измеряет стабильность картинки, а скорость загрузки тут ни при чём. Сайт может грузиться быстро и всё равно дёргаться, если элементы прыгают при отрисовке.
Откуда берётся сдвиг макета: пять главных виновников
Почти все проблемы с CLS сводятся к пяти причинам. Разберём каждую, чтобы вы узнали свою.
Картинки без заданных размеров
Самый частый виновник, на него приходится около 60 % всех сдвигов. Браузер встречает тег картинки, но не знает, сколько места она займёт, поэтому рисует на её месте ничего. Когда файл наконец загрузился, картинка раздвигает соседний контент и всё уезжает вниз.
Лечится тем, что вы заранее сообщаете браузеру ширину и высоту через атрибуты width и height прямо в теге. По ним браузер вычисляет соотношение сторон (aspect-ratio, отношение ширины к высоте) и резервирует ровно столько места, сколько нужно, ещё до загрузки файла.
Шрифты, которые подгружаются позже текста
Браузер сначала показывает текст системным шрифтом, а когда докачается ваш фирменный, перерисовывает абзацы заново. Буквы у разных шрифтов разной ширины и высоты, поэтому строки переразбиваются, и блок текста меняет размер. Это явление называют FOUT (Flash of Unstyled Text, вспышка нестилизованного текста) или FOIT (Flash of Invisible Text, когда текст сначала вообще невидим).
Тут помогает свойство font-display в CSS и предзагрузка шрифта (preload, ранняя загрузка файла до того, как он понадобится). Конкретные значения разберём в разделе с решениями ниже.
Реклама и баннеры
Рекламный блок приходит с чужого сервера и появляется с задержкой. Если под него не отведено фиксированное место, он вставляется в готовую страницу и сдвигает всё, что было ниже. Особенно болезненно на мобильных, где экран узкий и любой баннер занимает половину высоты.
Встройки: видео, карты, виджеты
Встройка (iframe, окно с чужой страницей внутри вашей) ведёт себя как реклама: видео с YouTube, карта Яндекса, форма подписки или виджет отзывов грузятся отдельно и часто без заранее известной высоты. Пока их нет, места под них тоже нет, а как только появились, толкают контент.
Поздний динамический контент
Это всё, что JavaScript дорисовывает уже после открытия страницы: плашка с cookie, всплывающее уведомление, блок «Похожие товары», подгрузка следующих карточек. Если такой блок вставляется поверх или перед уже прочитанным контентом, человек теряет место, где читал.
Простой тест. Откройте свой сайт на телефоне с медленным интернетом и просто смотрите на экран первые пять секунд, ничего не нажимая. Всё, что прыгнуло, — это и есть ваш CLS.
Как найти, что именно сдвигается, в DevTools
Чинить вслепую бесполезно. Сначала надо увидеть, какой конкретно элемент виноват. Для этого есть бесплатный инструмент прямо в браузере Chrome, он называется DevTools (панель разработчика, открывается клавишей F12).
Панель Performance — показывает сдвиги наглядно
Откройте DevTools, перейдите на вкладку Performance и нажмите кнопку перезагрузки с записью. Браузер заново загрузит страницу и нарисует временную шкалу. На ней есть дорожка Layout Shifts с фиолетовыми блоками: каждый блок — это один сдвиг. Кликните по нему, и DevTools подсветит на странице тот элемент, который уехал, и покажет, насколько сильно. Так вы за минуту находите главного виновника, а не гадаете.
Расширение Web Vitals — счётчик в реальном времени
Бесплатное расширение Web Vitals для Chrome показывает текущий CLS прямо поверх страницы. Удобно, чтобы поймать сдвиги, которые случаются уже после загрузки: когда вы скроллите и подгружаются новые блоки или когда срабатывает всплывающее окно.
PageSpeed Insights: поле против лаборатории
Сервис PageSpeed Insights показывает два разных CLS, и их часто путают. Сверху — полевые данные (field data, или CrUX): это то, что увидели живые посетители Chrome за последние 28 дней. Снизу — лабораторные данные (lab data): один тестовый прогон в стерильных условиях.
Числа почти всегда расходятся, и это нормально. Лаборатория замеряет только загрузку, а поле — всю жизнь страницы, включая скролл и клики. Если в лаборатории CLS хороший, а в поле плохой, ищите сдвиги, которые происходят уже после открытия: подгрузка по скроллу, отложенная реклама, поздние виджеты. Верить при оптимизации стоит полевым данным, потому что это опыт настоящих людей.
Как убрать сдвиг макета: таблица «причина → решение»
Собрали все приёмы в одну таблицу, чтобы вы сразу нашли решение под свою причину. Ниже таблицы разберём ключевые приёмы подробнее.
| Причина сдвига | Что сделать |
|---|---|
| Картинки и видео без размеров | Прописать атрибуты width и height в теге, добавить в CSS height: auto |
| Блок неизвестной высоты (галерея, слайдер) | Задать aspect-ratio в CSS, чтобы зарезервировать соотношение сторон |
| Реклама и баннеры | Отвести фиксированное место через min-height контейнера, не схлопывать его, если реклама не загрузилась |
| Встройки (видео, карты, виджеты) | Обернуть в контейнер с заданными размерами или aspect-ratio |
| Шрифты моргают и переразбивают текст | font-display: optional либо swap + preload для главного шрифта, подгонка запасного через size-adjust |
| Анимация двигает элементы | Анимировать через transform, а не через top, left, width, height |
| Возврат «назад» перерисовывает страницу | Не блокировать bfcache (кэш страниц для кнопок «назад» и «вперёд») |
Теперь по главным приёмам словами.
Размеры для всех картинок. Это решение закрывает большую часть проблем разом. Пишете в теге <img src="foto.jpg" width="640" height="360">, и браузер сразу резервирует прямоугольник нужной формы. В CSS при этом оставляете img { height: auto; width: 100% }, чтобы картинка оставалась резиновой на мобильных. Соотношение сторон браузер берёт из атрибутов и резервирует место, пока файл грузится.
Резервирование места под рекламу и встройки. Если знаете, что блок будет высотой 250 пикселей, задайте контейнеру min-height: 250px заранее. Тогда место под баннер будет пустым ровно до его появления, и контент не прыгнет. Важный нюанс: если реклама не загрузилась, не схлопывайте контейнер обратно, иначе получите сдвиг в другую сторону.
Правильная загрузка шрифтов. Значение font-display: optional говорит браузеру: если фирменный шрифт не успел прийти к первой отрисовке, покажи запасной и больше не перерисовывай. Сдвига не будет совсем. Если фирменный шрифт показать критично, берите swap вместе с preload и подгоняйте метрики запасного шрифта через size-adjust, чтобы замена прошла без скачка высоты строк.
Анимация через transform. Когда нужно подвинуть или увеличить элемент, не трогайте свойства top, left, width и height: они заставляют браузер пересчитывать раскладку всей страницы. Используйте transform: translate() для сдвига и transform: scale() для масштаба: такая анимация рисуется отдельным слоем и соседний контент не двигает.
Совет на каждый день. Возьмите за правило: ни одна картинка не уходит в вёрстку без
widthиheight. Только эта привычка часто вытягивает CLS из красной зоны в зелёную.
Частые виновники на WordPress и Тильде
Если вы не пишете код руками, проблема и решение выглядят иначе. Разберём два самых массовых случая.
WordPress. Чаще всего сдвиг тут дают три вещи. Первая — реклама и блоки от плагинов, которые вставляются после загрузки; ищите в настройках плагина опцию зарезервировать место или отключите лишнее. Вторая — шрифты из темы, которые грузятся поздно; многие плагины оптимизации (например, кэширующие) умеют добавлять предзагрузку шрифтов в один клик. Третья — слайдеры и галереи без фиксированной высоты; в настройках блока почти всегда есть поле высоты, задайте его. Если копаете тему глубже, начните с технического аудита сайта, чтобы увидеть полную картину проблем.
Тильда. Конструктор сам проставляет размеры большинства картинок, поэтому базовый CLS обычно неплохой. Прыжки чаще дают всплывающие формы, поп-апы и встроенный чужой код в блоке T123 (вставка HTML). Проверьте поп-апы: если они появляются сразу при загрузке, перенесите показ на действие пользователя или на таймер. Для встроенных видео и виджетов задавайте высоту контейнера в настройках блока.
Частые ошибки, из-за которых CLS не улучшается
Эти три ошибки встречаются чаще всего, и каждая способна свести оптимизацию на нет.
Ошибка 1 — ленивая загрузка на самый верх страницы. Lazy loading (отложенная загрузка картинок, пока до них не доскроллили) полезен внизу, но если повесить его на главную картинку первого экрана, она загрузится с задержкой и устроит сдвиг ровно там, где его виднее всего. Верхнюю картинку грузим сразу, без lazy.
Ошибка 2 — схлопывание зарезервированного места. Отвели под баннер высоту, а когда он не пришёл, обнулили контейнер. Получился сдвиг наоборот. Резерв должен оставаться на месте независимо от того, загрузилось содержимое или нет.
Ошибка 3 — анимация через изменение раскладки. Красивое выезжающее меню, сделанное через смену left или height, толкает соседей при каждом кадре. Переделайте на transform, и эффект останется, а сдвиги исчезнут.
Где научиться вёрстке и фронтенду
Прописать пару атрибутов у картинок может и новичок, но если хочется уверенно удерживать CLS в зелёной зоне на любом проекте, нужна системная база по вёрстке и CSS. Чтобы не собирать знания по обрывкам форумов, проще один раз пройти нормальный курс, где разложат и раскладку страницы, и оптимизацию, и работу с инструментами браузера.
| Курс | Школа | Стоимость со скидкой | В рассрочку | Длительность | Обзор курса от Checkroi |
|---|---|---|---|---|---|
| Веб-вёрстка Перейти на сайт курса |  Skillbox | 145 881 ₽ | 2818 ₽/мес. | 3 месяца | Обзор курса |
| Frontend-разработчик с нуля Перейти на сайт курса |  Нетология | 120 700 ₽ | 5385 ₽/мес. | 10 месяцев | Обзор курса |
| Frontend-разработчик Мастер Перейти на сайт курса |  GeekBrains | 264 780 ₽ | 7355 ₽/мес. | 24 месяца | Обзор курса |
| Профессия «Frontend-разработчик с нуля до PRO» Перейти на сайт курса | Skillbox | 137 500 ₽ | 4911 ₽/мес. | 10 месяцев | Обзор курса |
| Профессия: Frontend-разработчик Перейти на сайт курса |  ProductStar | 89 088 ₽ | 36 ₽/мес. | 8 месяцев | Обзор курса |
| Онлайн-курс Frontend-разработчик Перейти на сайт курса |  Бруноям | 63 900 ₽ | 5325 ₽/мес. | 8 месяцев | Обзор курса |
| Факультет frontend-разработки Перейти на сайт курса | GeekBrains | 179 600 ₽ | 4989 ₽/мес. | 12 месяцев | Обзор курса |
| Фронтенд-разработчик Перейти на сайт курса |  Синергия | 97 356 ₽ | 4057 ₽/мес. | 6 месяцев | Обзор курса |
| Мидл фронтенд-разработчик Перейти на сайт курса |  Практикум | 116 000 ₽ | 18 500 ₽/мес. | 5 месяцев | Обзор курса |
| Интенсив: фронтенд-разработка с ИИ Перейти на сайт курса |  Компьютерная академия TOP | Бесплатно | 4560 ₽/мес. | 3 месяца | Обзор курса |
Больше программ — в полном каталоге курсов по Frontend-разработке
Сдвиг макета — лишь одна из метрик скорости. Когда разберётесь с ним, посмотрите соседние материалы хаба: про общую картину в обзоре Core Web Vitals и про скорость отрисовки главного контента в статье как улучшить LCP. Глубокий технический разбор всех приёмов борьбы со сдвигом есть и в официальной документации Google на web.dev.
![Обложка: Как улучшить INP (Interaction to Next Paint) в [current year]](https://selcdn.checkroi.ru/wp-content/uploads/og-images/og-cover-77885-1781094486.webp "Статья: Как улучшить INP (Interaction to Next Paint) в 2026")
![Обложка: Как уменьшить TTFB (время до первого байта) в [current year]](https://selcdn.checkroi.ru/wp-content/uploads/og-images/og-cover-77892-1781094414.webp "Статья: Как уменьшить TTFB (время до первого байта) в 2026")
![Обложка: Как ускорить сайт и улучшить Core Web Vitals в [current year]](https://selcdn.checkroi.ru/wp-content/uploads/og-images/og-cover-77863-1781090788.webp "Статья: Как ускорить сайт и улучшить Core Web Vitals в 2026")
