Как я доработал сайт фулфилмента: от дизайна и текстов до SEO и скорости

Задача: превратить набор страниц в цельный B2B-сайт

Я продолжил работу над разделом фулфилмента на своём сайте. К этому моменту там уже были главная страница, отдельные направления для Wildberries, Ozon и Яндекс Маркета, блог и часть страниц услуг.

Но оставалось много мелочей, которые по отдельности могли казаться незначительными, а вместе создавали ощущение незавершённого проекта.

Где-то оставались временные формулировки, где-то страницы отличались друг от друга по структуре, формы ещё нужно было довести до нормальной работы, а первый экран хотелось сделать заметно живее.

Поэтому я решил пройти не отдельный блок, а практически весь контур /fulfillment целиком.

Сначала занялся первым экраном

Hero-блок — первое, что видит человек после открытия сайта. Мне не хотелось делать ещё один статичный экран с заголовком, текстом и двумя кнопками.

На главной я оставил понятный основной оффер, но добавил несколько уровней анимации.

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

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

Приёмка → Проверка → Упаковка → Поставка

По ней движется коробка и проходит этапы обработки.

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

На мобильной версии дорожку в итоге полностью убрал. На маленьком экране она занимала слишком много места и уже не давала того эффекта, ради которого создавалась.

Это хороший пример того, что эффектная desktop-механика не обязана любой ценой переноситься на телефон.

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

Привёл страницы услуг к одной логике

Следующей большой задачей стали внутренние страницы.

Я доработал:

• приёмку;
• упаковку;
• маркировку;
• доставку;
• возвраты;
• общую страницу услуг;
• Wildberries;
• Ozon;
• Яндекс Маркет;
• цены;
• кейсы;
• Честный знак.

Основной принцип был простой: посетитель не должен попадать на страницу, которая существует только ради поискового запроса.

У коммерческой страницы должна быть нормальная логика:

1. Что это за услуга.
2. Какую проблему она решает.
3. Что конкретно входит в работу.
4. Как выглядит процесс.
5. Кому это подходит.
6. Какие услуги связаны между собой.
7. Ответы на частые вопросы.
8. Понятный следующий шаг.

Так отдельные страницы стали частью одного сайта, а не набором разрозненных SEO-посадочных.

Переписал временные и слабые тексты

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

Например, упоминания будущих доработок, заглушек, согласований или элементов, которые появятся позже.

Я прошёлся по разделу и убрал такие формулировки.

Параллельно сократил часть текста и убрал повторения. Особенно это касалось страниц маркетплейсов: очень легко сделать Wildberries, Ozon и Яндекс Маркет одной страницей, где меняется только название площадки.

Поэтому я старался разводить их по смыслу и визуальной подаче.

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

Перевёл раздел на единый бренд

Ещё одна отдельная задача — полностью привести проект к бренду «Доминанта».

Старое рабочее название оставалось не только в видимых текстах. Такие вещи приходится искать глубже:

• title;
• meta description;
• Open Graph;
• Twitter meta;
• structured data;
• header;
• footer;
• отдельные шаблоны.

После доработки бренд стал единым во всём публичном разделе.

Например, заголовок главной сейчас строится в формате:

Фулфилмент для Wildberries, Ozon и Яндекс Маркета — Доминанта

Также og:site_name и schema.org используют «Доминанту».

Формы перестали быть просто элементом интерфейса

Ещё один важный этап — заявки.

Мне было важно, чтобы форма не просто красиво стояла внизу страницы, а действительно закрывала полный сценарий пользователя.

Теперь формы:

• отправляют данные на backend;
• сохраняют заявку в SQLite;
• отправляют уведомление в Telegram;
• могут передавать прикреплённый файл;
• показывают состояние отправки;
• сообщают об успехе или ошибке;
• блокируют повторное нажатие во время запроса;
• требуют согласия на обработку персональных данных.

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

Также появилась отдельная страница политики обработки персональных данных.

Форма калькулятора передаёт вместе с заявкой выбранные параметры партии, поэтому менеджер получает уже не пустое сообщение «хочу узнать цену», а контекст расчёта.

Кейсы без выдуманных отзывов

Отдельно пересмотрел страницу кейсов.

