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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Портфолио на карте

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

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

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

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

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

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

Страница	Ответ сервера	Вес в передаче
Главная	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. Другие работы собраны в портфолио, а варианты сайтов и что в них входит описаны в разделе сайты.