Как убрать CLS и скачки layout в Elementor

Что такое CLS и почему страница «скачет»

Браузер сначала строит страницу на основе доступных HTML и CSS, а затем постепенно добавляет изображения, шрифты, виджеты и данные, которые загружаются отдельно. Если для нового элемента заранее не было предусмотрено место, браузер вынужден изменить геометрию уже видимого контента.

Например, изображение в карточке товара загружается без заданной высоты. До его появления заголовок и кнопка расположены выше, а после загрузки фотографии весь следующий контент смещается вниз. Подобный эффект возникает, когда шрифт изменяет ширину строк, а текст переносится на дополнительную строку.

Важно отличать CLS от обычной анимации. Ожидаемое движение элемента, например плавное открытие меню после клика, не обязательно является проблемой CLS. Критичны именно неожиданные смещения без действия пользователя.

• Изображения, видео и iframe не имеют зарезервированной высоты.
• Динамический блок появляется после получения данных с сервера или стороннего сервиса.
• Поздно загруженный шрифт изменяет ширину текста и высоту заголовков.
• JavaScript после загрузки изменяет отступы, размеры или порядок элементов.
• Рекламные, cookie- или popup-блоки вставляются в поток страницы, а не накладываются поверх него.

Начните с поиска элемента, который вызывает смещение

Не стоит сразу добавлять min-height ко всем секциям. Сначала нужно определить, какой именно элемент изменяет layout. Проверьте страницу в режиме инкогнито или в чистом окне браузера, поскольку кеш, авторизованная панель WordPress и расширения могут повлиять на результат.

В PageSpeed Insights изучите диагностику, связанную со смещением элементов. В Chrome DevTools полезно открыть вкладку Performance, записать загрузку страницы и проанализировать события Layout Shift. При наведении на такое событие браузер подсвечивает элементы, которые сместились.

Тестируйте как минимум мобильную и десктопную версии. На узком экране заголовок может переноситься иначе, изображения — получать другую высоту, а скрытые или мобильные блоки — загружаться по другому сценарию.

• Проверьте страницу после полного очищения кеша, а не только после повторного открытия.
• Сравните результат для нового посетителя и авторизованного пользователя.
• Посмотрите, не смещается ли страница после загрузки cookie-баннера, чат-виджета или аналитического скрипта.
• Отдельно протестируйте страницу без плагинов кеширования и оптимизации, если они меняют порядок загрузки CSS или JavaScript.

Изображения: зарезервируйте место до их загрузки

Самая распространённая причина скачков в Elementor — изображение, пропорции которого браузер не может определить заранее. Загружайте файл правильного размера и используйте подходящий размер в виджете. Большая фотография, уменьшенная только с помощью CSS, увеличивает объём загрузки и не решает проблему геометрии.

Для фотографий в карточках, галереях и превью важно заранее определить соотношение сторон. Это особенно полезно, если все карточки должны иметь одинаковую высоту. Свойство object-fit позволяет заполнить область без искажения изображения, однако необходимо учитывать возможное обрезание важных деталей.

Если Elementor или тема уже выводят width и height для изображения, не переопределяйте их без необходимости. Дополнительный CSS нужен только тогда, когда фактический layout действительно требует единого соотношения сторон.

• Используйте оптимизированные WebP или AVIF, если это поддерживается вашим процессом публикации.
• Не загружайте изображения, которые в несколько раз больше области, в которой они отображаются.
• Для главного изображения, видимого сразу, осторожно применяйте lazy loading: слишком агрессивная отложенная загрузка может ухудшить восприятие первого экрана.
• Для iframe, видео и карт задавайте контейнеру фиксированное или пропорциональное соотношение сторон.

selector img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

Проверьте шрифты, заголовки и отступы

Шрифт может стать источником CLS, если сначала браузер показывает текст системным шрифтом, а затем заменяет его веб-шрифтом. Из-за другой ширины символов меняется количество строк в заголовке, высота текстового блока и положение элементов ниже.

По возможности используйте ограниченное количество начертаний и насыщенностей шрифта. Подключайте только те варианты, которые действительно используются на странице. Локальное размещение шрифтов может уменьшить зависимость от стороннего домена, но само по себе не гарантирует отсутствия смещений.

