构建 HTML 优先网站如何在一夜之间使我们的用户翻倍

背景

故事的主角是一家公用事业公司（Utility Company），他们面临着一个严峻的业务痛点：客户申请服务的方式极其落后。当时，客户只有两种选择：要么使用网站上老旧的 ASP 表单，要么遵循一套繁琐的手动流程。显然，手动流程对公司的运营成本更高。

由于该公司是受监管的垄断企业，合规压力巨大。如果客户满意度低于 96%（据作者回忆），公司将面临数百万英镑的罚款。为了提升效率并满足合规要求，公司此前曾投入巨资进行了两次失败的尝试。最近的一次尝试中，外包给海外国家的承包商开发了一个基于 React 的应用程序。然而，该应用上线仅 3 天便因用户投诉而被紧急下架。

作者审视了那个 React 应用后，发现它充满了加载旋转图标和全局 JavaScript 状态管理，不仅不可访问（Accessible），而且存在严重的设计缺陷。例如，表单中至关重要的图片上传功能，竟然试图将所有图片数据连同其他表单数据一起存储在 localStorage 中，而 localStorage 的容量限制仅为 5MB。这种架构显然无法支撑实际业务需求。

核心内容

面对烂摊子，作者做出了一个大胆的决定：使用 Astro 框架重新构建网站，并确立“HTML 优先”（HTML-first）的核心原则。虽然网站中确实包含 JavaScript，但它仅以 Web Components（Web 组件）的形式存在，用于对已经完美运行的纯 HTML 网站进行渐进式增强（Progressive Enhancement）。

设计哲学与灵感

作者的设计逻辑基于以下四点：

1. 这是一项公共服务。
2. 它应在尽可能多的设备上运行。
3. 它在网络连接不佳时仍应正常工作。
4. 表单一旦输入，数据绝不能丢失。

这一理念深受 Terence Eden 的一段经历启发。Eden 曾描述在伦敦住房福利办公室看到一位年轻女性，她看似在玩掌上游戏机（PSP）上的《Candy Crush》，实则是在利用 PSP 极其糟糕的浏览器访问 GOV.UK 的住房福利页面。GOV.UK 的页面由简单的 HTML 编写，轻量且能在“垃圾”浏览器上运行。这证明了为所有人设计、即使是在最差的硬件和网络条件下也能工作的必要性。

技术实现与需求

基于上述理念，作者制定了以下具体需求：

• 每个表单会话必须拥有唯一的 ID。
• 在表单向导的每一步，提交的数据（包括上传的文件）都应存储在后端。
• 必须能够在没有 JavaScript 的情况下完成表单。
• 必须能够在过时且性能低下的浏览器上完成表单。
• 必须符合 WCAG 无障碍标准（团队选择了 AA 级而非 AAA 级）。
• 使用 JavaScript 和现代 CSS 来增强用户体验。

架构模式： 作者采用了一种经典的 Web 应用模式，即表单向导的每一步都是独立的页面。当用户点击“下一步”时，表单提交数据。如果 API 判定数据有效，浏览器便重定向到下一步。这种基于表单提交和重定向的模式，得益于 Remix 等框架的复兴而重新受到关注，但对于习惯了重度客户端应用（Client-side SPA）的同事来说，起初难以理解。

作者指出，对于这样一个大型表单，展示实时数据并非必要。如果用户身处新建住宅区，手持一台十年前的廉价安卓手机，在加载 20MB 的 JavaScript 之前就渲染表单是荒谬的。

表单验证解决方案： 作者对 React 验证库的复杂性感到厌烦，认为许多团队花费了大量时间维护对浏览器原生验证系统的拙劣模仿。因此，他构建了一个 HTML Web 组件。该组件包裹现有的 HTML 表单，利用原生 HTML 验证，并通过现代样式美化界面。

• 它阻止了原生的 HTML 验证弹出提示，而是将错误信息放置在字段的 aria-describedby 元素中（现代标准建议使用 aria-errormessage）。
• 在用户输入时清除验证状态，达到有效状态时自动清除，并在失焦和提交时重新评估。
• 整个逻辑代码量不到 1KB。
• 如果自定义验证失败，则回退到浏览器内置验证；若仍失败，则由后端 API 处理。

作者后来将这一组件重构为通用库，命名为 validation-enhancer。其使用极其简单，只需包裹 <form> 标签并配置 aria-errormessage 即可。

关键要点

• HTML 优先与渐进增强：网站核心功能应基于纯 HTML 实现，JavaScript 仅用于增强体验，确保在无 JS 环境下核心功能可用。
• 后端存储与会话管理：表单每一步的数据（含文件上传）实时存储在后端，确保即使会话中断或跨天，用户数据也不会丢失。
• 拒绝重型前端框架的滥用：对于非实时数据展示的场景，避免使用 React 等重型框架导致巨大的 JavaScript 包体积（如 20MB），这会对低端设备和弱网环境用户造成阻碍。
• 原生验证与轻量级增强：利用浏览器原生的 HTML 验证能力，通过极少量的 JavaScript（Web Components）进行样式和交互增强，比维护复杂的第三方验证库更高效、更可靠。
• 无障碍与包容性设计：必须考虑使用老旧浏览器、辅助技术以及网络条件较差的用户群体，这是公共服务的基本伦理要求。

意义与影响

业务成果显著： 网站上线后，完成表单的用户数量在一夜之间翻倍。由于传统的基于 JavaScript 的分析工具无法追踪因 JS 失败而流失的用户，这次增长甚至让分析团队感到惊讶。此外，“后端保持会话、永不丢失数据”的策略也发挥了作用，有用户在开始填写一个月后成功完成了表单。

行业反思： 故事的结尾带有一丝讽刺。作者离职后，向继任者解释了该系统的无 JS 兼容性优势，继任者却震惊地表示：“那对我们来说工作量太大了。”

这一细节揭示了当前软件行业的某种病态：过度追求技术时髦（Hype），而忽视了成熟、稳定、包容的工程实践。作者呼吁行业摆脱“狂野西部”式的扩张阶段，严肃对待作为成熟行业的责任。

核心结论： 构建一个能在 3G 网络下的 PSP 上运行的 Web 应用，不仅是一个技术挑战，更是一种设计哲学。如果做到了这一点，你就真正服务了所有用户，并且这种架构将在未来 30 年内依然有效。