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

CLS и «прыжки». Когда блоки смещаются при загрузке, пользователь промахивается по кнопке; заказчику достаточно знать причины и что попросить у подрядчика.

Где я бы подключился сам

Разработчик резервирует место под медиа, настраивает шрифты и откладывает тяжёлые виджеты; это типичная доработка за 2-4 часа с измеримым CLS до/после. Ориентиры по срокам и бюджету - на странице цен, услуги - в разделе услуг.

Страница «дёргается» - это не только раздражение

CLS (Cumulative Layout Shift) - метрика, насколько элементы смещаются во время загрузки. Баннер внезапно поднялся, кнопку «Отправить» заменила реклама, текст уехал под шапку.

Короче.

Google учитывает CLS в Core Web Vitals, пользователи уходят, не дочитав.

Я объясняю заказчику без формул: «страница прыгает, потому что место под картинку не зарезервировали или шрифт подгрузился позже».

Типичные причины CLS

• Картинки без width/height или aspect-ratio.
• Шрифты webfont без fallback размеров.
• Баннеры и cookie-bar, вставляющиеся сверху.
• Lazy load без placeholder высоты.
• Контент из API, который приходит позже и раздвигает блоки.

Как увидеть проблему

PageSpeed Insights, Lighthouse mobile, или глазами: откройте сайт на медленном 3G в DevTools. Запись в Performance в Experience в Layout Shifts.

Проверено на живых проектах.

Заказчику достаточно скрина от подрядчика «CLS 0.05, было 0.35».

Картинки: резерв высоты

<img src="hero.jpg" width="1200" height="675"
  alt="Офис" loading="lazy"
  style="aspect-ratio: 1200/675; width: 100%; height: auto;">

Или CSS aspect-ratio: 16/9 на контейнере. Про картинки - скорость и картинки, lazy loading.

Шрифты

Google Fonts без font-display: swap и без похожего системного fallback дают скачок строк. Подрядчик настраивает subset кириллицы, preload критичного woff2, fallback Arial/ sans-serif с близкими метриками.

На мобиле пользователь тапнул «Записаться», в этот момент подгрузился отзыв и кнопка уехала. Открылась не та ссылка.

Сторонние виджеты

Jivo, chat, карта Yandex на первом экране, A/B скрипты, резервируйте min-height под виджет или грузите ниже fold.

Не теория.

Каждый «подключим метрику и чат одной строкой» - кандидат на CLS.

Cookie и promo bar

Плашка «мы используем cookies» без fixed height сдвигает весь контент, лучше overlay или заранее padding-top на body равный высоте бара.

Что попросить у подрядчика

• Lighthouse mobile до приёмки, CLS в зелёной зоне.
• Hero без сдвига при загрузке шрифта.
• Нет неожиданных insertAbove контента после load.

CLS и реклама

Если лендинг под контекст, прыжки бьют по конверсии сильнее, чем по SEO. Исправление часто дешевле, чем слив бюджета. Лендинг не продаёт.

Не путать с LCP

LCP - как быстро появился главный контент. CLS - стабильность после появления. Оба важны. Можно быстро показать hero и всё равно дёрнуть страницу отзывами снизу.

Проверка после правок

Клиент добавил GIF в hero через админку без размеров - CLS вернулся. После контентных правок на WP проверяйте mobile снова.

Итоговая мысль

«Прыгает» - техническая проблема с понятным лечением. В приёмку добавьте: «нет заметного сдвига при загрузке на iPhone». Детали - разработчику, критерий - вам. Хостинг - база скорости.

CLS в PageSpeed для заказчика

Отчёт показывает элементы-виновники: «Image elements do not have explicit width and height», скриншот от dev достаточен, кодить не нужно, при этом попросите «исправить top-3 CLS issues» до приёмки.

Рекламные сети и A/B часто ломают CLS. Если маркeting вставляет скрипты без dev, договоритесь: только через tag manager с placeholder.

Шрифты и brand book

Кастомный brand font красив, но без size-adjust fallback даёт скачок, дизайнер и dev должны согласовать fallback заранее, не после вёрстки.

На iOS и Android CLS проявляется по-разному, проверяйте оба, не только Chrome desktop.

Связь CLS и конверсии

Сложно доказать «минус 10% заявок из-за CLS 0.2», но UX-логика ясна: пользователь не попадает в кнопку. Исправление дешевле, чем спор о цифрах. Lazy load делайте с местом под контент.

