Что считают объёмными эффектами
Объёмный эффект — это графика, которая считает форму, свет и движение, а не показывает готовую картинку. На сайтах услуг встречаются пять видов.
- WebGL-сцена на three.js: вращающийся объект, «жидкий» фон, частицы, реагирующие на курсор.
- Параллакс слоёв: фон, средний план и текст двигаются с разной скоростью при скролле.
- Канвас с частицами: точки, линии, сетка — самый частый вариант и самый дешёвый в разработке.
- Стекло и размытие: полупрозрачные панели с backdrop-filter.
- 3D-модель продукта: вращение мышью, смена цвета и материала — уже не украшение, а функция.
Общее у всех пяти: к странице добавляется вес файлов, работа видеокарты и точка отказа. Вопрос не «красиво или нет», а «что это даёт посетителю».
Где объёмный эффект работает
- Первый экран лендинга с высоким чеком. Средний заказ от 50 000 ₽, 300–800 визитов в месяц, задача — запомниться. Сцена заменяет фотосток и работает как аргумент: «мы умеем то, что не умеют другие». На сайте с чеком 3 000 ₽ она только увеличивает время загрузки.
- Физический продукт, который надо рассмотреть. Модель на 1,5–3 МБ убеждает лучше шести фото по 200 КБ: человек крутит изделие и видит толщину, фактуру, посадку. Для мебели и светильников это замена фотосессии.
- Портфолио студии. Сцена здесь — часть демонстрации навыка: посетитель оценивает не текст «мы профессионалы», а ваш собственный сайт.
- Промо-страница мероприятия. Живёт две–четыре недели, поисковый трафик не рассчитывается, зато важен эффект «вау» и пересылка в мессенджере.
- Конфигуратор. Графика даёт выбрать цвет или материал и сразу показывает результат — работает как калькулятор и ведёт к заявке. Единственный случай, где сцена окупается даже в каталоге.
Общий признак: эффект помогает принять решение. Если он лишь подтверждает, что у студии есть дизайнер, — это расход для владельца сайта, а не аргумент для клиента.
Где эффект мешает продавать
Проблемы начинаются там, где человек пришёл за конкретикой: ценой и сроком.
| Сценарий | Что поставили | Что ломается | Вердикт |
|---|---|---|---|
| Каталог магазина | параллакс и появление карточек | INP до 400–600 мс, клики «не срабатывают» | убрать |
| Страница с ценами и формой | WebGL-фон на всю страницу | поле теряет фокус, клавиатура перекрывает кнопку | убрать |
| Реклама на мобильных | сцена на первом экране | LCP 4–6 с, до 70 % уходят до заголовка | только постер |
| B2B с прайсом и ТЗ | анимация каждого блока | отказы 65–80 %: человек ищет цифры | минимум |
| Аудитория 45+ | частицы под мелким текстом | текст не читается, звонки вместо заявок | убрать |
Страдает не «красота», а измеримые вещи: время до заголовка, отзывчивость, читаемость. Спор «нравится / не нравится» кончается ничем, а вопрос «сколько секунд до LCP» решается за пять минут.
Сколько эффект стоит в килобайтах и секундах
| Элемент | Вес | Когда становится проблемой |
|---|---|---|
| three.js, сжатый | 150–170 КБ | если грузится до первого экрана |
| Сцена с моделями | 1,5–4 МБ | на мобильном интернете |
| Текстуры без сжатия | 3–8 МБ | почти всегда: это первое, что режут |
| Шрифт с кириллицей, два начертания | 80–120 КБ | при четырёх и более начертаниях |
| backdrop-filter на больших блоках | 0 КБ, но перерисовка | роняет анимацию до 20–30 fps |
Пороги, по которым сайт считается быстрым: LCP до 2,5 секунды, INP до 200 миллисекунд, CLS до 0,1. Сцена, стартующая одновременно с текстом, легко двигает LCP с 1,8 до 3,5–4 секунд — это не «немного медленнее», а другой процент отказов.
Ориентир из веба: каждая лишняя секунда загрузки стоит 5–10 % конверсии. При 20 заявках в месяц и конверсии 2 % секунда — это минус 1–2 обращения, при марже 12 000 ₽ — 12 000–24 000 ₽. Эффект дороже этой суммы должен приносить больше, и это проверяется, а не обсуждается.
Мобильные: где эффекты чаще всего и убивают
С телефонов приходит 55–70 % трафика на сайты услуг, и там объёмная графика показывает худшие результаты.
- Слабый графический чип. Сцена на 150–200 тысяч треугольников на бюджетном Android даёт 15–25 кадров в секунду: движение дёргается, телефон греется, вкладку закрывают.
- Троттлинг. Телефон среднего класса с замедлением процессора в 4 раза и сетью Fast 3G — так выглядит посетитель в метро.
- Батарея. Постоянный рендер съедает заряд быстрее видео: сцена, которая крутится, пока человек читает, добавляет жалоб на нагрев.
Решение простое: на экранах до 768 пикселей — статичный постер на 40–60 КБ, сцена только на десктопе. Второй вариант — облегчённая версия: меньше полигонов, текстуры 512 вместо 2048, без постобработки.
Семь правил, чтобы эффект не мешал
- Один акцент на страницу. Сцена на первом экране — и всё. Параллакс, частицы в подвале и анимация каждого блока дают кашу и лишние 300–500 КБ кода.
- Постер вместо пустого места. Пока сцена грузится, на её месте стоит картинка-заглушка того же кадра: посетитель видит целый экран сразу.
- Загрузка после LCP. Сцена подключается динамическим импортом после отрисовки текста и кнопки. Оффер не ждёт графику.
- Пауза вне экрана и в скрытой вкладке. Наблюдатель за пересечением останавливает рендер, когда блок ушёл из вида, событие смены видимости — когда человек переключил вкладку. Минус 30–50 % нагрузки на батарею.
- Потолок плотности пикселей и кадров. Рендер в тройном разрешении — в девять раз больше точек, чем нужно глазу. Плотность не выше 2, для фоновой сцены — 30–45 кадров в секунду.
- Настройка «меньше движения». Если в системе включено уменьшение анимации — статичный кадр: часть людей плохо переносит движение на весь экран.
- Сжатие и форматы. Модели — через Draco, текстуры — KTX2 или WebP, шрифты — только нужные начертания. На текстурах экономится 60–80 % веса сцены без видимой разницы.
Проверка на пальцах: откройте сайт с телефона в режиме экономии трафика. Если через пять секунд на экране нет заголовка, цены и кнопки — эффект стоит денег, а не приносит их.
Как проверить эффект за час
- PageSpeed Insights, мобильный режим: запишите LCP, INP, CLS. LCP больше 2,5 секунды — проблема, больше 4 — критичная.
- WebPageTest: телефон среднего класса, Fast 3G, замедление процессора 4x. Раскадровка покажет, на какой секунде появляются заголовок, кнопка и сцена.
- DevTools, вкладка Performance: включите счётчик кадров и запишите 10 секунд скролла. Просадки ниже 40 fps видно и на графике, и глазом.
- Метрика: сравните отказы по устройствам. Если на мобильных они на 15–20 п. п. выше — разница в первом экране.
- Живой тест: откройте сайт с телефона на улице и оставьте заявку. Пять минут находят больше, чем час обсуждения дизайна.
- Сравнение двух версий: первый экран со сценой и с постером. Достаточно 1 000 визитов или двух недель, чтобы увидеть разницу.
Что сделать на этой неделе
- Замерьте LCP, INP и CLS на мобильном в PageSpeed — это база для решений.
- В раскадровке загрузки найдите секунду, на которой появляется кнопка заявки.
- Отключите анимации, которые не помогают выбрать услугу, — обычно это появление блоков при скролле.
- Добавьте постер и ленивую загрузку сцены, если она остаётся.
- Ограничьте плотность пикселей и кадры, добавьте паузу вне экрана.
- Сравните конверсию по устройствам до правок и через две недели после.
Если эффект нужен, но разбираться с производительностью некогда: лендинг с одной сценой — от 15 000 ₽ и 4–5 дней, многостраничный сайт — от 29 000 ₽ и 6–7 дней, проект с 3D-конфигуратором — от 55 000 ₽. Заявка с формы приходит в Telegram, поддержка — 30 дней. Сцены на живых страницах — в портфолио, состав работ — в тарифах. Если сначала надо понять, что чинить на текущем сайте, — напишите нам. Про скорость без графики — в статье почему 3 секунды стоят половины посетителей.