Когда подтверждённых отзывов и цифр ещё недостаточно, самый простой путь — придумать красивый результат. Я так делать не хотел.

Поэтому вместо выдуманных отзывов сделал упор на типовые бизнес-сценарии:

задача → проблема → действия Доминанты → результат

Например:

• срочная подготовка партии;
• проверка товара после поставщика;
• упаковка и маркировка;
• обработка возвратов;
• подготовка товара с обязательной маркировкой;
• регулярная работа с партиями.

Так страница всё равно показывает, с какими задачами работает компания, но не создаёт несуществующие кейсы.

SEO делал вместе со структурой сайта

После работы с контентом прошёлся по технической SEO-части.

Для коммерческих страниц настроены и проверены:

• уникальные title;
• description;
• canonical;
• Open Graph;
• schema.org;
• FAQ-разметка;
• внутренние переходы;
• robots.txt;
• sitemap.xml.

Проверил 15 основных URL — на момент проверки все возвращали 200.

На главной остался один H1, а canonical указывает на основной URL раздела.

Страница политики закрыта от индексации, как и административная часть блога.

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

Отдельно занялся скоростью

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

Один большой CSS был разделён на основной и тематический слои.

Для страниц также разделил JavaScript по фактической необходимости:

• заявки;
• калькулятор;
• hero-анимации;
• комментарии.

То есть страница больше не должна загружать весь JavaScript проекта только потому, что один из его компонентов используется где-то ещё.

Шрифт Manrope перенёс локально, чтобы первый экран не зависел от Google Fonts.

Для изображений подготовил responsive-варианты в WebP и AVIF, добавил picture, srcset, sizes, ширину и высоту изображений.

В общей сложности в директории фулфилмента подготовлено:

• 96 WebP-файлов;
• 96 AVIF-файлов.

Из production static также убрал 14 тяжёлых исходных PNG. Это освободило около 25,8 MiB.

Оригиналы при этом не потерялись — они были вынесены отдельно.

Что не получилось сделать идеально

В технической оптимизации тоже были ограничения.

Я проверял возможность использовать Brotli, но соответствующего модуля в текущем Nginx не оказалось. Поэтому специально перестраивать сервер ради него не стал — остался Gzip.

Также у меня не было полноценного контрольного PageSpeed-замера до начала всех изменений.

Поэтому писать что-то вроде «ускорил сайт на 40%» было бы просто выдумкой.

После работ я сделал внешние контрольные запросы:

• /fulfillment — HTML около 75,8 КБ, TTFB около 1,65 с;
• /fulfillment/blog — около 42 КБ, TTFB около 0,75 с;
• /fulfillment/priemka — около 39,4 КБ, TTFB около 0,68 с.

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

Что в итоге изменилось

Если собрать работу за день в один список, получилось довольно много:

• единый бренд «Доминанта»;
• очистка временных текстов;
• переработанные hero-блоки;
• анимация первого экрана;
• единая структура страниц услуг;
• отдельная страница доставки;
• переработанные кейсы;
• рабочий блог;
• контакты и информация о компании;
• юридические данные;
• полноценные формы;
• сохранение заявок в базе;
• Telegram-уведомления;
• отправка файлов;
• защита формы от простого спама;
• canonical и Open Graph;
• schema.org;
• FAQ-разметка;
• sitemap и robots.txt;
• локальные шрифты;
• раздельные CSS и JavaScript;
• responsive WebP/AVIF;
• оптимизация production static.

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

Другие мои проекты можно посмотреть в разделе кейсов, а отдельные разработки и автоматизации — в Digital-проектах.

Коротко по теме

• Хороший коммерческий сайт — это не только дизайн, но и тексты, формы, SEO и техническая часть.
• Анимация должна помогать понять услугу, а не просто двигаться ради эффекта.
• Внутренние страницы услуг лучше делать полноценными посадочными, а не SEO-заглушками.
• Не стоит придумывать кейсы, результаты и проценты ускорения, если их нельзя подтвердить.
• Оптимизацию изображений, CSS и JavaScript лучше делать уже с пониманием того, что действительно используется на каждой странице.

Нужен сайт под вашу задачу?

Если нужен лендинг, корпоративный сайт, небольшой каталог или другой digital-проект, можно оставить заявку. Я посмотрю задачу и предложу понятный вариант реализации.