Скачущая вёрстка: почему блоки сдвигаются при загрузке и клиент нажимает не туда

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

Такое поведение называют скачущей вёрсткой, а в технической документации поисковых систем оценивают показателем смещения макета. Это один из самых недооценённых дефектов сайта: его трудно заметить на быстром компьютере владельца, но он ощутим на телефоне клиента с обычным мобильным интернетом. В статье мы разберём, почему блоки сдвигаются, как это проверить в Яндекс.Вебмастере и в браузере, как исправить в ХостСМС и других системах и как связать устранение дефекта с реальными заявками.

Что такое скачущая вёрстка и чем она вредит бизнесу

Страница загружается не мгновенно. Сначала приходит разметка, потом по очереди подгружаются стили, шрифты, картинки, скрипты и сторонние виджеты. Браузер показывает посетителю то, что уже получил, и перестраивает страницу по мере поступления новых данных. Если для элементов, которые ещё не пришли, заранее не зарезервировано место, весь остальной контент съезжает вниз или в сторону, когда они появляются. Именно это посетитель и воспринимает как «скачок».

Вред от такого поведения многогранен. Во-первых, ошибочные нажатия. На мобильных устройствах, где экран маленький, а палец крупный, неожиданный сдвиг особенно опасен. Клиент собирался нажать на номер телефона, а попал в закрывающий крестик рекламного окна, или нажал не ту услугу в списке. Во-вторых, потеря ориентира. Человек читает абзац, текст внезапно уезжает, он теряет строку и вынужден искать место заново. Многие просто закрывают страницу. В-третьих, ощущение недоверия. Сайт, который дёргается, выглядит неряшливо и ненадёжно, а ведь вы просите оставить имя и телефон.

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

Главные причины: картинки без размеров

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

Лечится это просто: у каждой картинки в разметке должны быть указаны ширина и высота, пусть даже сайт адаптивный и в итоге картинка масштабируется. Современные браузеры используют эти значения, чтобы вычислить соотношение сторон и заранее зарезервировать нужное место. Для адаптивных сайтов этого достаточно: картинка сжимается по ширине контейнера, а высота пересчитывается пропорционально, и страница остаётся стабильной.

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

Отдельная история с фоновыми изображениями и крупными баннерами на главной странице. Если высота первого экрана зависит от загрузки картинки, она будет меняться на глазах. Задайте для такого блока минимальную высоту в единицах экрана, чтобы он сразу занимал нужное место, а картинка заполняла его по мере загрузки. Кроме того, оптимизируйте размер самих файлов: чем легче картинка, тем быстрее она приходит и тем короче время, когда страница выглядит недособранной.

Шрифты, которые подменяются на ходу

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

Есть несколько способов смягчить проблему. Первый: использовать как можно меньше начертаний. Если сайту нужны обычный и жирный шрифты, не стоит подключать ещё курсив и три дополнительных веса. Каждый файл задерживает загрузку и увеличивает вероятность подмены. Второй: загружать шрифты с собственного сервера, а не с внешнего, это быстрее и стабильнее, а риск, что внешний сервис ответит медленно, исчезает. Третий: задать правило отображения, при котором браузер сразу показывает запасной шрифт и затем аккуратно подменяет его. Четвёртый и самый действенный: подобрать запасной шрифт, максимально близкий по размерам к основному, чтобы подмена почти не меняла геометрию текста.

В ХостСМС подключение шрифтов обычно происходит в таблицах стилей шаблона или в специальных настройках оформления. Откройте шаблон сайта и посмотрите, откуда подгружаются шрифты и какие у них указаны правила. Если вы видите подключение сразу нескольких семейств с десятком начертаний, это повод пересмотреть дизайн: красота красотой, но каждое лишнее начертание это дополнительная задержка. Уберите те, что не используются, а для остальных скачайте файлы и положите их на ваш сервер. Дополнительно можно заранее подгрузить основной шрифт, чтобы он приходил в числе первых ресурсов.

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

Баннеры, всплывающие окна и динамические вставки

Третий источник скачков это блоки, которые появляются на странице уже после загрузки. Информационная полоса о акции над шапкой, уведомление о сохранении настроек посетителя внизу экрана, баннер с предложением скидки, приветствие чат-бота, рекламный блок. Если такой элемент вставляется в поток страницы, а не накладывается поверх, весь контент резко опускается или поднимается. Хуже всего баннер, который появляется через секунду-две после загрузки: человек уже начал читать или готовится нажать.

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

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

Отдельный случай: праздничные объявления и временные акции. Их часто добавляют в последний момент, не проверяя, как это выглядит. Перед публикацией загляните на сайт с телефона и проследите, не сдвинулось ли что-нибудь. Если баннер действительно нужен, продумайте его место заранее и тестируйте на реальных устройствах, а не только в режиме эмуляции на компьютере.

Виджеты чата, форм и обратного звонка

Четвёртая причина особенно болезненна для заявок: сторонние виджеты. Онлайн-консультант, кнопка обратного звонка, всплывающая форма, мультикнопка для связи в мессенджерах. Такие сервисы, например Живосайт, Энвибокс, Каллибри или Коллтач, подключаются скриптом, который работает после загрузки страницы. Когда скрипт отрабатывает, он добавляет на страницу новые элементы, и если они вставлены в общий поток, происходит сдвиг. Нередко виджет плавает у края экрана и сразу после появления накрывает кнопку или ссылку, на которую посетитель вот-вот нажмёт.

Частая жалоба: форма заявки на странице загружается как встроенный блок, и до её появления под неё не зарезервировано ни пикселя. Когда она приходит, страница вздрагивает, а посетитель, который был близок к тому, чтобы нажать на кнопку выше или ниже, нажимает не туда. Решение то же: задайте контейнеру под форму минимальную высоту, примерно равную высоте будущей формы, и показывайте в нём заглушку или индикатор загрузки. Тогда форма заполнит готовое место, и ничего не поедет.

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

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

