Проблема
Логистическая компания с филиалами в 12 городах России. Грузоперевозки — сборные грузы, полные фуры, экспедирование. 80 сотрудников, собственный автопарк из 45 единиц техники, 6 складов.
Сайт сделали в 2018 году на 1С-Битрикс. На момент обращения ему было семь лет, и выглядело это соответственно. Мобильной адаптации не было — точнее, формально она была, но «адаптивная» версия просто сжимала десктоп до ширины экрана. Текст становился нечитабельным, кнопки — некликабельными.
Загрузка главной страницы — 4.7 секунды. PageSpeed Insights показывал 28 баллов на мобильных и 41 на десктопе. Core Web Vitals — всё красное: LCP 6.2 секунды, CLS 0.35, FID 380 мс.
Конверсия сайта (заявка на расчёт / звонок) — 0.8%. При трафике 1 200 визитов в день это давало 9-10 заявок. Для компании с оборотом в 200 млн рублей — унизительно мало.
Но главная боль была в другом. 68% трафика шло с мобильных устройств. Водители, логисты, менеджеры на складах — они все работают с телефона. И все они получали неработающий сайт.
Компания заказывала «доработки» у фрилансеров, но каждая доработка ломала что-то другое. Битрикс вырос в монстра из кастомных модулей, которые конфликтовали друг с другом. Последний разработчик, который в этом разбирался, уволился год назад.
Решение: сделать с нуля на современном стеке. Без миграции — полная переделка.
Что мы нашли
Перед тем как проектировать новый сайт, мы потратили две недели на анализ текущего. Не потому что собирались что-то переносить — а чтобы понять, что работает, что нет, и где теряются деньги.
Яндекс.Метрика. Карта кликов показала: на мобильных 40% кликов приходились на элементы, которые не были кликабельными. Люди тыкали в телефонный номер в шапке — а он был картинкой, не ссылкой. Тыкали в адреса филиалов — а карты не было.
Вебвизор. Посмотрели 200 сессий. Типичное поведение: человек заходит → скроллит → не находит калькулятор расчёта стоимости → уходит. Калькулятор был, но спрятан на третьем уровне меню в разделе «Сервис → Инструменты → Расчёт».
Формы. Форма заявки содержала 12 полей, включая ИНН, ОГРН и «комментарий к заявке». На мобильном заполнять 12 полей — пытка. Из тех, кто начинал заполнять форму, до отправки доходили 15%.
SEO. Сайт стоял в топ-10 по 180 запросам — в основном брендовым и низкочастотным. По коммерческим запросам вроде «грузоперевозки по России» — за пределами топ-50. Причина простая: поведенческие факторы были ужасными. Яндекс видел, что люди приходят на сайт и тут же уходят.
Контент. 340 страниц, из которых 200 — направления перевозок вида «Перевозки Москва — Новосибирск». Тексты — шаблонные, одинаковые кроме названий городов. Яндекс такие страницы справедливо считал дублями.
Техника. 47 JS-файлов загружались синхронно. 23 CSS-файла. jQuery, jQuery UI, три разных слайдера, два шрифта через Google Fonts (блокирующий рендер). Битрикс-ядро добавляло ещё 800 КБ скриптов своего.
Что мы сделали
Неделя 1-3: проектирование
Начали с прототипов в Figma. Не с дизайна — а со структуры. Определили 8 основных пользовательских сценариев:
- Рассчитать стоимость перевозки (47% визитов)
- Узнать сроки доставки в конкретный город (23%)
- Отследить груз (12%)
- Найти контакты филиала (8%)
- Узнать про автопарк и грузоподъёмность (4%)
- Прочитать условия для юрлиц (3%)
- Посмотреть отзывы (2%)
- Подать заявку на тендер (1%)
Под каждый сценарий — свой путь. Калькулятор расчёта вынесли на главную, в первый экран. Не ссылку на калькулятор — а сам калькулятор. Город отправления, город назначения, вес, объём — расчёт. Четыре поля. Результат за 3 секунды.
Структуру сайта сократили с 340 до 85 страниц. Убрали 200 шаблонных направлений — вместо них сделали одну страницу «Направления» с интерактивной картой и поиском. Каждое направление рендерилось динамически с уникальными данными: стоимость, срок, тип транспорта, особенности маршрута.
Неделя 3-8: разработка
Стек: Next.js 16 (App Router), TypeScript, Tailwind CSS 4, Prisma + PostgreSQL. Сервер — VPS на Ubuntu с Docker, PM2, Nginx.
Ключевые решения:
Server-Side Rendering для всех публичных страниц. Контент рендерится на сервере — поисковик получает готовый HTML. Интерактивные элементы (калькулятор, формы, карта) гидратируются на клиенте.
Оптимизация изображений. Sharp конвертирует в WebP на лету, генерирует srcset для разных разрешений. Lazy loading для всего, что ниже первого экрана. Placeholder — blur (маленькое размытое превью, пока грузится полная версия).
Шрифты. Один шрифт (Inter), подключённый через next/font — никаких сетевых запросов, шрифт вшит в бандл. Нулевой FOUT.
Калькулятор. Расчёт стоимости идёт на клиенте — тарифная сетка загружается один раз при первом взаимодействии. Никаких запросов к API на каждое изменение поля. Мгновенный отклик.
Формы. Упростили до 4 полей: имя, телефон, откуда-куда, что везём. Остальное менеджер уточняет при звонке. На мобильном форма заполняется за 30 секунд.
Отслеживание груза. Интеграция с внутренней CRM клиента через API. Клиент вводит номер накладной — получает статус в реальном времени. Раньше для этого нужно было звонить в офис.
Неделя 8-10: контент и SEO
Все 85 страниц получили уникальный контент. Не SEO-тексты из копирайтерской биржи — а реальную полезную информацию. Страница «Перевозка сборных грузов» объясняет, как работает консолидация, какие ограничения по габаритам, как упаковать груз, как рассчитать стоимость.
Микроразметка Schema.org: Organization (с филиалами), Service (услуги с ценами), FAQ, BreadcrumbList, LocalBusiness (для каждого филиала отдельно).
Внутренняя перелинковка: каждая услуга ссылается на калькулятор, каждое направление — на условия перевозки, каждый филиал — на контакты и карту.
Настроили hreflang для городских поддоменов (будущая фаза — мультигород).
Неделя 10-12: тестирование и запуск
Две недели нагрузочного и функционального тестирования. Проверили на 15 устройствах — от iPhone SE до Samsung Galaxy S24 Ultra. Каждая форма, каждый калькулятор, каждая кнопка.
Подготовили 301 редиректы со всех 340 старых URL на новые. Ни одна проиндексированная страница не потеряла свой вес.
Запуск — ночью, с переключением DNS. Утром проверили: всё работает, формы приходят, калькулятор считает, старые URL редиректят.
Результаты
Замеры через 2 месяца после запуска.
Скорость. PageSpeed Insights: 96 на мобильных, 99 на десктопе. Время загрузки главной страницы — 1.2 секунды (было 4.7). LCP — 1.4 секунды (было 6.2). CLS — 0.02 (было 0.35). Все Core Web Vitals — зелёные.
Конверсия. Выросла с 0.8% до 2.1%. В 2.5 раза. При том же трафике это 25 заявок в день вместо 10. Доля мобильных заявок выросла с 15% до 52% — потому что с мобильного теперь можно пользоваться сайтом.
Калькулятор. 73% посетителей главной страницы взаимодействуют с калькулятором. 8% из них оставляют заявку. Калькулятор стал главной точкой входа в воронку продаж.
Формы. Конверсия заполнения формы (начал → отправил) выросла с 15% до 68%. Четыре поля вместо двенадцати сделали своё дело.
Поведенческие факторы. Средняя глубина просмотра: 3.8 страниц (было 1.4). Время на сайте: 4 минуты 20 секунд (было 1 минута 10 секунд). Показатель отказов: 22% (было 65%).
SEO. Через 6 недель после запуска количество запросов в топ-10 выросло со 180 до 340. Через 2 месяца — до 520. Органический трафик вырос на 35% и продолжает расти. Яндекс оценил улучшение поведенческих факторов и начал поднимать позиции.
Отслеживание грузов. 120-150 проверок статуса в день через сайт. Раньше каждая из них была звонком в офис. Операторы высвободили 2-3 часа рабочего времени ежедневно.
Экономический эффект. При тех же расходах на рекламу количество заявок выросло в 2.5 раза. Стоимость заявки упала с 4 200 до 1 700 рублей. За первые два месяца после запуска клиент получил на 45 заявок больше, чем за предыдущие два — без увеличения рекламного бюджета.
Сейчас работаем над второй фазой: мультигородовая структура через поддомены и интеграция с системой управления перевозками для онлайн-заказа.