构建 HTML 优先型网站以实现用户转化率翻倍

HTML 优先架构使用户转化率翻倍

通过使用 Astro 将复杂的、重 JavaScript 的 React 应用替换为 HTML 优先架构，一家受监管公用事业公司的服务申请表单完成人数翻了一番。转化率的提升是因为新网站在过时的浏览器、较差的网络连接以及辅助技术上仍能保持功能正常——这些用户之前因 JavaScript 失败而被“跳出”，并且在基于 JavaScript 的分析工具中是不可见的。

客户端方法的失败

在实施 HTML 优先方案之前，该公司尝试通过一个 React 应用来解决其申请流程，但该应用在发布后三天内就因严重的客户投诉而失败。React 实现的技术失败包括：

• 过大的负载： 在渲染一个简单的表单之前，传输了大量的 JavaScript（高达 20MB）。
• 糟糕的状态管理： 依赖全局 JavaScript 状态和加载动画，降低了用户体验。
• 存储限制： 尝试将重要的图片上传和表单数据存储在 localStorage 中，而它有严格的 5MB 限制。
• 缺乏无障碍性： 该应用未能满足基本的无障碍标准，疏远了依赖辅助技术的用户。

HTML 优先设计核心原则

为了确保服务对所有公民都能使用——包括那些使用十年前的 Android 手机或浏览器功能极其有限的用户——该项目使用 Astro 进行了重构，并基于以下要求进行构建：

1. 渐进式增强

JavaScript 仅用于增强体验，而不是启用体验。网站设计为在没有 JavaScript 的情况下也能完美运行，从而确保使用“垃圾浏览器”（例如 PlayStation Portable 浏览器）的用户仍能访问关键的公共服务。

2. 服务端状态与持久化

为了防止数据丢失，该应用放弃了客户端存储。每个会话都被分配了一个唯一的 ID，并且数据（包括文件上传）在表单向导的每一步都在后端存储。这允许用户在开始填写表单后，可以在几周后继续完成，而不会丢失进度。

3. 多页面表单流

该网站没有使用单页应用 (SPA)，而是使用了一种经典的 Web 模式：表单的每一步都是它自己的页面。提交一个步骤会触发对 API 的 POST 请求；如果有效，服务器会将用户重定向到下一个页面。这种方法消除了对复杂客户端路由和状态同步的需求。

4. 轻量级验证

该实现没有使用沉重的 React 验证库，而是利用了原生浏览器验证，并通过自定义 HTML web component（稍后发布为 validation-enhancer）进行了增强。该组件：

• 封装了现有的 HTML 表单以提供现代化的 UI。
• 防止了默认的浏览器提示，转而使用 aria-describedby 或 aria-errormessage 以实现无障碍性。
• 运行在不足 1KB 的 JavaScript 下。
• 回退到原生浏览器验证，并最终回退到后端 API 验证，从而确保了多层安全网。

影响与洞察

“不可见用户”问题

最重要的发现是，基于 JavaScript 的分析包无法追踪那些无法加载运行分析工具所需的 JavaScript 的用户。发布后的新用户“激增”揭示了一个庞大的人群，他们此前一直因为无法使用服务而默默地失败。

社区观点

行业专业人士从这次转型中总结出了几个关键点：

“当然，你的 javascript-based analytics package 并不看得到你因为 JavaScript 失败而跳出的用户。想到由于这种偏见强化了‘他们不存在’的想法，每天有多少人因为这个原因被排除在关键系统之外，这真是令人恐怖的事情。”

其他开发者也指出，过度追求沉重的 SPA 趋势往往反映了承包商的激励机制或开发者的习惯，而不是最终用户的需求。一些人认为，虽然技术（React vs. Astro）是一种工具，但真正的胜利在于应用了严格的设计约束，并对使用低端硬件和网络连接较差的用户表现出了同理心。

技术总结表

特性	原有的 React 方法	新的 HTML 优先方法
渲染	客户端 (SPA)	服务端 (Astro)
数据存储	localStorage (5MB 限制)	后端会话存储
验证	JS 库	原生 HTML + <1KB Web Component
连接性	需要高速/现代 JS	可在 3G / 遗留浏览器上运行
无障碍性	差 / 不合规	符合 WCAG AA 标准