Как проверить сайт на смещения: Яндекс.Вебмастер и браузер

Начать можно с Яндекс.Вебмастера. В нём есть раздел, посвящённый качеству сайта и удобству страниц, где отображаются показатели скорости и стабильности по реальным посещениям, а также сведения о проблемах, которые затрагивают пользователей. Посмотрите, какие страницы отмечены как проблемные, и обратите внимание на показатель смещения макета: чем он выше, тем сильнее страница дёргается. Анализируйте данные по группам страниц: главная, услуги, контакты, статьи. Часто выясняется, что на главной всё нормально, а карточка услуги или страница контактов прыгает из-за виджета или карты.

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

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

Не забывайте сопоставлять технические данные с поведением людей. В Яндекс.Метрике посмотрите карту кликов и записи сеансов, если вы их используете: нередко видно, как посетитель нажимает на одно и то же место несколько раз или промахивается. Такие записи показывают, где именно страница мешает человеку, лучше любых отчётов.

Как исправить в ХостСМС: порядок работ

Разберём последовательность действий на примере ХостСМС, так как именно с ней мы работаем чаще всего и знаем её изнутри. Сначала откройте шаблон сайта и посмотрите, как выводятся основные блоки: шапка, главный баннер, список услуг, форма. Выпишите все места, где содержимое подгружается позже остального. Затем разберитесь с картинками: проверьте, у каких изображений в шаблоне и в страницах нет указания ширины и высоты, и добавьте их. Для списков элементов, например услуг или новостей, зафиксируйте соотношение сторон превью, чтобы карточки не менялись по высоте при подгрузке.

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

Затем займитесь динамическими блоками и виджетами. В административной части ХостСМС найдите места, куда подключаются скрипты сторонних сервисов, и просмотрите их список. Лишнее отключите, оставшееся переведите на отложенную загрузку, если сервис это допускает. Для контейнеров, куда подгружаются формы и карты, добавьте минимальную высоту. Для информационных полос и баннеров сделайте наложение поверх страницы, а не вставку в поток. После каждого изменения проверяйте результат на телефоне, а не только на компьютере.

В 1С-Битрикс и ВордПресс логика схожая, различаются лишь места, где нужно править. В 1С-Битрикс стоит обратить внимание на компоненты, которые выводят слайдеры и галереи, и на подключаемые модули. В ВордПресс частым источником проблем становятся плагины, каждый из которых подгружает свои стили и скрипты, а также темы с большим количеством анимаций. В обоих случаях уберите всё, что не нужно, и зафиксируйте размеры динамических элементов.

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

Как это связано с продвижением 3 в 1

Подход «3 в 1» означает, что заявки приходят из трёх точек: из поиска, где сайт находят в обычной выдаче и в ответах нейропоиска, из карточки в Яндекс Бизнесе и Яндекс Картах и из карточки в 2ГИС. Казалось бы, скачущая вёрстка касается только сайта, но она влияет на все три канала. Человек, нашедший вас на карте, обычно нажимает на ссылку сайта из карточки и попадает на ту же страницу. Если страница дёргается, обращение, которое пришло с карты, всё равно будет потеряно.

Отдельно подумайте о страницах, на которые ведут ссылки из карточек. Не отправляйте посетителей с карт на тяжёлую главную страницу с каруселью и всплывающим окном. Сделайте для них лёгкую и стабильную страницу с контактами, ценами и кнопками связи, снабдите ссылки метками, чтобы отличать переходы из Яндекс Бизнеса и 2ГИС, и проверьте, что на ней ничего не прыгает. Для поиска и нейропоиска важно, чтобы страницы быстро показывали основной текст, ответы на вопросы и факты о компании: стабильная структура помогает и людям, и роботам, которые разбирают страницу.

Чтобы оценить эффект от исправлений, сравните показатели до и после. В Яндекс.Метрике настройте цели на звонки, отправки форм и клики по кнопкам связи и сравните долю посетителей, дошедших до цели, по источникам: поиск, карты, реклама. Отдельно смотрите на мобильные устройства, потому что именно там скачки заметнее. Если после правок доля обращений с телефонов выросла, значит, вы нашли реальную причину потерь, а не просто улучшили технические показатели ради красивых цифр.

Как не допустить возвращения проблемы

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

Раз в месяц заглядывайте в Яндекс.Вебмастер и смотрите динамику показателей качества страниц. Если вы заметили ухудшение, сопоставьте его с последними изменениями на сайте: что вы добавляли за этот период. Обычно причина находится быстро. Раз в квартал проводите общий аудит: открывайте ключевые страницы на нескольких устройствах, записывайте загрузку на видео и просматривайте её внимательно. Так вы поймаете проблему раньше, чем клиенты начнут жаловаться или молча уходить.

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

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

Вывод

Скачущая вёрстка это тихий потребитель заявок: она не ломает сайт, но заставляет клиентов нажимать не туда и уходить. Основные причины известны: картинки без размеров, подмена шрифтов, баннеры и объявления, вставленные в поток страницы, виджеты чатов и форм, подгружающиеся поздно. Проверить сайт можно в Яндекс.Вебмастере, инструментах браузера и на живом телефоне, а исправить, зарезервировав место под каждый элемент, сократив число шрифтов и виджетов и перенеся динамические блоки в наложение. Выигрывают все три точки, откуда приходят обращения: поиск, карточка в Яндекс Бизнесе и карточка в 2ГИС, ведь все они ведут людей на одни и те же страницы.

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