Как бы я сделал

На созвонах я часто возвращаюсь к этой теме, когда заказчик говорит «у нас всё просто». Простота редко означает «без последствий»: у простого лендинга всё равно есть домен, ssl, форма, аналитика и договорённости с подрядчиком. Я обычно прошу зафиксировать решения письменно и сверить их с ТЗ, бюджетом и чеклистом перед запуском. Так проще передать проект новому исполнителю и не спорить «мы думали иначе» через три месяца.

Если вы впервые заказываете сайт, полезно прочитать как купить сайт для бизнеса и заглянуть в услуги и цены за ориентирами по срокам. Вопросы до оплаты собраны в материале что спросить у разработчика. Это не бюрократия, а способ не потерять деньги на мелочах, которые всплывают в день запуска рекламы.

Быстрый фикс для заказчика

Pop-up «подпишитесь» через 2 секунды после загрузки - частый виновник CLS, cookie-баннер, который толкает контент вниз без резервирования места - второй, плюс попросите отложить pop-up на scroll или зарезервировать высоту баннера в CSS.

.cookie-bar { min-height: 72px; }
img { width: 100%; height: auto; aspect-ratio: 16/9; }

Разработчик проверит в Lighthouse в CLS. Цель для лендинга: меньше 0.1.

Шрифты и CLS

Кастомный web-font без font-display: swap и без резерва размеров сдвигает текст при загрузке. Я подключаю fallback с похожими метриками или system font для hero.

Реклама и embed видео с YouTube в hero - частый CLS на медиа-сайтах. Для лендинга бизнеса: статичное изображение вместо autoplay iframe.

Как проверить без Lighthouse

Chrome DevTools в Performance, записать загрузку, смотреть Layout Shift маркеры. Или расширение Web Vitals. Заказчику достаточно попросить подрядчика скрин CLS < 0.1 mobile.

Связь CLS и конверсии

Пользователь нажал «Отправить», блок сдвинулся, палец попал на «Отмена». Редко, но на mobile заметно. Фикс CLS - не только SEO, но и UX формы. Про Core Web Vitals и рекламу.

Что сделать сразу

Я solo-разработчик и каждый такой проект веду сам: созвон, оценка, staging, выкладка, передача доступов. Заказчику не нужно разбираться в терминах, но нужно понимать решения: что вы выбрали, почему, что проверить при приёмке. Я обычно фиксирую это в переписке или в ТЗ, чтобы через полгода не вспоминать «а мы же договаривались».

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

Что отправить себе в Telegram

Один файл или сообщение: решение, срок, цена, что не входит, кто даёт контент, как принимаем. Я обычно дублирую это в email после созвона, чтобы обе стороны могли процитировать. Без записи «мы думали иначе» появляется на финальной оплате.

Hosting, ssl, домен, форма, Метрика - базовая инфраструктура любого сайта, даже если статья про другую тему. См. hosting и ssl и доступы. Покупка сайта целиком - порядок шагов.

На практике я советую не откладывать проверку «на потом»: один вечер на чеклист дешевле недели переделок после запуска рекламы. Запишите дату проверки и ответственного в том же файле, где храните доступы к сайту.

Если что-то из списка выше кажется «мелочью», вспомните: на запуске рекламы мелочи превращаются в потерянные заявки. Я обычно прохожу этот блок с заказчиком за один созвон и отмечаем галочки в общем документе.

План на ближайшие дни

1. Откройте сайт на телефоне и посмотрите, дёргается ли первый экран.
2. Попросите отчёт Lighthouse mobile с CLS до приёмки.
3. Не добавляйте тяжёлые виджеты на первый экран без разработчика.
4. При правках картинок указывайте пропорции или используйте те же слоты.
5. Свяжите CLS с заявками: неудобная кнопка = меньше лидов.
6. Проверьте сайт после любой новой интеграции (чат, A/B).

Что тормозит сдачу

• Вставлять большие картинки без размеров и aspect-ratio.
• Грузить chat и карту в hero без резерва места.
• Считать CLS «только для SEO», игнорируя мобильную конверсию.
• Добавлять контент через админку, ломая вёрстку.
• Не тестировать на реальном мобильном интернете.

На созвонах это всплывает в первые десять минут.