构建HTML优先的网站，用户数一夜翻倍

2026年6月10日
构建HTML优先的网站，用户数一夜翻倍
这是一个关于构建HTML优先的网站如何让一家公司的用户数真正一夜之间翻倍的故事。
我的客户是一家公用事业公司，他们遇到了一个大问题。客户要申请他们的服务，只能使用网站上一个陈旧的ASP表单，或者走人工流程。当然，人工流程对公司来说成本更高。更雪上加霜的是，这是一家受监管的垄断企业，如果客户满意度低于96%（如果我没记错的话），可能会面临数百万英镑的罚款。
之前有两次尝试解决问题，都以失败告终，而且代价高昂。最近的一次，由另一个国家的承包商构建了一个React应用。这个React应用上线仅3天就因客户投诉被撤下。我只看了一眼就告诉老板：“我们不能接手这个。”它充满了加载旋转器和全局JavaScript状态，不可访问。图片上传是表单的关键部分，它却试图将图片（连同所有其他表单数据）存储在只有5MB限制的localStorage中！
我做出了一个非常大胆的决定，用Astro构建了一个新版本的网站。它是HTML优先的。JavaScript确实存在，以Web组件的形式，但只是用来渐进增强一个即使没有JavaScript也能完美运行的网站。
我的逻辑是这样的：

• 这是一项公共服务
• 它应该能在所有可能的设备上工作
• 它应该在连接状况不佳时也能工作
• 表单一旦输入数据，绝不能丢失
  Terence Eden的一个轶事深深打动了我：

几年前，我在伦敦的一个住房福利办公室做政策研究。那地方实在谈不上可爱。墙上贴着为逃离家庭暴力的人提供帮助服务的海报，让房间稍微亮堂一些。门口的保安对任何进来的人都谨慎地漠不关心。空气中弥漫着伴侣之间紧张的谈话声，被尖叫的孩子的吵闹声淹没。在房间中央，一个年轻女子坐在硬塑料椅子上，周围放着装着全部家当的帆布包。她现在情绪看起来不太好。她手里紧紧握着一个游戏机——一台PSP。她专注地盯着它，用《糖果粉碎传奇》屏蔽外界。至少，我是这么以为的。
我走到她身后，瞥了一眼她的游戏机，认出了她正在浏览的屏幕。她连接了免费的WiFi，正在浏览GOV.UK上关于住房福利的页面。她不是在切水果，而是在用知识武装自己。
PSP的网络浏览器，说得客气点，很糟糕。它很慢，经常内存不足，一次只能打开3个标签页。但GOV.UK的页面是用简单的HTML编写的。它们被设计成轻量级，即使在垃圾浏览器上也能工作。它们必须这样。这是为所有人准备的。
我得出了一些需求：

• 表单的每次会话都应该有一个唯一ID
• 在表单向导的每一步，提交的数据（包括上传文件）都应该存储在后台
• 应该能在不启用JavaScript的情况下完成表单
• 应该能在过时和垃圾浏览器上完成表单
• 我们必须满足WCAG无障碍标准（团队最终选择了AA级而非AAA级）
• 应该使用JavaScript和现代CSS来增强体验
  最终的基本设置是：表单向导的每一步都是独立的页面。当用户点击“下一步”时，表单会提交。如果API判定数据有效，浏览器就会重定向到下一步。这是一个古老的Web应用模式，由于Remix的出现而经历了一次小小的现代复兴。表单提交和重定向花了一些时间才向同事们解释清楚，因为大家都习惯了重度客户端Web应用。
  我并非反对重度客户端应用，只是在合适的场景下使用它们。但这只是一个大型表单，并不展示实时数据。我们的用户可能站在新建住宅区的田野里，手里拿着一台十年前在乐购买的廉价安卓手机。在渲染表单之前就发给他们20MB的JavaScript，那可太荒谬了。
  接下来，我解决了我最大的痛点之一：表单验证（以及表单错误渲染）。我见过很多团队在React验证库上浪费了好几个人月的时间。如果你是React开发者，你可能会对此嗤之以鼻——技术问题，我猜——但这是许多团队的现实。我想谦虚地建议，你可能也在与每个浏览器自带的验证系统的拙劣仿制品打交道和维护上花费了比你意识到的更多的时间，而且比必要的时间多得多。
  所以我构建了一个HTML Web组件。这些简单的自定义元素包裹现有的HTML并赋予它生命。没有Shadow DOM，没有（或很少）在JavaScript中渲染HTML。我的组件包裹任何HTML表单，拾取HTML验证，并让它看起来现代化。它会阻止那些HTML验证弹窗提示，而是将错误信息放在与字段关联的aria-describedby元素中（现在建议使用aria-errormessage）。它会在你输入时清除验证（如果达到有效状态），并在失去焦点和提交时重新评估。这正是表单所需的用户体验，而且体积不到1KB。
  如果它失败了，表单会回退到浏览器内置验证。如果那个也失败，后台API会处理验证。我们尽可能早地向用户报告验证问题（取决于他们的浏览器），如果失败，总是回退到可接受的体验。
  后来，我完全重写了一个针对通用用途的新版本Web组件，名为validation-enhancer。我在这个行业干了20多年，它是我用过的最好的表单验证库。我为此感到非常自豪。代码使用起来非常简单：

<validation-enhancer>
  <form>
    <label for="my-email">电子邮件</label>
    <input type="email" name="my-email" aria-errormessage="my-email-error" required />
    <div id="my-email-error"></div>
    <button type="submit">提交</button>
  </form>
</validation-enhancer>

结果如何？当我们上线时，完成表单的人数翻了一番。分析人员甚至不知道这些用户是从哪里来的。当然，你的基于JavaScript的分析包看不到那些因JavaScript失败而被拒绝的用户。用户如潮水般涌来！我们“保持后台会话，绝不丢失用户数据”的方法也得到了回报。有一个案例，有人在开始填写表单一个月后才完成。
但有一个悲伤的尾声；就像合同工的常态一样，我离开了那个项目。我向接替我的人解释了我构建的系统，即使没有JavaScript也能工作。他对此感到震惊，并说：“但这意味着我们要做更多的工作。”
将使用旧浏览器的用户、网络连接差的用户、使用辅助技术的用户拒之门外是不可接受的。尤其不能发生在一家垄断公共服务机构身上。
大量的炒作和噪音正在推动我们延长软件行业扩张的牛仔、狂野西部阶段。我们应该把这些放在一边，认真对待自己作为一个成熟行业的定位。构建一个能在PSP上用3G连接工作的Web应用——如果你做到了，它就能为你所有的用户工作，并且30年后它仍然能工作。