Перезапуск сайта для производителя испытательного оборудования

Задача

Stadler Prüfpumpen из Германии производит вакуумные насосы для проверки герметичности. С их помощью грузоотправители, проходные заводов и перевозчики наливных грузов меньше чем за 30 секунд проверяют, герметичны ли донный клапан и сливная задвижка автоцистерны, вручную, без электричества и сжатого воздуха. Клиенты в основном из химической отрасли, в том числе из-за рубежа.

Сайт был создан в 2007 году и работал на сервере рекламного агентства: главная страница и пять страниц на PHP, табличная вёрстка с фиксированной шириной 806 px, без viewport. На телефоне открывалась только уменьшенная десктопная версия. К тому же только немецкий язык, две страницы продуктов с одинаковым текстом, а на главной два предложения рядом с фотографией насоса размером 76 × 221 px. Заголовки страниц и метаданные не менялись с 2007 года, а в описании вместо «ü» к тому времени стоял испорченный символ.

Что требовалось: новый сайт по эскизу, несколько вариантов на выбор, на немецком, английском и французском. Одно условие выяснилось только после переезда: сервер агентства не только отдавал сайт, но и принимал почту. В том числе на адрес info@, которым сам заказчик не пользовался, но на который годами пишут крупные клиенты. После переезда сервер казался лишним, и расторжение договора отключило бы именно этот адрес.

Реализация

• Четыре макета за полдня. Один вариант близко к эскизу, плюс «Ночной синий», «Техника» в стиле чертёжного листа и «Динамика» с диагоналями. Заказчик выбрал на следующий день, а через три дня после первого запроса новый сайт работал на домене.
• Статика вместо WordPress. Чистые HTML, CSS и JavaScript, без CMS, базы данных, входа в админку и плагинов. Сканеры, ищущие вход в WordPress и конфигурационные файлы, ничего не находят, обновлять плагины не нужно. Плюс HTTPS с TLS 1.3, security-заголовки от HSTS до Content-Security-Policy и security.txt по RFC 9116. Хостинг: Cloudflare Worker на бесплатном тарифе, каждый push на GitHub пересобирает сайт.
• Три языка как отдельные деревья страниц. Немецкий, английский и французский с переведёнными адресами и hreflang на каждой странице вместо перевода скриптом во время загрузки. Поисковики видят каждую языковую версию как отдельную страницу, и всё работает даже без JavaScript. Переключатель языков ведёт на ту же страницу на другом языке и сохраняет место чтения.
• Форма заявки с собственным бэкендом. Статический хостинг не принимает формы. Второй небольшой Cloudflare Worker ещё раз проверяет каждую заявку на сервере и доставляет её письмом в существующий почтовый ящик заказчика, а «Ответить» отправляет ответ прямо автору заявки. Без сторонних сервисов, без базы данных. Для клиентов из-за рубежа: 243 страны и региона с телефонными кодами, названия стран на языке страницы и свободное поле для почтового индекса, потому что во многих странах в индексе есть буквы (SW1A 1AA, 1012 AB).
• Защита от спама без капчи с картинками. Cloudflare Turnstile вместо классической капчи, загружается только при открытии формы, плюс невидимое поле-ловушка, проверка источника и ограничение длины. Кто обходит форму и отправляет данные напрямую в интерфейс, без корректных данных и действительного токена капчи не пройдёт. Известных ботов защита Cloudflare останавливает ещё до сайта.
• Каждый старый адрес перенаправлен. Список старых адресов взят из веб-архива: пять страниц на PHP, каждая через 301 ведёт на соответствующую новую страницу. Ещё два домена перенаправляют на основной с сохранением пути и параметров, http:// через 301 на https://.
• Почта отвязана от сервера агентства. В тот же день, когда заказчик сообщил об адресе info@: проанализированы серверы имён, MX-записи и приём почты на старом сервере, второй домен перенесён от агентства, на обоих старых доменах настроен Cloudflare Email Routing с правилом для info@ и общим адресом для всего остального. Письма доставляются в существующий ящик, сервер агентства для этого больше не нужен.
• Защита данных за счёт отказа от лишнего. Никаких внешних шрифтов, аналитики, трекинга и встроенной карты: адрес открывает Google Maps только как ссылка. Видео о продукте загружается только по клику через youtube-nocookie.com, до этого страница показывает собственное превью. При открытии страницы запросы идут только на собственный домен.
• Фото продуктов вырезаны, лицензия каждого изображения проверена. Часть фотографий заказчика была крошечной (140 × 250 px), одна была сфотографированным проспектом. Скрипт на Python вырезает насосы с помощью ИИ-модели BiRefNet, выравнивает цвет нержавеющей стали и латуни, добавляет тень и сохраняет WebP в двух размерах: JPEG на 346 КБ превращается в 34 КБ. Фоновые изображения только с проверенной лицензией, иконки нарисованы самостоятельно или взяты под открытой лицензией, логотип перерисован в SVG.
• SEO с самого начала. Заголовок и описание для каждой страницы на основе текстов о продуктах, canonical, hreflang с x-default, sitemap со всеми языковыми версиями, структурированные данные (Organization, WebSite, BreadcrumbList), превью для ссылок в мессенджерах и соцсетях и настоящая страница 404 на трёх языках. Для ИИ-поиска есть llms.txt, ИИ-краулеры не заблокированы.

