Как команда разработки в JetBit свою “Тильду” писала
Заказчик Маркетинговое агентство «Market Group» — это коммуникационное агентство, которое входит в ТОП 15 национального рейтинга коммуникационных агентств HP2K, членство в АКМР, АКАР, РАСОЗадачаРазработать новый сайт с удобной админкой и конструктором страниц, как на Tilda, чтобы для SEO был удобен и всё это недорого чтобы было.
Компании приходят к нам за эффективными решениями и экспертизой, чтобы мы подсказали, как лучше и быстрее решить их задачи. За 15 лет работы мы научились находить самые короткие пути к решению проблем клиентов, которые бы оставались рентабельными для их бизнеса и могли потом поддерживаться не только самими авторами разработки. С одной стороны стараемся использовать готовые решения или старые наработки, которые подстраиваются под новые задачи, для минимизации затрат клиентов, а с другой — обеспечить удобство использования и гибкость продукта. Когда клиенты приходят с просьбой сайта, который можно было бы редактировать конструктором, сразу на ум приходит лидер рынка по конструкторам сайтов Тильда. Но с уходом с российского рынка из-за санкций другого сервиса конструктора сайтов Wix, использование Тильда становится рисковым. О поиске компромиссов и золотой середине и будет этот кейс.
Поехали!
ПАРА СЛОВ О КЛИЕНТЕ И ЗАДАЧЕ
«Market Group» — Это коммуникационное агентство, которое входит в ТОП 15 национального рейтинга коммуникационных агентств HP2K, членство в АКМР, АКАР, РАСО. С 1999 г. успешно работает с крупными корпоративными и государственными клиентами, привнося в эти проекты креатив и современные технологии. Сайт такой компании должен обладать WOW эффектом и делать упор на портфолио по выполненным проектам, чтобы привлекать различные тендерные комиссии при беглом взгляде последних. А чтобы был траффик и по коммерческим клиентам, сайт должен быть и SEO оптимизированным.
Важную роль в каждом проекте играет бизнес-аналитик. В данном случае он выслушал идеи клиента о том, что им нужно делать быстро и много страниц портфолио, каждая из которых была бы яркой, с разной структурой, адаптивной и для этого не нужно было бы программировать. Исходя из этого очевидна была надобность некого визуального конструктора, потому вырисовывались следующие цели:
Цели
- Создать сайт на готовой системе управления сайтом с открытым кодом, которая имела бы основной функционал управления сайтом: распределение прав пользователей, создание редактирование удаление страниц, шаблонизатор и т.п.;
- Создать визуальный конструктор страниц из разных настраиваемых типовых блоков;
- Листинг портфолио должен был иметь динамическую структуру, чтобы блоки разных размеров собирались в цельную сетку без пробелов (что-то вроде тетриса).
- Перенести информацию со старого сайта и заполнить новые страницы.
В итоге — сделать более привлекательный современный сайт и минимизировать время его дальнейшего наполнения и обслуживания.
Варианты решения
Исходя из вводных данных были отброшены варианты реализации на фреймворках с написанием собственного конструктора. Из распространенных готовых бесплатных решений из нашего стека оставались Тильда, WordPress + Elementor и ModX (Evolution).
Wordpress — нормальная история для клиентов, которым нужно что-то доброе и вечное для блога, с максимальными возможностями из коробки. Тильда хороша для визиток и лендингов. Тильду отмели, так как она не отвечала удобству управления многостраничным сайтом, его сео оптимизации и динамическому листингу портфолио (+ с недавней блокировкой конструктора Wix, Тильда на очереди на уход из России). WordPress с Elementor отпугнул тем, что для гибкого управления блоками elementor уже нужен не бесплатный плагин Elementor Pro и тем, что при долгой эксплуатации сайтов на WP с множеством реализаций функционала через готовые плагины с их постоянным обновлением част закрадываются какие-то баги в работе сайта. Потому остановились в выборе на ModX Evolution, как готовое гибкое решение, оставался вопрос с конструктором.
КАК РЕШАЛИ ЗАДАЧУ
Для реализации конструктора страниц на базе CMS ModX Evo за основу был взят функционал ModX MultiFields. В MODX MultiFields — это дополнительное поле (TV — Template Variable), позволяющее работать с набором полей внутри одного TV. Оно особенно полезно, когда необходимо создать сложную структуру данных (например, несколько текстовых полей, изображений, ссылок и т.д.), которая будет храниться в одном месте и выводиться на странице.
### Основные возможности MultiFields:
- Набор полей внутри TV — MultiFields позволяет создавать группы полей (текстовые, изображение, ссылка и т.д.) и выводить их как единое целое.
- Гибкость в настройке — Вы можете добавить различные типы данных, такие как:
- Текстовые поля (input)
- Поля для ввода ссылок
- Поля для загрузки изображений
- Выбор даты (Datepicker)
- И другие кастомные поля.
Удобство редактирования — Поля в MultiFields могут быть динамическими (их можно добавлять, удалять и редактировать прямо из интерфейса MODX).
Таким образом, MultiFields значительно упрощает работу с набором данных в одном TV, обеспечивая удобное управление и гибкий вывод. Технически работает так:
Указывается для какого-то TV тип multifields и создаётся одноимённый файл файл-конфиг. Этот файл содержит многоуровневый массив блоков и их настроек. Блок содержит список полей, их типы и шаблоны для вывода как в админке, так и во фронте. Блок может быть публичным — его можно выбирать в админке в конструкторе, а может быть приватным — в конструкторе он не виден, но его можно вставлять внутрь другого блока в качестве поля. Таким образом можно создавать блоки с полями большой вложенности. Вместе с этим, в настройках поля можно указывать, что поле, это контейнер множества блоков: внутри поля можно плодить вложенный блок. В этом случае появляется + и можно множить однотипные блоки нужное число раз. Это применимо для повторяющихся блоков, списков, галерей.
Используя этот файл-конфиг, в админке модх специальный плагин скрывает поле TV и выводит конструктор. Визуальное оформление блоков можно настраивать в css. Собранная конструктором страница сохраняется как json в TV.
На фронте специальный сниппет читает конфиг, TV, и выводит этот TV, применив шаблоны из конфига, учитывая заданную вложенность блоков.
Что еще удалось решить
- Исправили показатели Google Page Speed и оптимизировали скорость загрузки страниц;
- Сделали динамическое построение миниатюр страниц портфолио в списках, которые разделены по тегам. Если работа относится к нескольким тематикам сразу, то в каждом списке она может занимать разное положение в сетке проектов. Это поведение настраивается в админке;
- Скорректировали sitemap.xml и robots.txt, сгенерировали карту сайта;
- Перевезли страницы на ModX;
- Подключили к страницам конструктор из модуля;
- Перенесли исполнение части JS-скриптов в отдельные потоки;
Таким образом, используя наработки продуктового подхода. Команда «JetBit» использовала решения, которые максимально соответствуют потребностям клиента и основаны на анализе задач и болях заказчика. Исходя из аналитики, мы выделили ключевые аспекты проекта и определили стратегию, которая обеспечивает оптимальное сочетание эффективности и функциональности. Работа над проектом стартовала в январе 2024 года. В команде со стороны «JetBit» были бизнес-аналитик, дизайнер, full-stack программист, контент менеджер и аккаунт менеджер и один менеджер был со стороны клиента. Весь процесс внедрения изменений завершился через 2 месяца.
Был медленный и устаревший вариант сайта, а теперь — конфетка, комбайн, на котором можно все, что угодно. На конструкторе собрали около 90 страниц: портфолио и экспериментальные для А/Б тестов. Перенесли информацию со старых страниц; контент стал управляемым, менеджерам больше не нужно было изучать программирование в свободное от основной работы время. Стало возможным полное изменение структуры страниц на фронтенде. Переписанное на современной CMS ModX Evolution, которая в основе своей создана на Laravel и компонентный подход позволили объединить хранение скриптов, ускорить загрузку сайта на 45%.
РЕЗУЛЬТАТЫ РАБОТЫ
После показа наполнения первых страниц через конструктор, на следующий день контент-менеджеры и маркетологи подхватили знамя и продолжили самостоятельно создавать новые страницы через конструктор такого вида
Возможности маркетологов стали шире — можно делать много хорошего, тестировать гипотезы и не платить за разработку лендинга много денег. Если счастье SEO-специалиста можно измерить, то остановимся на том, что оптимизатор в этом кейсе был очень рад, потому что стало можно:
- быстро и бесплатно собирать яркий лендинг;
- размещать полезные материалы и кастомизировать любые страницы;
- внедрять любые не шаблонные решения там, где они нужны;
- наращивать положительный клиентский опыт;
- оптимизировать скорость загрузки страниц
- забыть про ограничения!
Все страницы сайта спокойно собираются без разработчиков, а значит, низкий прайс на работу с сайтом остается, и заказчик не платит за верстку новых страниц.
При создании веб-ресурсов ключевым параметром остается показатель Time to Market. Это особенно важно, когда требуется оперативно протестировать бизнес-гипотезу. Например, маркетолог может захотеть пройти через путь клиента, чтобы выявить способы оптимизации воронки продаж, при этом минимизируя привлечение специалистов: разработчиков, дизайнеров и других участников команды.
В этом проекте наша работа завершилась успешным кейсом. Конструктор сайта был создан в сжатые сроки, заказчик остался доволен, и мы продолжаем сотрудничество.
Мы могли бы просто описать решение задачи, но предпочитаем показать, как наша разработка устроена изнутри и чем мы отличаемся благодаря продуктовому подходу. Если вам нужна консультация или IT-решение для роста бизнеса, обращайтесь.
ПРО SEO ОПТИМИЗАЦИЮ САЙТА
Современные поисковые системы придают больше значения не отдельным документам, а структурированным коллекциям документов, создавая целые графы и распределяя вес страниц по сложным алгоритмам. Расчеты учитывают баланс между расширением индексируемого контента и совокупным спросом, на который может ответить поисковая система. Такая конкурентная среда в борьбе за первые позиции в поисковой выдаче подталкивает владельцев сайтов к активному поиску точек роста — добавлению нового контента, улучшению структуры и других элементов, чтобы привлечь больше качественного трафика. Поэтому самое простое решение использования Тильды становится ограничением для сео-оптимизации многостраничных сайтов. Чтобы конкурировать с сайтами, у которых большой траст, запросный индекс, проработанные коммерческие факторы — мы чаще делаем сайты на более гибкой платформе, которая позволяет внедрять всякие-разные технические задания.
Также это решает проблему дальнейшего роста. Если бизнесу в будущем понадобятся сложные, дорогие в обслуживании и ресурсозатратные связки ПО/сервисов. Какой-нибудь условный airtable + zapier + webflow + еще пару сервисов, то модульная система ModX позволит расти без полного рефакторинга проекта.
Для того, чтобы было удобно администрировать такие сайты, добавляются шаблоны метатегов, массовое редактирование свойств страниц и т.п. , чтобы количество действий, которые надо совершить для внесения изменений на все 100500 страниц, было минимальным.
РЕЗЮМЕ
- в 5 раз ускорили работу менеджеров по наполнению сайта.
- в 2 раза ускорили онбординг новых контент-менеджеров
- сделали более конверсионный сайт
«Мы работаем с максимальной отдачей, для того, чтобы предложить вам самое эффективное решение для реализации ваших задач. Стараемся никому не отказывать, стремясь помочь бизнесу и создать кейс, о котором рассказать не стыдно. Мы всегда готовы проконсультировать вас и дать необходимые рекомендации по подготовке к создани. вашего сайта. Оставляйте заявку на бесплатную консультацию
Перейти на сайт
Полный текст статьи читайте на CMS Magazine
