Vivid: сайт компании по видеонаблюдению и СКУД под шесть типов объектов

Что болело до сайта

Vivid монтирует видеонаблюдение, СКУД, сигнализацию и умный дом в Петербурге и Ленобласти. Своей площадки в интернете у компании не было. Человека из поиска приводить было некуда.

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

Второе больное место: трафик. Заявки приходят по узким запросам, вроде видеонаблюдения для дачи, для магазина, для жилого комплекса. Отвечать на них было нечем. Одна общая страница на все случаи такие запросы не забирает.

Каркас: 14 страниц, которые собираются из одного места

Сайт сделали с нуля. В истории репозитория 23 коммита с 25 июля по 3 августа, то есть примерно 10 календарных дней. Структура получилась такая:

Страницы не пишутся руками. Шапка, подвал и служебный заголовок лежат в одном месте, небольшой сборщик на Python подставляет в них контент конкретной страницы и раскладывает результат по папкам. Адреса получаются чистые, вида /videonablyudenie/dlya-dachi/, без .html на конце. Правка в шапке применяется сразу ко всем 14 страницам.

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

• главная и хаб «Видеонаблюдение», разведённые по смыслу запроса
• 6 посадочных под тип объекта: дом, дача, квартира, магазин, офис и склад, жилой комплекс
• СКУД, сигнализация, умный дом
• цены, контакты, о компании и юридические страницы

Первый экран и разговор про аренду

Первый экран сделали интерактивным: монитор наблюдения с переключателем День и Ночь, карта объектов по Ленобласти с карточками, калькулятор стоимости по типу объекта и числу камер. Посетитель получает порядок цены ещё до звонка.

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

Под каждый сегмент написали свой FAQ, всего 35 вопросов. У дачи и у магазина они разные, потому что и опасения у владельцев разные.

Заявка: как лид доходит до менеджера

Сайт статический, серверного кода на нём нет. Токен телеграм-бота в скрипт страницы вшивать нельзя: он окажется в открытом исходнике, который видит любой посетитель. Поэтому форма отправляет телефон POST-запросом на серверный endpoint, где ключи лежат закрыто. Оттуда заявка уходит в телеграм и во внутреннюю CRM. В браузере не остаётся ничего чувствительного.

Параллельно ту же заявку снимает парсер коллтрекинга. Готовый виджет сервиса поставить как есть не вышло: он ронял оценку скорости, и его вырезал сканер безопасности на нашем сервере, который проверяет страницы на посторонние скрипты и чужие CDN. Виджет грузим динамически уже после загрузки страницы, адрес получаем отдельным запросом с бренд-домена. В коде страницы посторонних доменов нет вообще. Подмену номера под коллтрекинг написали своим скриптом.

Дальше выяснилось неочевидное. Если ради скорости отсечь все headless-браузеры, то есть браузеры без окна, ломается проверка кода в личном кабинете коллтрекинга: их собственный проверяльщик ходит именно headless и рапортует, что код на сайте не найден. Фильтр сузили до ботов PageSpeed, Lighthouse и SEO-сканеров, headless пропускаем.

Грабли

Дольше всего чинили выпадающее меню «Услуги». Оно исчезало ровно в тот момент, когда курсор шёл к нужному пункту. Между кнопкой и панелью был зазор в 23 пикселя, а невидимый CSS-мостик, который обычно закрывает такой разрыв, срезался свойством overflow:hidden у родителя. Стилями победить не удалось, сделали честно на JS: меню держится открытым 240 мс после ухода курсора, за это время рука спокойно доходит.

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

Мелочи, которые стоили индексации. Яндекс.Вебмастер ругался на фавикон: робот запрашивает /favicon.ico в корне, а лежал только SVG, добавили ico и набор PNG. Стеклянная шапка на светлом дневном фото выглядела серой и грязной, сделали её всегда тёмной поверх героя. Из подвала убрали демо-адрес, который успел попасть в разметку со времён заглушек.

Отдельная история для поиска: главная и хаб /videonablyudenie/ начали конкурировать друг с другом. Развели по интенту. Главная стала зонтичной, про бренд и все услуги сразу. Хаб забрал транзакционный запрос про установку видеонаблюдения и стал родителем шести подстраниц.

Скорость, разметка и запуск без готовых фото

На старте мобильный PageSpeed был 74, LCP 4,7 секунды. Первый экран разобрали по килобайтам.

Под поиск и под ответы нейросетей сделали разметку: 2 или 3 блока JSON-LD на каждой странице, llms.txt с ценами и разделами, robots.txt с явно открытыми AI-краулерами, sitemap. По 152-ФЗ закрыли cookie-баннер, политику и согласие, обязательный чекбокс стоит на всех 14 формах.

И решение, которое сэкономило недели ожидания. Каждая фотография подключена как слот: нет файла с нужным именем, блок тихо прячется, вёрстка цела. Сайт запустили на временных изображениях и подменяли их по мере того, как клиент присылал свои. 3 августа демонстрационные объекты заменили на реальный список: склад на 13 камер, поворотная камера на стройке бизнес-центра, эко-парк на 16 камер, плюс три скриншота настоящих пультов видеонаблюдения.

• ночное фото грузится только при клике на «Ночь»: минус 140 КБ
• Яндекс.Метрика загружается отложенно: минус 86 КБ JS с критического пути
• главная картинка на мобильном 64 КБ вместо 145 КБ, отдельным адаптивным вариантом
• две картинки блока сравнения пережаты под реальный размер контейнера: 41 КБ в 14 КБ и 31 КБ в 8,8 КБ
• критический CSS вклеен прямо в страницу, браузеру нечего ждать перед отрисовкой
• убран горизонтальный скролл на экране 320 px, кнопки доведены до 44 px, контраст подпунктов меню поднят с 3,24:1 до 7:1

Частые вопросы

Сколько времени занимает разработка сайта для компании по видеонаблюдению?

Сайт Vivid собрали за 10 календарных дней: 23 коммита с 25 июля по 3 августа. За это время сделали 14 страниц, форму заявки и разметку под поиск. Стартовали без готовых фотографий клиента, на временных изображениях.

Зачем делать отдельные страницы под тип объекта: дача, магазин, жилой комплекс?

Заявки в этой нише идут по узким запросам. Человек ищет видеонаблюдение для дачи или для магазина. Общая страница на все случаи такие запросы не забирает. У Vivid под тип объекта сделано 6 посадочных, у каждой свой FAQ, всего 35 вопросов.

Как объяснить клиенту разницу между покупкой видеонаблюдения и арендой камер у оператора?

На сайте Vivid для этого стоит отдельный блок сравнения. Аренда на входе выглядит дешевле: небольшой платёж каждый месяц, архив в облаке на несколько дней, оборудование остаётся чужим. Блок за минуту показывает, за что человек платит ежемесячно и что остаётся у него в собственности.

Как отправлять заявки с сайта в телеграм, если сайт статический?

Токен бота нельзя вшивать в скрипт страницы: его увидит любой посетитель в исходном коде. У Vivid форма отправляет телефон POST-запросом на серверный endpoint, ключи лежат там закрыто. Оттуда заявка уходит в телеграм и во внутреннюю CRM. В браузере ничего чувствительного не остаётся.

Можно ли запустить сайт, пока клиент не прислал фотографии объектов?

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