Перенос ProCoffee с Битрикс на Tilda за полтора месяца

Полтора месяца вместо полугода, заметно более быстрый сайт и гораздо больше самостоятельности в сопровождении. Таков результат повторной разработки ProCoffee — сайта аренды профессиональных кофемашин в Москве и Санкт-Петербурге. За этим решением стоит несколько лет сотрудничества с клиентом, опыт разработки на 1С-Битрикс и желание пересмотреть подход к технической реализации коммерческих сайтов.

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

Тогда мы одновременно разрабатывали для клиента два проекта на 1С-Битрикс: сайт аренды профессиональных кофемашин и крупный интернет-магазин кофейного оборудования.

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

Для программной части привлекали специалиста по Битрикс, с которым работали удаленно.

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

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

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

Однако сложности были связаны и с решениями, которые мы принимали самостоятельно.

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

Приобрели его на ThemeForest. Шаблон относился к категории решений для WordPress, тогда как сайт разрабатывался на 1С-Битрикс.

Адаптацию верстки выполняли собственными силами. У руководителя разработки был большой опыт HTML-верстки, поэтому мы рассчитывали переработать готовый интерфейс под особенности проекта без привлечения дополнительной команды.

Поначалу такой подход выглядел рациональным.

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

Готовые шаблоны обычно проектируются как единая система. Когда значительная часть элементов меняется, исходная логика оформления постепенно нарушается, а поддержка решения усложняется.

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

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

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

За годы работы наше агентство реализовало более десяти проектов на 1С-Битрикс.

Мы хорошо знакомы с возможностями этой системы и понимаем, почему она востребована в коммерческой разработке.

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

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

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

После сдачи сайта ситуация может усугубляться.

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

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

Разумеется, подобные сложности не являются особенностью исключительно Битрикс или работы с фрилансерами. Они могут возникать в любом проекте, где сопровождение зависит от нескольких независимых участников.

Но именно этот опыт постепенно подтолкнул нас к поиску другого подхода.

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

Для определенного класса коммерческих сайтов таким инструментом стала Tilda.

За несколько лет возможности Tilda существенно расширились.

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

Одновременно мы накопили большой опыт создания на Tilda коммерческих сайтов и интернет-магазинов с модификациями стандартных блоков, собственными CSS-стилями и JavaScript.

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

Поэтому предложили клиенту перенести сайт с Битрикс на Tilda.

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

При этом не хотелось превращать редизайн в полную смену фирменного стиля.

Клиенту нравился прежний дизайн ProCoffee.

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

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

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

Сохранили цветовую палитру и часть графических элементов, но привели оформление к более последовательной системе.

В результате сайт остался узнаваемым для клиента и постоянных посетителей, но стал выглядеть аккуратнее и современнее.

К моменту редизайна ProCoffee уже имел историю поискового продвижения, проиндексированные страницы и сложившуюся структуру каталога.

Поэтому мы старались максимально сохранить существующую архитектуру.

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

Большинство адресов страниц оставили прежними. Для URL, которые пришлось изменить, настроили постоянные 301-редиректы.

Одновременно дополнили сайт новыми SEO-посадочными страницами и подготовили дополнительные материалы для блога.

Разработка, перенос контента и запуск новой версии заняли около полутора месяцев.

Для сравнения: первая разработка двух проектов на Битрикс продолжалась около полугода.

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

Тем не менее переход на Tilda заметно упростил организацию работ.

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

Мы считаем важным говорить об этом открыто.

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

Даже тщательно подготовленная миграция не гарантирует полного сохранения поисковой видимости.

Без отдельного анализа нельзя однозначно определить, какие именно факторы повлияли на позиции ProCoffee.

Сейчас восстановление поисковой видимости — одна из основных задач в рамках дальнейшего SEO-продвижения сайта.

Основу ProCoffee составляет каталог профессионального кофейного оборудования.

На сайте представлены автоматические, суперавтоматические и рожковые кофемашины, а также кофемолки.

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

Для организации каталога мы использовали встроенный модуль «Каталог товаров» Tilda.

Он позволил реализовать вывод оборудования, превью карточек и фильтрацию на сводных страницах разделов.

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

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