Инженерные особенности и контроль качества

У статического сайта мало того, что может сломаться. Остальное проверяет сборка перед каждым деплоем, а не посетитель:

• Нет деплоя без зелёной проверки. Проверочный скрипт на 1 091 строку контролирует языковые деревья, hreflang, внутренние ссылки, sitemap вместе с lastmod, JSON-LD, CSP-хеши, файлы заголовков и перенаправлений и срок действия security.txt. Если проверка не проходит, онлайн остаётся старая версия. Тот же скрипт работает как проверка в GitHub.
• Онлайн попадают только разрешённые файлы. Сборка копирует в выходную папку только файлы из списка разрешённых и прерывается, как только туда попадают файлы Git, Python или Markdown. Без этой настройки инструмент деплоя публикует всю папку проекта вместе с черновиками, скриптами и данными Git.
• Блоки одинакового размера на всех языках. Французский текст часто заметно длиннее немецкого или английского. Чтобы меню и блоки не прыгали при смене языка, каждый текстовый элемент содержит два других перевода как невидимые заполнители, и блок подстраивается под самый длинный. Замер: 0 px разницы в высоте в Chromium на 201 ширине окна, в Firefox и WebKit на 101 ширине в каждом.
• 25 автоматических тестов для формы. Проверка телефона, Turnstile, почтовые индексы с буквами. Совпадают ли у сайта и формы телефонные коды и страницы благодарности, сборка проверяет заодно.
• Sitemap без мнимой свежести. lastmod меняется только тогда, когда действительно меняются заголовок, описание или содержимое страницы (сравнение хешей), а не при каждой сборке.
• Устранено дёргание шапки. Чуть ниже начала страницы шапка около 30 раз в секунду переключалась между большой и маленькой. Причиной была привязка прокрутки браузера (scroll anchoring), исправлено пороговым диапазоном (гистерезис).

Результат

• Три языка вместо одного, 21 страница вместо шести. На каждом языке три страницы продуктов вместо двух страниц с одинаковым текстом, плюс юридические страницы, страница благодарности и собственная страница 404.
• Каждый старый адрес ведёт к цели. 5 из 5 старых страниц перенаправлены через 301, три домена объединены в один, проверено вживую 9 октября 2026 года.
• Адрес info@ для крупных клиентов продолжает работать, теперь через Cloudflare Email Routing, а не через сервер агентства.
• €13,95 постоянных расходов в год. Оплачиваются только три домена. Сайт, форма и переадресация почты работают на бесплатном тарифе Cloudflare.
• Три дня до нового сайта на домене. Первый макет 21 сентября, новый сайт онлайн 24 сентября, открыт для поисковиков 26 сентября 2026 года.
• Lighthouse 98 на мобильных, 100 на десктопе. SEO 100 на всех измеренных страницах, никаких сдвигов макета (CLS 0), самый крупный элемент через 2,3 с на мобильных и 0,6 с на десктопе (главная страница, замер 9 октября 2026 года). Best Practices: 81, снижение вызвано исключительно скриптом защиты от ботов Cloudflare, а не собственным кодом сайта.