Не изменяйте через JavaScript размер заголовка, line-height или отступы после загрузки. Стили для разных брейкпоинтов лучше задать в CSS или настройках Elementor до первого рендеринга.

• Проверьте, совпадает ли fallback-шрифт с веб-шрифтом по ширине и пропорциям.
• Избегайте большого количества разных font-weight на одной странице.
• Задайте предсказуемый line-height для заголовков и основного текста.
• Не полагайтесь на JavaScript для измерения текста и последующей корректировки отступов.

Стабилизируйте динамические блоки в Elementor

Динамический контент может поступать из WooCommerce, ACF, плагина событий, виджета отзывов, рекомендаций или внешнего API. Если сначала контейнер пуст, а затем в него вставляется текст, изображение или список, высота секции изменяется уже после отображения страницы.

Для таких блоков необходимо предусмотреть начальную геометрию. Это может быть min-height, фиксированное соотношение сторон, skeleton-заглушка или заранее известный размер компонента. Высоту следует подбирать с учётом реального контента и отдельно проверять на мобильных экранах.

Не используйте чрезмерно большую min-height как универсальное исправление. Пустое пространство, которое остаётся на странице, ухудшает UX и может быть таким же недостатком, как и скачок.

• Задайте min-height для блока, если его примерная высота заранее известна.
• Для карточек в сетке выровняйте область изображения и текста, чтобы одна карточка не сдвигала весь ряд.
• Показывайте заглушку той же формы, что и будущий контент.
• Не вставляйте важные блоки над основным текстом без зарезервированного места.

.dynamic-card {
  min-height: 320px;
}

.dynamic-media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

Баннеры, popup и JavaScript: типичные скрытые причины

Cookie-баннер, рекламный блок или сообщение об акции не должны внезапно вставляться в обычный поток контента. Если такой элемент появляется над страницей после её построения, он сдвигает всё видимое содержимое. Для постоянных сообщений заранее резервируйте область, а для overlay-компонентов используйте позиционирование, которое не толкает соседние блоки.

Отдельное внимание уделите Elementor Motion Effects, скриптам виджетов, sticky-элементам и сторонним сервисам. Анимация должна работать с transform или opacity, а не без необходимости изменять высоту, ширину, margin или положение элементов в потоке.

Если после оптимизации JavaScript проблема появилась или исчезла, это важная подсказка: отложенное выполнение скрипта может изменить момент появления элемента, но не всегда устраняет саму причину. Сначала стабилизируйте layout и только затем настраивайте оптимизацию.

• Не добавляйте верхний баннер после загрузки без заранее выделенной области.
• Проверьте виджеты чата, карт, отзывов, рекламы и социальных лент.
• Для анимаций отдавайте предпочтение transform и opacity.
• Осторожно применяйте отложенное выполнение JavaScript: оно может скрыть проблему во время одного теста, но создать её во время другого.

Финальная проверка после исправлений

После внесения изменений очистите кеш WordPress, кеш плагина оптимизации, CDN и браузера. Если используется генерация или объединение CSS, убедитесь, что оптимизатор создал актуальные файлы. В противном случае вы можете тестировать старую версию стилей.

Повторите проверку в PageSpeed Insights и DevTools Performance. Оценивайте не только итоговый CLS, но и список смещённых элементов. Хороший результат должен быть стабильным при нескольких загрузках, на разных ширинах экрана и при более медленном сетевом соединении.

Проверьте страницу вручную: не перемещается ли кнопка под курсором, не меняется ли высота первого экрана, не появляется ли горизонтальная прокрутка и не перекрывает ли popup основной контент. После этого протестируйте шаблоны, использующие те же виджеты: исправление в одном блоке Elementor может повлиять на другие страницы.

• Проведите отдельные тесты для мобильной и десктопной версий.
• Сравните страницу до и после изменений в Performance.
• Проверьте медленную загрузку шрифтов, изображений и сторонних виджетов.
• Не оценивайте CLS по одному локальному запуску: результаты могут отличаться из-за кеша и сети.