Фильтры расположены в левой колонке и позволяют посетителю последовательно сужать ассортимент.

За годы разработки каталогов и интернет-магазинов на Tilda мы сформировали собственный подход к товарным страницам.

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

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

Отдельное внимание уделили двум программам аренды.

Коммерческая аренда предполагает фиксированную плату за оборудование.

Аренда с покупкой кофе предусматривает приобретение определенного количества кофе на установленных условиях.

Оба варианта доступны непосредственно в карточке кофемашины.

На соответствующих кнопках указаны стоимость аренды или необходимый объем закупки кофе. Каждая кнопка открывает собственную форму заявки.

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

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

Одной из важных особенностей нового сайта стала система тематических SEO-посадочных страниц.

Похожий функционал мы пытались реализовать еще на предыдущей версии ProCoffee с использованием SEO-модуля Битрикс, но тогда довести его до нужного состояния не удалось.

На Tilda задача решилась значительно проще.

Принцип следующий: оборудование отбирается по определенным критериям, для подборки создается отдельная страница с человекопонятным URL и SEO-оптимизированным текстом.

Например, для автоматических кофемашин предусмотрена посадочная страница с оборудованием для салонов красоты:

https://procoffee.pro/catalog/avtomaticheskie/dlya-salona-krasoty

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

У каждой категории оборудования собственная группа таких страниц.

Для реализации нужного способа вывода ссылок потребовались модификации стандартных блоков Tilda.

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

Отдельно организовали раздел производителей.

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

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

Это расширяет возможности внутренней перелинковки и последующего поискового продвижения.

Еще одно важное направление нашей работы — контентное сопровождение ProCoffee.

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

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

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

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

Такая структура позволяет постепенно развивать информационное направление сайта и расширять его тематический охват в поисковых системах.

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

• Сервисное обслуживание.
  Раздел посвящен плановому обслуживанию и ремонту профессионального кофейного оборудования.
• Наш кофе.
  Здесь представлен кофе собственной обжарки из Бразилии.
• Программы аренды.
  Отдельная страница подробно объясняет различия между коммерческой арендой и арендой на условиях покупки кофе.

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

Самое заметное улучшение — скорость работы сайта.

Прежняя версия на Битрикс нередко загружалась довольно долго. После переноса страницы стали открываться значительно быстрее.

Это оценка нашей команды и клиента. Специальных сравнительных измерений до и после миграции мы не проводили, поэтому не приводим конкретных показателей прироста скорости.

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

Изменился и процесс сопровождения.

Теперь мы можем самостоятельно решать большинство вопросов, связанных с контентом, каталогом, оформлением и функциональными доработками, используя инструменты Tilda, CSS и JavaScript.

Для проекта, который находится на постоянном информационном сопровождении и SEO-продвижении, такая самостоятельность особенно важна.

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

Новую версию ProCoffee мы разработали в рамках действующей абонентской платы за информационное сопровождение и продвижение.

Клиенту не потребовалось отдельно оплачивать редизайн и перенос сайта.

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

В результате удалось решить накопившиеся технические и визуальные вопросы без дополнительных расходов заказчика на разработку.

После запуска новой версии работа над ProCoffee продолжается.

Сейчас один из главных приоритетов — восстановление поисковых позиций после миграции и дальнейшее развитие органического трафика.

Параллельно планируем несколько функциональных улучшений.

• Видеообзоры кофемашин.
  В карточках оборудования должны появиться видеоматериалы, которые готовит отдел маркетинга клиента.
• Автоматическое формирование коммерческих предложений.
  Планируем реализовать возможность скачивания документа с информацией о конкретной модели непосредственно со страницы товара.
• Приложение с личными кабинетами.
  Более масштабное направление — разработка приложения с несколькими пользовательскими ролями и разграничением прав доступа.

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

Рассматриваем два технологических варианта: Telegram Mini App и PWA. Окончательное решение будет зависеть от необходимого функционала, способов авторизации и интеграции с существующим сайтом.

Приложение планируется как функциональное продолжение ProCoffee, расширяющее возможности взаимодействия компании с клиентами.

За полтора месяца мы разработали и запустили новую версию ProCoffee на Tilda.

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

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

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

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

Посмотреть сайт ProCoffee