Сапожник без сапог — история, знакомая любому агентству. Мы продвигаем чужие сайты, и именно поэтому свой собственный обязаны держать в порядке: он наша витрина и наш полигон. Всё, что мы предлагаем клиентам, сначала обкатано на себе.
Это рассказ о том, как наш сайт прошёл путь от купленного за 15 долларов шаблона до связки, которую мы теперь готовы разворачивать для клиентов. Без прикрас: с тупиками, переделками и решениями, которые нам дорого дались.
Мы намеренно пишем эту статью языком, понятным предпринимателю, а не только разработчику. Потому что почти каждое техническое решение здесь на самом деле про деньги, скорость и заявки.
Начало: сайт за три недели и 15 долларов
Когда агентство только вставало на ноги, вопрос стоял ребром: нужен работающий сайт, а бюджета на разработку нет. Мы сели и выписали критерии к платформе — очень приземлённые:
- бесплатно — денег на лицензии нет;
- быстрая работа — скорость критична для SEO, а мы SEO-агентство;
- современное ядро — чтобы не переписывать всё через год;
- понятная админка — контент должны вести маркетологи, а не программисты;
- простота и дешевизна доработок;
- широкое распространение — чтобы легко найти исполнителей на рынке;
- масштабируемость и гибкая настройка шаблонов — вплоть до A/B-тестов разных версий страниц.
Под все эти условия одновременно подходила, по сути, одна CMS — MODX. Она бесплатная, при этом не навязывает свою вёрстку и структуру: ты сам решаешь, как устроены шаблоны и поля. Для агентства, которое хочет тонко управлять каждой посадочной страницей, это оказалось решающим.
Дальше — предельно прагматично. Купили готовый HTML-шаблон на ThemeForest, интегрировали его в MODX, написали тексты, собрали тарифы. Всё делали сами, своими руками, без подрядчиков.
Итог: 15 долларов за шаблон, три недели работы — и сайт в бою.
Этот сайт честно отработал свои годы. Он приносил заявки, на нём мы вели блог, тестировали гипотезы и учились. Но чем сильнее мы росли, тем чаще упирались в его потолок.
Для бизнеса: начинать с недорогого шаблонного решения — нормально и правильно. Ошибка не в том, чтобы стартовать дёшево. Ошибка — не заметить момент, когда дешёвое решение начало тормозить рост.
Первый редизайн: сайт-конструктор
Со временем стало ясно: типовой шаблон нам мал. У агентства десятки услуг, и каждая требует своей подачи. Для SEO-продвижения нужны одни блоки, для контекстной рекламы — другие, для маркетплейсов — третьи. Универсальная «рыба» одинаковых страниц проигрывает и людям, и поисковикам.
Мы затеяли полный редизайн и заложили в него принцип, которым пользуемся до сих пор: страница собирается из блоков, как из конструктора. Не «шаблон услуги», а набор независимых секций — первый экран, преимущества, этапы работ, тарифы, кейсы, отзывы, FAQ, формы захвата. Маркетолог собирает из них ту страницу, которая нужна под конкретный спрос.
Сегодня в нашей библиотеке 47 типов блоков, а сайт разросся до 181 страницы. Практически каждая посадочная имеет свой уникальный набор секций и свою логику убеждения.
Подход дал именно то, чего мы хотели: свободу маркетинга. Но у него обнаружилась обратная сторона.
Где всё начало ломаться: скорость и масштаб
Чем больше блоков на странице, тем больше запросов к базе данных при её сборке. Классическая CMS собирает страницу целиком на каждый запрос пользователя: достать контент, подставить в шаблон, отрисовать, отдать. Пока страниц немного и они простые — незаметно. Когда страниц под две сотни и каждая — уникальный набор из десятков блоков, картина меняется.
Мы столкнулись с двумя проблемами сразу.
Производительность
Тяжёлые страницы отвечали медленно. Для SEO-агентства это вдвойне неприятно: скорость — прямой фактор ранжирования, и мы сами говорим об этом клиентам. Поисковый робот, который ждёт ответа несколько секунд, обходит меньше страниц и хуже к сайту относится. А живой посетитель просто уходит.
Масштабирование
Каждый новый нестандартный блок усложнял шаблоны. Чем больше становился сайт, тем дороже обходилась любая правка дизайна: изменения приходилось руками разносить по множеству мест.
Мы упёрлись в потолок архитектуры. Дальше можно было только бесконечно латать — или менять принцип.
Для бизнеса: «сайт тормозит» — это не про эстетику. Это про глубину обхода поисковиком, позиции, отказы и стоимость заявки. Медленный сайт вы оплачиваете дважды: рекламным бюджетом и упущенным органическим трафиком.
Развилка: куда двигаться
Почему вообще JS-фреймворк
Мы хотели разделить две вещи, которые в классической CMS слиты воедино: хранение контента и его отображение. Тогда сайт перестаёт пересобираться целиком на каждый чих: интерфейс живёт своей жизнью, данные — своей. Переходы между страницами становятся мгновенными, интерактивные элементы (калькуляторы, фильтры кейсов, модальные окна) работают плавно, а дизайн можно менять, не трогая контент.
Почему Vue, а не React
Оба фреймворка решают задачу. Мы выбрали Vue по трём причинам:
- Порог входа. Vue ближе к привычной вёрстке: HTML остаётся HTML. Верстальщик подключается к работе быстрее, чем в React, где интерфейс описывается более «программистски».
- Скорость разработки. Меньше обвязки и лишнего кода — быстрее выпускаем изменения. Для сайта, который постоянно дорабатывается маркетингом, это ключевое.
- Кадры и поддержка. На рынке достаточно Vue-разработчиков, а экосистема Nuxt закрывает ровно наши задачи: маршрутизацию, SEO-теги, серверный рендеринг.
Сегодня сайт работает на Nuxt 4 и Vue 3 — актуальных версиях, а не на легаси.
Почему оставили MODX
Соблазн был: раз всё переписываем — давайте и бэкенд сделаем с нуля. Мы этого не сделали и считаем решение одним из самых верных.
- Контент уже жил в MODX — сотни страниц, тексты, кейсы, тарифы. Переносить это в новую систему — недели работы и риск потерять SEO-историю.
- Админка привычна команде. Маркетологи и контент-менеджеры умеют в ней работать. Новая система означала бы переобучение и потерю темпа.
- Готовый фундамент. Права доступа, редактор, медиатека, структура разделов, ЧПУ-адреса — всё это уже написано и годами отлажено. Писать своё — значит потратить месяцы на то, что и так работает.
Так родилась связка, которую в индустрии называют headless: MODX остался «мозгом» — местом, где живёт контент, а Vue/Nuxt стал «лицом» — тем, что видит посетитель.
Свой API-модуль: как мы подружили MODX и Nuxt
Чтобы связка заработала, нужно было решить главный вопрос: как фронтенд получает контент из CMS.
Готовые решения нас не устроили — они либо отдавали данные слишком «сырыми», либо не умели работать с нашей блочной структурой. Поэтому мы написали собственный модуль API для MODX, который отдаёт данные в Nuxt.
Важный нюанс: мы не стали писать всё с нуля. Мы взяли готовый фундамент MODX с его системой маршрутизации и надстроили над ним свои контроллеры. Получилось лучшее из двух миров: проверенное ядро CMS плюс ровно те методы выдачи данных, которые нужны нашему сайту.
Что умеет наш модуль:
- отдавать списки страниц и разделов с нужным набором полей — например, все кейсы портфолио с их результатами и тегами;
- отдавать содержимое блоков страницы — тарифы, этапы работ, FAQ, таблицы сравнения;
- отдавать глобальные настройки сайта — телефоны, адрес, реквизиты, соцсети (меняются в одном месте, обновляются везде);
- готовить изображения — отдавать их в нужном размере и современном формате, чтобы страницы весили меньше.
Ключевой принцип: фронтенд запрашивает только те поля, которые ему реально нужны для конкретной страницы. Не «всю страницу целиком», а точечно. Это и есть основа скорости.
Отдельно мы закрыли модуль по безопасности: доступ к данным идёт по ключу, разрешены только определённые методы, всё остальное отсекается.
Для бизнеса: это тот случай, когда «написать своё» окупается. Собственный слой выдачи данных — это не прихоть разработчиков, а контроль над скоростью сайта и независимость от чужих обновлений.
Главная ловушка: красивый сайт, которого не видит поисковик
Здесь нас ждал урок, который многие компании оплачивают потерей трафика.
Когда сайт сделан на JS-фреймворке «по умолчанию», он работает как SPA — одностраничное приложение. Браузер получает почти пустую страницу и уже потом дорисовывает содержимое скриптами. Человек разницы не замечает. А вот поисковый робот, заглянув в исходный код, видит пустоту: ни текста, ни заголовков, ни ссылок.
Для интернет-магазина это неприятно. Для SEO-агентства — недопустимо: сайт, который не индексируется, обесценивает всё, что мы говорим клиентам.
Мы решали задачу в два этапа.
Этап первый — отдавать роботам готовый HTML
Первым решением мы научились собирать страницы заранее и отдавать поисковикам уже наполненный контентом код. Проблема индексации ушла, но появилась новая: контент обновлялся с задержкой, а сайт у нас живой — тексты, кейсы и тарифы правятся постоянно.
Этап второй — полноценный SSR (серверный рендеринг)
Это и есть текущее решение. Теперь сервер собирает готовую HTML-страницу со всем содержимым и отдаёт её и человеку, и роботу — сразу, при первом запросе. А дальше в браузере «оживает» интерактив: мгновенные переходы, модальные окна, калькуляторы.
Что это дало на практике:
- поисковик получает полный текст, заголовки и ссылки с первого запроса — как у обычного сайта;
- посетитель видит контент мгновенно, не дожидаясь загрузки скриптов;
- сохранились все SEO-инструменты: мета-теги, canonical, карта сайта, микроразметка.
Заодно мы навели порядок в технической части, которую на обычных сайтах часто игнорируют: настроили микроразметку услуг с ценами, FAQ и статей (это то, что делает сниппет в выдаче заметнее), кэширование данных из CMS и бесшовное обновление сайта — теперь при выкладке новой версии сайт не «моргает» даже на секунду. Мы даже добавили файл-подсказку для нейросетей, чтобы ChatGPT и Алиса корректно понимали, чем занимается компания, и правильно на нас ссылались.
Что получилось
Сухие итоги, которые легко проверить:
| Показатель | Было | Стало |
|---|---|---|
| Скорость ответа страниц | секунды ожидания | 0,3–1 секунда |
| Вес главной страницы | 3,85 МБ | 1,38 МБ |
| Простой при обновлении сайта | несколько секунд недоступности | 0 секунд |
| Индексация | под угрозой из-за SPA | полный HTML для роботов |
| Структура | шаблоны, которые дорого менять | 47 блоков-конструктор |
Сайт сегодня — это 181 страница, 70 кейсов в портфолио и десятки посадочных под конкретные ниши, каждая со своим набором блоков.
Что дальше
Мы не считаем работу законченной — сайт для нас живой продукт. Ближайшие направления:
Шире показывать услуги. Агентство давно вышло за рамки SEO: контекст, маркетплейсы, Авито, разработка, работа с картами и репутацией. Сайт должен раскрывать это так же подробно, как раскрывает поисковое продвижение.
Автоматизация и собственные сервисы. Мы развиваем QupeSoft — свою платформу для внутренних задач: аналитика по проектам, автоматизация рутины в рекламных кабинетах, подготовка отчётов и коммерческих предложений. Часть этих инструментов мы планируем открывать клиентам, чтобы они видели работу по своему проекту прозрачно, а не «на словах».
Сборка для клиентских сайтов. Все решения, которые мы обкатали на себе — блочный конструктор, headless-связка, собственный API, серверный рендеринг, бесшовные обновления — мы упаковываем в готовую сборку. Чтобы клиент получал не «сайт на шаблоне», а платформу, которая изначально построена под скорость, SEO и рост.
Что из этой истории стоит забрать предпринимателю
- Начинать дёшево — не стыдно. Наш первый сайт стоил 15 долларов и три недели. Он окупился многократно.
- Выбирать платформу нужно по своим критериям, а не по моде. Мы выписали семь требований — и решение нашлось само.
- Скорость сайта — это деньги. Она влияет на позиции, на отказы и на стоимость заявки. Если сайт «просто медленный» — вы уже платите за это.
- Не выбрасывайте то, что работает. Мы сохранили MODX с накопленным контентом и привычной админкой, заменив только «лицо» сайта. Это сэкономило месяцы.
- Красивый сайт на JS может быть невидим для поиска. Если вы заказываете современный сайт — обязательно спросите у подрядчика, как решён вопрос индексации. Ответ «поисковики умеют читать JS» — недостаточный.
- Переделка — это не разовый проект, а процесс. Сайт, который не меняется, устаревает молча.
Хотите так же? Мы не продаём «сайты по шаблону». Мы делаем платформу, на которой ваш маркетинг сможет работать быстро: собирать посадочные под спрос, тестировать гипотезы и не упираться в технику.
Помогли 500+ сайтам выйти в ТОП