Запрос клиента
«Элементы всплывали, выезжали, вращались, а важная информация была бегущей строкой». Желание понятное: хочется, чтобы сайт выглядел современно и живо.
Почему скорость загрузки важнее эффектной анимации
Разбираем, что действительно удерживает пользователя: динамичные элементы или время до первого экрана. С данными Google, Deloitte, Portent и Nielsen Norman Group.
Скорость загрузки Конверсия UX Core Web Vitals
Автор
Татьяна Ларина
Тема
Производительность сайта и дизайн
Скорость загрузки vs анимацияOblaka|Web · TatPage
«Хочу, чтобы всё всплывало и вращалось»
В переговорах клиент часто просит динамичные элементы: всплывающие блоки, выезжающие панели, бегущую строку. Технически это возможно. Вопрос в том, что важнее для его аудитории.
Встречный вопрос
Что важнее — динамичные элементы или быстрая загрузка контента, ради которого человек пришёл? Сайт создаётся для целевой аудитории, а не для владельца.
Сайт — это инструмент продаж. Скорость загрузки — ключевой фактор того, останется ли клиент знакомиться с предложением.
Постановка задачи из практики агентства.
Постановка вопроса02
У вас есть примерно 8 секунд, а не минута
Запас внимания ограничен. Исследования Nielsen Norman Group показывают: пользователи часто покидают страницу за 10–20 секунд, а чтобы удержать их дольше, ценность нужно communicate в первые 10 секунд.
На решение
~8 сек
Оптимистичная оценка времени, которое пользователь готов потратить на страницу, чтобы найти нужное.
Сканирование
79%
Пользователей просматривают страницу по диагонали, а не читают слово за словом (Nielsen Norman Group).
Первое впечатление
50 мс
Столько нужно, чтобы сформировать визуальное впечатление о странице (Lindgaard et al., 2006).
Что это значит на практике
Если из восьми секунд пять уходят на загрузку, у потенциального клиента остаётся три секунды, чтобы оценить предложение. Скорее всего, он закроет страницу, так и не узнав, что вы предлагаете.
Внимание пользователя03
53% мобильных пользователей уходят после 3 секунд
Компания Google изучила, как время загрузки страницы влияет на показатель отказов. Оказалось, что больше половины пользователей не готовы ждать дольше 3 секунд.
Отказы
53%
Мобильных посещений прерываются, если загрузка занимает больше 3 секунд.
Google / DoubleClick Ожидание
2 сек
Один из двух пользователей ожидает, что страница загрузится быстрее 2 секунд.
Google / DoubleClick Раздражение
46%
Пользователей называют ожидание загрузки самым неприятным при просмотре сайтов на мобильном.
Google / DoubleClickИсточники: Google AdSense / DoubleClick, «The Need for Mobile Speed» (2016); Think with Google.
Данные Google04
Миллисекунды конвертируются в выручку
Скорость — не абстрактная техническая метрика, а измеримый фактор дохода. Это подтверждают исследования на данных десятков миллионов сессий.
Deloitte: 0,1 секунды
Улучшение загрузки на 0,1 секунды повышало конверсию в ритейле на 8,4%, а средний чек — на 9,2%. Замедление LCP на 100 мс может снижать конверсию до 7%.
Deloitte, «Milliseconds Make Millions»
Portent: падение в 2,5 раза
E-commerce с загрузкой за 1 секунду конвертировали в 3,05%, за 3 секунды — в 1,12%, за 5 секунд — в 0,67%. Разница между 1 и 5 секундами — почти пятикратная.
Portent, анализ 100+ млн просмотров
Amazon: 100 мс = 1%
Каждые дополнительные 100 миллисекунд загрузки стоили Amazon примерно 1% продаж. Одна секунда замедления — потенциально $1,6 млрд упущенной выручки.
Amazon, классическое исследование скорости
Скорость — это не «техническая деталь». Это прямая статья дохода.
Экономика скорости05
Core Web Vitals: LCP, INP и CLS
С 2021 года Google использует Core Web Vitals как сигнал ранжирования. С 2024 года место First Input Delay занял INP — метрика отзывчивости интерфейса.
LCP
Largest Contentful Paint — время до отображения основного контента. Хорошо: до 2,5 секунд. Плохо: больше 4 секунд.
INP
Interaction to Next Paint — отзывчивость на действия пользователя. Пришёл на смену First Input Delay в 2024 году.
CLS
Cumulative Layout Shift — визуальная стабильность. Чем меньше элементы «прыгают» при загрузке, тем лучше.
Практический вывод для дизайна
Анимация, которая задерживает LCP или вызывает сдвиги макета (CLS), напрямую ухудшает метрики, которые Google учитывает при ранжировании. Красота не должна конкурировать со скоростью — она должна с ней сочетаться.
Google Web Vitals; Chrome UX Report.
Core Web Vitals06
Анимация уместна, а не тотальна
Речь не о том, чтобы отказаться от анимации полностью. Речь о том, чтобы применять её осознанно и дозированно.
Где анимация работает
- Первый экран с основным предложением.
- Заголовки ключевых блоков.
- Логотип или один акцентный элемент.
- Микровзаимодействия, которые подтверждают действие.
Где она вредит
- Бегущая строка с важной информацией.
- Несколько конкурирующих анимаций в одном блоке.
- Тяжёлые эффекты, задерживающие LCP.
- Движение ради движения, а не ради смысла.
Лендинг
3–5
Рекомендуемое количество анимированных элементов.
Многостраничный сайт
5–10
Анимированных элементов на весь сайт, не на страницу.
Главное правило
1
Один акцентный элемент в блоке. Не больше.
Анимация без вреда07
Оптимизация без потери качества
Изображения — один из главных источников веса страницы. По данным Google, средний размер контента мобильной страницы — 1,49 МБ, и на 3G это занимает около 7 секунд.
Форматы
SVG — для иконок и векторной графики. WebP / AVIF — для фотографий. PNG — только когда нужна прозрачность и потеря качества недопустима.
Правила
- Ресайз под реальный размер отображения.
- Ленивая загрузка для изображений ниже первого экрана.
- Не использовать изображение там, где хватит CSS.
- Проверять вес после сжатия.
Проверка
PageSpeed Insights показывает, какие изображения можно сжать, какие форматы не используются и сколько времени они добавляют к загрузке. Это первый шаг к оптимизации.
Изображения08
Вниманием можно управлять без анимации
Вёрстка и типографика часто работают лучше и быстрее, чем динамические эффекты. Они не нагружают страницу и не конкурируют за внимание.
Размер и вес
Крупный заголовок и аккуратный ритм текста направляют взгляд лучше, чем выезжающая панель.
Цвет и контраст
Один акцентный цвет на ключевом элементе работает как визуальный якорь.
Расположение
Логичная сетка и воздух между блоками помогают сканировать страницу за секунды.
Текст должен быть ясным и лаконичным: конкретные предложения, преимущества, стоимость. Тогда пользователь находит нужное без лишних усилий.
Альтернативы анимации09
Дизайн влияет на доверие, но скорость — на решение
Исследование Stanford Persuasive Technology Lab показало: почти половина пользователей судят о кредибилитации сайта по дизайну (46%). Но красивое первое впечатление исчезает, если страница не загрузилась.
50 миллисекунд
Столько нужно, чтобы сформировать визуальное впечатление. Но это впечатление работает только тогда, когда контент уже на экране.
Баланс
Дизайн создаёт доверие, скорость делает доверие возможным. Одно без другого не конвертирует.
Что в итоге
Пользователь не разделяет «дизайн» и «скорость». Он видит результат: либо страница открылась и внушает доверие, либо он ушёл к конкуренту.
Stanford Persuasive Technology Lab; Lindgaard et al. (2006).
Восприятие10
Что сделать сейчас
01
Измерить
Открыть PageSpeed Insights и зафиксировать LCP, INP, CLS. Без базовой линии улучшения не проверить.
02
Убрать лишнее
Сократить количество анимаций до 3–5 на лендинге. Оставить один акцент в блоке.
03
Сжать
Перевести изображения в WebP/AVIF, уменьшить размеры, включить ленивую загрузку.
04
Повторить
Замерить снова. Сравнить конверсию до и после. Оставить то, что даёт измеримый эффект.
Инструмент
PageSpeed Insights: pagespeed.web.dev. Вводите адрес, получаете отчёт по Core Web Vitals, изображениям, скриптам и рекомендации по приоритетам.
Чек-лист11
Скорость — это забота о клиенте
Анимация может быть полезна. Но когда она конкурирует со скоростью, проигрывает бизнес: пользователь уходит, конверсия падает, деньги на трафик сгорают.
Данные
53% уходят после 3 секунд. 0,1 секунды дают +8,4% конверсии. 100 мс стоят 1% продаж. Это не мнения, а измерения.
Дозировка
3–5 анимаций на лендинг, 5–10 на сайт. Один акцент в блоке. Анимация — инструмент, а не украшение.
Приоритет
Сначала скорость и ясность, потом эффекты. Пользователь должен увидеть предложение раньше, чем закончится анимация.
Мы не против анимации. Мы за её осознанное применение — когда она помогает быстро передать смысл, а не задерживает его.
LCP ≤ 2,5 с 53% уходят после 3 с 0,1 с = +8,4% 100 мс = −1%
Скорость загрузки vs анимация · TatPage12