Сайт за 15 долларов, который вырос в собственную платформу: честная история qupe.ru

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

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

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

Начало: сайт за три недели и 15 долларов

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

• бесплатно — денег на лицензии нет;
• быстрая работа — скорость критична для SEO, а мы SEO-агентство;
• современное ядро — чтобы не переписывать всё через год;
• понятная админка — контент должны вести маркетологи, а не программисты;
• простота и дешевизна доработок;
• широкое распространение — чтобы легко найти исполнителей на рынке;
• масштабируемость и гибкая настройка шаблонов — вплоть до A/B-тестов разных версий страниц.

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

Дальше — предельно прагматично. Купили готовый HTML-шаблон на ThemeForest, интегрировали его в MODX, написали тексты, собрали тарифы. Всё делали сами, своими руками, без подрядчиков.

Итог: 15 долларов за шаблон, три недели работы — и сайт в бою.

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

Для бизнеса: начинать с недорогого шаблонного решения — нормально и правильно. Ошибка не в том, чтобы стартовать дёшево. Ошибка — не заметить момент, когда дешёвое решение начало тормозить рост.

Первый редизайн: сайт-конструктор

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

Мы затеяли полный редизайн и заложили в него принцип, которым пользуемся до сих пор: страница собирается из блоков, как из конструктора. Не «шаблон услуги», а набор независимых секций — первый экран, преимущества, этапы работ, тарифы, кейсы, отзывы, FAQ, формы захвата. Маркетолог собирает из них ту страницу, которая нужна под конкретный спрос.

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

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

Где всё начало ломаться: скорость и масштаб

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

Мы столкнулись с двумя проблемами сразу.

Производительность

Тяжёлые страницы отвечали медленно. Для SEO-агентства это вдвойне неприятно: скорость — прямой фактор ранжирования, и мы сами говорим об этом клиентам. Поисковый робот, который ждёт ответа несколько секунд, обходит меньше страниц и хуже к сайту относится. А живой посетитель просто уходит.

Масштабирование

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

Мы упёрлись в потолок архитектуры. Дальше можно было только бесконечно латать — или менять принцип.

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

Развилка: куда двигаться

Почему вообще JS-фреймворк

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

Почему Vue, а не React

Оба фреймворка решают задачу. Мы выбрали Vue по трём причинам:

1. Порог входа. Vue ближе к привычной вёрстке: HTML остаётся HTML. Верстальщик подключается к работе быстрее, чем в React, где интерфейс описывается более «программистски».
2. Скорость разработки. Меньше обвязки и лишнего кода — быстрее выпускаем изменения. Для сайта, который постоянно дорабатывается маркетингом, это ключевое.
3. Кадры и поддержка. На рынке достаточно 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 и Алиса корректно понимали, чем занимается компания, и правильно на нас ссылались.

Что получилось

Сухие итоги, которые легко проверить:

Сайт сегодня — это 181 страница, 70 кейсов в портфолио и десятки посадочных под конкретные ниши, каждая со своим набором блоков.

Что дальше

Мы не считаем работу законченной — сайт для нас живой продукт. Ближайшие направления:

Шире показывать услуги. Агентство давно вышло за рамки SEO: контекст, маркетплейсы, Авито, разработка, работа с картами и репутацией. Сайт должен раскрывать это так же подробно, как раскрывает поисковое продвижение.

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

Сборка для клиентских сайтов. Все решения, которые мы обкатали на себе — блочный конструктор, headless-связка, собственный API, серверный рендеринг, бесшовные обновления — мы упаковываем в готовую сборку. Чтобы клиент получал не «сайт на шаблоне», а платформу, которая изначально построена под скорость, SEO и рост.

Что из этой истории стоит забрать предпринимателю

1. Начинать дёшево — не стыдно. Наш первый сайт стоил 15 долларов и три недели. Он окупился многократно.
2. Выбирать платформу нужно по своим критериям, а не по моде. Мы выписали семь требований — и решение нашлось само.
3. Скорость сайта — это деньги. Она влияет на позиции, на отказы и на стоимость заявки. Если сайт «просто медленный» — вы уже платите за это.
4. Не выбрасывайте то, что работает. Мы сохранили MODX с накопленным контентом и привычной админкой, заменив только «лицо» сайта. Это сэкономило месяцы.
5. Красивый сайт на JS может быть невидим для поиска. Если вы заказываете современный сайт — обязательно спросите у подрядчика, как решён вопрос индексации. Ответ «поисковики умеют читать JS» — недостаточный.
6. Переделка — это не разовый проект, а процесс. Сайт, который не меняется, устаревает молча.

Хотите так же? Мы не продаём «сайты по шаблону». Мы делаем платформу, на которой ваш маркетинг сможет работать быстро: собирать посадочные под спрос, тестировать гипотезы и не упираться в технику.

Обсудить проект · Посмотреть наши кейсы · Разработка сайтов