COGNITIVE PILOT

Как сделать сайт уровня Tesla и перенести 200 страниц без потери позиций

Cognitive Pilot разрабатывает системы искусственного интеллекта для беспилотного транспорта: автопилоты для тракторов и комбайнов, помощника водителя трамвая и сервис для земледелия «Точность». Только за первый год применения в России тракторы с их системой обработали более 2,3 млн гектаров земли.

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

С этой задачей компания обратилась в MWI в сентябре 2023 года. Формально она звучала стандартно: новый сайт на 1С-Битрикс вместо старого на WordPress. Фактически за ней стояли три требования, каждое из которых по отдельности вполне решаемо, а вместе они конфликтуют.

Почему обычный подход здесь не работал

Дизайн уровня мировых технологических брендов. Отсюда и появился главный референс проекта — сайт Tesla. Один блок занимает один экран на любом устройстве — от 1360×768 до 320 px. Видео о продукте на первом экране. Анимация при скролле, 3D-модели, которые пользователь крутит мышью. Страницы сайта загружаются отдельно.

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

Переезд без потери поисковых позиций. Около 209 страниц старого сайта, включая блог с накопленной историей. Плюс жесткие требования: PageSpeed не ниже 80, ЧПУ*, 301-редиректы, сохранение адресов статей.

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

Главной задачей было найти баланс между этими требованиями.

47 задач · 16 шаблонов страниц · 12 специалистов · ТЗ на 1700 строк · 921 комментарий в переписке

MWI выступила единственным подрядчиком и закрыла полный цикл: проектирование, дизайн, верстку, программирование, интеграции, наполнение, SEO-миграцию, перенос на инфраструктуру заказчика и дальнейшую поддержку. Сентябрь 2023 — старт, февраль 2024 — релиз, дальше техническая поддержка по запросу.

Почему анимация «как у Tesla» сложнее, чем выглядит

Первая версия слайдеров была готова быстро. Ее пришлось полностью переделать.

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

Самым сложным элементом стал блок «История» на странице о компании.

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

Для блока «О компании» собрали 3D-сцену в формате .glb*: планета медленно вращается вокруг оси сама и одновременно поддается вращению мышью. По ней расставлены тракторы в фирменном красном.

Что получил клиент. Продуктовый сайт с поэкранной навигацией, видео и 3D, который не пришлось упрощать ради скорости загрузки.

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

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

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

Сайт связали с сервисами, которыми компания уже пользовалась:

• CRM Битрикс24 — заявки со всех форм попадают в раздел «Лиды» с меткой источника
• Подписка на новости с double opt-in* — подтверждение по письму, защита базы от неподтвержденных адресов
• Яндекс.Карты с геолокацией по IP — пользователь сразу видит четырех ближайших дилеров, а не общий список по стране
• Подмена телефона Mango Office — перенесли со старого сайта, чтобы не потерять отслеживание звонков
• Яндекс.Метрика с событиями на формах

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

Что получил клиент. Сотрудники Cognitive Pilot обновляют продуктовые страницы, дилерскую сеть, новости, мероприятия, вакансии и документы самостоятельно — без задач разработчику, без ожидания и без счета за каждую правку.

Почему переезд 200 страниц нельзя автоматизировать

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

Обе версии сайта просканировали через Screaming Frog*, выгрузили все адреса и вычистили служебные. Получилось около 209 страниц, которые нужно было сопоставить со страницами нового сайта — часть по правилам, часть вручную, по смыслу.

Отдельная история — блог. Адреса статей на старом и новом сайте оказались похожими, но не идентичными: разные версии транслитерации давали расхождения вроде j против y или 23 против 2-3 в одном и том же URL. Каждую статью сверяли вручную.

Чек-лист технического SEO отработали дважды: сначала на тестовом домене, до переключения, потом повторно на боевом. Карта сайта, robots.txt, ЧПУ, 301-редиректы, корректная 404, canonical для пагинации, SSL, шаблоны заголовков, alt для изображений.

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

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

Почему баг проявился только после релиза

Сайт разрабатывался с выключенным кешированием — так удобнее вести разработку. На боевом сервере кеш включили, и часть контента начала дублироваться, а у некоторых пользователей сайт перестал открываться вовсе.

Самое неприятное — проблема возвращалась.

Симптомы устраняли, клиенту сообщали, что все решено, а через некоторое время дубли появлялись снова. Значит, чинили следствие.

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

Что получил клиент. Сайт остался быстрым, дубли исчезли, а новости и статьи стали появляться сразу после публикации — раньше их приходилось ждать до сброса кеша вручную.

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

Почему проект не закончился релизом

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

Через несколько месяцев после запуска выяснилось, что на планшетах Galaxy Tab в горизонтальном режиме не работает скролл — добавили стрелки навигации и обработку касаний. В Firefox не раскрывалось меню при наведении. Однажды просто отвалилась геолокация дилеров: карта присылала пустой ответ, потому что закончился лимит бесплатных запросов.

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

Дальше клиент возвращался регулярно: декабрь 2024 — доработка верхнего меню, март 2025 — мобильная верстка и скролл на «Контактах», июнь 2025 — согласие на обработку персональных данных во все формы под изменившиеся требования закона, февраль 2026 — редизайн меню продуктов.

Что в итоге

Сохранен поисковый вес, накопленный за годы: более 200 страниц переехали на другую платформу, блог сохранил свои адреса.

Сложная анимация не помешала скорости: поэкранный скролл, синхронная смена медиа, горизонтальная лента истории, 3D с вращением — и сжатые до мегабайтов фоновые видео вместо тяжелых роликов.

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

Систему продолжают развивать третий год. Последняя задача закрыта в марте 2026-го — через два с половиной года после старта.

Три требования, которые в начале проекта спорили друг с другом, в итоге сошлись в одном сайте: Cognitive Pilot показывает свои автопилоты так же убедительно, как их делает, — и при этом сам управляет тем, что показывает.

Термины и сноски

Термины и сноски

* ЧПУ (человекопонятный URL) — адрес страницы из читаемых слов вместо технических параметров: /products/tractor/ вместо /index.php?id=57. Понятнее пользователю и лучше для поиска.

* .glb — компактный формат файла для 3D-моделей, который открывается прямо в браузере, без плагинов и дополнительных программ.

* Double opt-in — подписка в два шага: пользователь оставляет адрес и подтверждает его по ссылке из письма. Защищает базу от чужих адресов и ботов.

* Screaming Frog — программа, которая обходит сайт целиком, как поисковый робот, и выгружает список всех страниц с их состоянием. Используется, чтобы ничего не потерять при переезде.

* Управляемый кеш — режим, при котором сохраненная копия страницы обновляется автоматически в момент изменения данных, а не по расписанию. Сайт остается быстрым, но контент не устаревает.

* Монитор качества 1С-Битрикс — официальная проверка сайта разработчиком платформы: безопасность кода, настройка компонентов, работа с базой данных, окружение сервера.