Анимации и эффекты на сайте: где они помогают заявкам, а где мешают

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

Почему анимация — это нагрузка, а не украшение

Браузер рисует страницу заново много раз в секунду. Чтобы движение выглядело плавным, он должен успевать перерисовывать её примерно шестьдесят раз в секунду — то есть на один кадр у него есть около шестнадцати миллисекунд.

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

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

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

Разница между «сдвинуть блок» и «изменить его отступ слева» для человека незаметна, а для браузера огромна. Именно поэтому один сайт с анимациями летает, а другой с такими же на вид эффектами тормозит.

Что портит прокрутку сильнее всего

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

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

Движущийся фон. Эффект, при котором фон смещается медленнее содержимого, требует пересчёта на каждый кадр прокрутки. На телефонах он работает плохо почти всегда, а в некоторых браузерах вообще не поддерживается и выглядит поломкой.

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

Счётчики с анимацией цифр. Сами по себе лёгкие, но обычно запускаются при прокрутке и часто написаны так, что перерисовывают блок целиком.

Эффекты при наведении на карточки. На компьютере уместны, на телефоне бессмысленны — наведения там нет. Хуже того, часто первое касание срабатывает как наведение, а не как нажатие, и человеку приходится нажимать дважды. Это прямая потеря обращений в каталоге.

Плавная прокрутка всей страницы. Перехват прокрутки скриптом, чтобы она была «мягче», ломает привычное поведение и на телефонах работает отвратительно.

Анимированные всплывающие окна. Окно, которое медленно выезжает, задерживает человека на секунду дольше и раздражает сильнее, чем мгновенное.

Множественные тени и размытия. Модное «стеклянное» оформление с размытым фоном требует от браузера много работы, особенно если применяется к нескольким элементам сразу.

Где эффекты действительно помогают

Отказываться от анимации полностью не нужно — она решает реальные задачи, когда применяется точечно.

Обратная связь на действие. Кнопка слегка меняется при нажатии, поле подсвечивается при вводе, галочка отмечается с небольшим движением. Это помогает понять, что действие сработало, и снижает число повторных нажатий.

Показ состояния. Индикатор отправки формы, полоска загрузки, значок ожидания. Без них человек не понимает, работает ли что-то, и нажимает кнопку второй раз — отсюда берутся дубли заявок.

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

Привлечение внимания к одному элементу. Одна кнопка, которая едва заметно пульсирует, работает. Пять анимированных элементов на экране — уже хаос.

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

Общее правило: анимация уместна там, где она объясняет происходящее, и вредна там, где просто украшает.

Как проверить, тормозит ли ваш сайт

Проверка не требует специальных знаний.

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

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

Страница с длинным списком. Каталог или список услуг — самое проблемное место, потому что там больше всего элементов.

Проверка нагрева. Если телефон ощутимо греется при пролистывании обычной страницы, значит, что-то работает постоянно — чаще всего это фоновое видео или бесконечная анимация.

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

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

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

Смещение содержимого — отдельная беда

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

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

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

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

Уважение к настройкам пользователя

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

Сайт может прочитать эту настройку и отключить необязательные эффекты, оставив только те, что несут смысл. Реализуется это парой строк в файле стилей и делается один раз.

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

Аналогично стоит поступать с автоматически запускающимся видео и движущимися фонами — их лучше не включать самостоятельно вообще, оставив управление человеку.

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

Наш подход «3 в 1» предполагает три источника обращений, работающих вместе, и отзывчивость сайта влияет на каждый из них.

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

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

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

Работа только над одной точкой даёт неполный результат. Можно вложиться в карточки и в продвижение, но если каждый второй мобильный посетитель упирается в тормозящую страницу, весь поток теряется в одном месте. Обращения с карт и заявки с сайта нужно считать вместе — тогда видно, что провал общий, а не в каком-то одном канале.

Что измерять, чтобы понять цену эффектов

Оценивать нужно не красоту, а поток обращений.

Сравните конверсию в обращение на телефонах и на компьютерах. Разница есть всегда, но если она очень велика, стоит проверить именно отзывчивость.

Посмотрите долю быстрых уходов на страницах с наибольшим количеством эффектов — обычно это главная и страницы услуг.

Изучите записи поведения посетителей в вебвизоре: видно, как человек листает, где задерживается, где начинает дёргать страницу вверх-вниз (признак того, что она не отвечает).

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

Все обращения при этом должны фиксироваться с источником в Битрикс23 или амоСРМ, иначе сравнивать будет нечего.

Частые ошибки

Оценка сайта только на мощном компьютере разработчика. Там всё летает всегда.

Анимация ради демонстрации навыков. Эффект, который не несёт смысла, всегда стоит дороже, чем кажется.

Автоматически запускающееся фоновое видео на первом экране. Самая дорогая деталь оформления из всех существующих.

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

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

Отсутствие зарезервированного места под изображения и виджеты. Прыгающая вёрстка портит впечатление сильнее любых тормозов.

Отказ учитывать системную настройку «уменьшить движение».

Добавление эффектов без замера. Если до и после не измерено, вы не знаете, что произошло с обращениями.

Разумный порядок действий

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

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

Замените дорогие анимации на дешёвые: вместо изменения размеров и отступов — смещение и масштабирование, вместо появления с изменением высоты — изменение прозрачности.

Зарезервируйте место под изображения и подгружаемые блоки.

Добавьте поддержку системной настройки «уменьшить движение».

Оставьте только те эффекты, которые объясняют происходящее: обратную связь на нажатие, индикатор отправки формы, плавное раскрытие.

Замерьте показатели через две-три недели и сравните с исходными.

Обычно после такой чистки сайт не становится хуже визуально — он становится спокойнее и быстрее, а число обращений с телефонов заметно растёт.

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