HTML‑first сайт удвоил количество пользователей за ночь

HTML‑first подход в реальном проекте удвоил количество завершённых заявок за одну ночь, тем самым спас компанию‑монополию от потенциальных штрафов за падение уровня удовлетворённости ниже 96 %.

Почему предыдущие решения провалились?

• React‑приложение, построенное подрядчиками за границей, работало три дня и было снято из‑за жалоб: постоянные спиннеры, глобальное состояние в JavaScript и отсутствие доступности.
• Хранение изображений в localStorage ограничивалось 5 МБ, что не позволяло загрузить необходимые файлы.
• Форма требовала современный браузер, а пользователи часто использовали старые устройства и медленное соединение.

Как работает HTML‑first?

Каждый шаг мастера формы реализован как отдельная HTML‑страница. При нажатии «Next» данные отправляются на сервер, проходят валидацию и, если всё ок, пользователь перенаправляется на следующую страницу. Такой паттерн, известный из Remix, позволяет полностью обойтись без клиентского рендеринга.

Что изменилось в реализации?

• Уникальный идентификатор сессии сохраняется на бекенде, поэтому пользователь никогда не теряет введённые данные.
• Форму можно полностью заполнить без JavaScript и на устаревших браузерах.
• WCAG AA соблюдена: все элементы доступны скрин‑ридерам.

Как реализованы улучшения?

• На базе Astro генерируется чистый HTML, а прогрессивное улучшение добавляется через веб‑компоненты.
• Для валидации создан кастомный элемент <validation‑enhancer>: он оборачивает обычный <form>, использует встроенную HTML‑валидацию, выводит ошибки в aria-describedby и занимает менее 1 KB.
• При ошибке падает обратно на нативную валидацию браузера, а в крайнем случае – на серверную проверку.

Что это значит для бизнеса?

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