Дом строят 120 дней. Сайт открывается за треть секунды

Мы сделали сайт для компании «Домик из бруса» — 154 проекта домов и бань, каталог с фильтрами, калькулятор цены, карта построенных объектов и панель управления, в которой владелец сам меняет цены и фотографии, не звоня разработчику. Главная страница полностью загружается за 0,36 секунды и весит 17,6 КБ.

Сайт, который не превращается в абонемент к разработчику

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

Была компания, которая с 2008 года строит дома и бани из бруса, и сайт на конструкторе Tilda. Конструктор нормально держит визитку на десять страниц. Он плохо держит каталог, где полторы сотни проектов, у каждого — галерея, площадь, размеры, тип крыши, набор опций и своя цена, которая зависит от сечения бруса, фундамента и кровли.

Стало: сайт domikizbrusa.ru — 197 страниц, каталог на 154 проекта, калькулятор, квиз, карта построенных домов, заявки в Telegram и панель управления на русском языке.

Первый экран отвечает на вопрос, а не рассказывает о компании

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

Каталог: фильтры, которые срабатывают мгновенно

Человек, который выбирает дом, почти никогда не листает полторы сотни карточек подряд. Он знает про себя две-три вещи: «одноэтажный», «до ста квадратов», «обязательно терраса». Каталог устроен под это: этажность, площадь, размер, тип крыши и опции — эркер, балкон, гараж, второй свет, котельная, терраса, сауна.

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

Страница проекта: галерея, характеристики, честная комплектация

Галерея листается пальцем и работает, даже если браузер не выполнил ни строчки кода: она собрана на нативной прокрутке с «прилипанием» кадров, а не на состоянии в JavaScript.

Блок «Что входит в стоимость» — раскрывающиеся разделы: пиломатериалы, основание, стены, перекрытия, кровля, отделка, доставка и сборка. Это самое читаемое место у тех, кто сравнивает подрядчиков, и самое неудобное для ведения: у большинства проектов комплектация общая, у некоторых своя. В панели это решено наследованием — есть общая мастер-комплектация, и её можно переопределить у конкретного проекта.

Калькулятор: цена меняется, пока вы её собираете

«Сколько будет стоить» — вопрос, на который большинство сайтов отвечает формой «оставьте телефон, менеджер перезвонит». Здесь на него отвечают цифрой. Посетитель собирает дом как конструктор: сечение и тип бруса, фундамент, кровля. Слева всё время видна итоговая стоимость и то, что уже выбрано. Позиции, которых нет в прайсе, честно помечены «По запросу», а не подставляются наугад.

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

Портфолио — карта, а не галерея

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

Телефон в кармане

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

Все формы — расчёт, обратный звонок, вопрос, квиз — ведут в одно место: заявка сохраняется в панели (со страницей, с которой отправлена, устройством и адресом), падает в Telegram и дублируется на почту.

Почему сайт открывается за треть секунды

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

Страница	Ответ сервера	Вес в передаче
Главная	0,22 с	17,6 КБ
Каталог домов	0,43 с	30,5 КБ
Портфолио	0,22 с	14,5 КБ
Контакты	0,23 с	9,7 КБ

Исходно главная весит 216 КБ, а по проводу летит 17,6 КБ — в двенадцать раз меньше: всю статику мы сжимаем на этапе сборки самым тяжёлым режимом, и сервер отдаёт уже сжатые файлы. Три следствия важнее самих цифр:

• Сайт почти невозможно уронить. Ронять нечего — это файлы на диске. Упала панель управления — сайт работает. Сломалась сборка — остаётся предыдущая рабочая версия.
• Сайт почти нечем взломать. Наружу не смотрит ни база, ни движок рендеринга. Вся поверхность атаки — статические файлы и один адрес, куда уходят заявки.
• Наплыв посетителей ничего не стоит. Реклама, сюжет, сезон — сервер отдаёт файлы, а не считает страницы.

Обратная сторона тиража: как клиент печатает новый

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

