Сайт с 3D: когда он помогает бизнесу, а когда мешает

Когда 3D работает

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

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

Когда 3D мешает

• Сайт нужен для быстрого действия: вызвать мастера, записаться, узнать адрес. Человеку надо нажать кнопку, а не любоваться.
• Аудитория сидит на бюджетных телефонах и медленном интернете. Тяжёлая сцена для неё это пустой экран.
• Весь текст внутри 3D-сцены. Поисковик читает HTML, и страница без текста в нём для него пуста.
• На оптимизацию нет бюджета. Неоптимизированная 3D-сцена хуже, чем её отсутствие.

Что мы увидели на собственном сайте

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

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

Как сделать 3D безопасным для людей и для поиска

1. IВесь текст лежит в HTML, а 3D рисуется поверх. Тогда страницу читают и поисковики, и читалки для людей с нарушением зрения.
2. IIУ сайта есть запасная версия без WebGL. Если браузер не умеет 3D или посетитель отключил анимацию в системе, он получает ту же информацию без сцены.
3. IIIМодели сжаты и упрощены, тяжёлый код 3D не входит в первую загрузку, шейдеры готовятся до того, как страница откроется.
4. IVСцена следит за своей скоростью: при нехватке кадров снижает качество, а на устройстве, которое всё равно не тянет, уступает место спокойной версии.
5. VСкорость измеряется на слабом устройстве, а не на рабочем ноутбуке студии.

Как понять, нужно ли 3D вам

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