HTML优先设计：用户数一夜翻倍的故事

一张老旧PSP掌机上显示简单HTML表单页面的照片，背景是等候室 — 头图来源：来源页面

背景：公用事业公司的表单困境

一家受监管的公用事业公司面临严峻挑战：用户只能通过古老的ASP表单在线申请服务，或走昂贵的人工流程。作为垄断企业，客户满意度低于96%将招致数百万英镑罚款。此前两次昂贵的尝试均告失败，最近一次由海外承包商构建的React应用上线仅三天就被撤回。

开发者接手后，发现那是一个“充满加载转圈、全局JavaScript状态、可访问性糟糕且试图将图像等表单数据存储在只有5MB限制的localStorage中”的烂摊子。他果断决定使用Astro构建一个HTML优先的新版本。核心原则是：

这是公共服务，必须在所有设备上工作
网络差时也要工作
表单绝对不能丢失数据

启发：PSP上的政府网页

文章引用了一个生动的场景：在伦敦的住房福利办公室，一名无家可归的年轻女子用她的PSP掌机通过免费WiFi浏览政府网页。PSP的浏览器速度慢、内存小，但政府页面简单的HTML设计使它能在如此简陋的浏览器上正常运作。这个画面强烈地说明了为每个人构建网站的重要性。

需求推导

基于以上理念，开发者提炼出若干核心需求：

每个表单会话要有唯一ID
在表单向导的每一步，提交的数据（包括上传文件）都应存储在后台
用户可以不使用JavaScript就完成表单
表单必须在过时、糟糕的浏览器上也能工作
满足WCAG可访问性标准（团队定为AA级）
JavaScript和现代CSS用于渐进增强体验

实现：回归经典Web模式

实现方式回归了经典的Web应用模式：表单向导的每一步都是一个独立的页面。用户点击“下一步”后提交表单，API验证数据后重定向到下一步。这一模式因为团队长期习惯繁重的客户端应用而需要花时间解释。

开发者强调，对于这种只是一个大表单、不展示实时数据的场景，给用户发送20MB的JavaScript是荒谬的。“我们的用户可能站在新开发住宅区的田野里，手里拿着十年前在Tesco买的廉价安卓手机。”

表单验证：构建轻量Web组件

开发者针对表单验证这一痛点，构建了一个简单的HTML Web组件。该组件：

封装了原生HTML表单验证
将其错误提示以现代化方式呈现在aria-describedby元素中
在输入时清空验证
在失焦和提交时重新验证
整个组件只有不到1KB

如果组件本身失败，会回退到浏览器内置验证；再失败则由后端API处理。这种分层策略确保了在任何情况下用户都能获得验证反馈。

基于此，他开源了名为validation-enhancer的通用版Web组件，自认为是二十多年职业生涯中用过的最好的表单验证库。使用示例代码：

<validation-enhancer>
  <form>
    <label for="my-email">Email</label>
    <input type="email" name="my-email" aria-errormessage="my-email-error" required/>
    <div id="my-email-error"></div>
    <button type="submit">Submit</button>
  </form>
</validation-enhancer>

成果：用户数一夜翻倍

最终的结果令人震惊：新版网站上线后，完成表单的人数翻了一倍。数据分析团队甚至不知道这些新增用户从何而来——因为基于JavaScript的分析工具根本无法捕获那些因为JavaScript失败而被弹走的用户。

后端维护会话状态、永不丢失数据的设计也带来了意想不到的好处：有人甚至在开始填表一个月后才最终完成提交。

遗憾的尾声

然而，故事有一个遗憾的尾声：开发者离开后，他的继任者对该设计理念感到震惊，认为“这给我们增加了很多工作”。开发者对此评论道，嫌弃额外的工作而弹走使用旧浏览器、网络差的用户是不可接受的，尤其对于垄断公共服务而言。

他呼吁整个行业“应该放弃炒作和喧嚣，认真对待自身，建造一个在PSP上通过3G网络也能正常运行的Web应用——如果做到了，它不仅能为所有用户服务，甚至30年后仍能正常工作。”

原标题：Building an HTML-first site doubled our users overnight。 HN 原始发布时间：2026年6月10日星期三。当前记录为 1233 分、558 条评论。

阅读原文 · 查看 HN 讨论