• Кнопка «Опубликовать изменения» прямо в разделе, где клиент правит контент. Нажал — через 5–7 минут изменения на сайте.
• Автопубликация. Раз в 15 минут система смотрит, были ли правки, и публикует сама, если с последней правки прошло полчаса. Отсчёт именно от последней: пока человек редактирует, сборка не стартует и не выкатывает полуготовое.
• Ночная пересборка в 5:40 утра — страховка на всё, что забыли: к началу рабочего дня сайт всегда актуален.

По факту про кнопку можно вообще не помнить — но она есть, и ни один сценарий «а разработчик не отвечает» здесь не срабатывает.

Что мы находим, когда всё «работает»

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

Зелёная сборка ≠ работающий сайт. Система управления контентом, когда запросу не хватает прав на поле, не ругается — она молча выбрасывает это поле из ответа. Для кода сайта это выглядит так, будто у проектов просто нет фотографий: он аккуратно нарисует полторы сотни карточек без единого изображения, и сборка будет успешной. Причина лежала в основании: сборка ходила в панель вообще без ключа доступа, читая контент на правах случайного посетителя. Починили не симптом — завели служебную учётную запись с правами ровно на чтение опубликованного контента. А в конвейер добавили проверку не «процесс завершился успешно», а что получилось в результате: страниц в сборке, детальных страниц, превью для соцсетей, адресов в карте сайта, ссылок на изображения. Карта сайта однажды схлопывалась со 194 адресов до 16, потому что один запрос тихо упал, — по статусу сборки это не видно вообще.

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

Такие вещи не находятся от «современных технологий». Они находятся от привычки не закрывать задачу, пока не понял причину.

Что клиент получил, кроме сайта

• Панель управления на русском — с подсказками под конкретную задачу, а не «админка, разбирайтесь сами». Под проект написано девять собственных расширений: сетка галереи с перетаскиванием и выбором обложки, поле для видео, импорт каталога из таблицы, генерация миниатюр, обработчик заявок и другое.
• Руководство пользователя — 21 страница со скриншотами на отдельном адресе, закрытом от поисковиков. В девяти случаях из десяти вопрос решается без разработчика — это цель, а не побочный эффект.
• Резервные копии базы — ежедневно ночью в облако, семь копий, кнопка «сделать сейчас» и сторож, который пишет в Telegram, только если копии нет. Ежедневные «всё хорошо» перестают читать через неделю.
• Бот управления сервером — состояние, публикация, перезапуск, сброс кэша, бэкап, логи. Доступ только с разрешённых аккаунтов.
• Аналитика и SEO из коробки — Яндекс.Метрика с Вебвизором, канонические адреса, своя картинка для соцсетей у каждой из 194 страниц, карта сайта, хлебные крошки, структурированная разметка и 330 правил переадресации со старого сайта.
• 250 автоматических тестов, все зелёные. С честной оговоркой, зафиксированной аудитом: они покрывают расчётную и служебную часть, сложные интерактивные компоненты пока не покрыты — это отдельная задача, а не спрятанный под ковёр факт.

Что это значит для вас

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

Второй: вам сделают красиво и оставят систему, которая сама себя проверяет. Где выкладка не пройдёт, если в каталоге пропали картинки. Где заявка приходит в мессенджер и одновременно ложится в базу. Где вы меняете цену сами, а если не нажмёте кнопку — сайт опубликует изменения без вас.

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

Посмотреть результат вживую: domikizbrusa.ru. Другие работы — в портфолио, варианты сайтов и что в них входит — в разделе сайты.

Технологии — для тех, кто разбирается

Next.js 16 с полной статической генерацией (output: 'export'), CSS Modules, Directus 11 в качестве CMS с девятью собственными расширениями. Картинки — imgproxy с подписанными URL, отдача — nginx с предсжатием статики (brotli -q 11). Формы — отдельное расширение Directus, единственная динамическая точка сайта; антиспам: rate-limit → honeypot → time-check → CAPTCHA. CI/CD — GitHub Actions с валидацией артефакта сборки по пяти порогам и интеграционным тестом nginx на реальном образе; доставка образа по SSH, хранение двух последних версий, откат без пересборки. Карты — Яндекс.Карты JS API v3, с полностью рабочим резервом на Leaflet и OpenStreetMap без ключа.