一家公用事业公司通过改用HTML优先的网站开发方式，成功在一夜之间使用户数量翻倍。此前他们昂贵的React应用因体验差被撤下，而新的Astro框架方案以基础HTML为核心，仅用JavaScript渐进增强，解决了表单提交和图片上传等关键问题，避免了高额罚款风险。

标题：HTML优先策略如何让我们用户量一夜翻倍

来源：https://mohkohn.co.uk/writing/html-first/

2026年6月10日

这是一家公用事业公司通过HTML优先策略实现用户量翻倍的真实案例。该公司原有服务申请系统存在严重问题：客户只能使用过时的ASP网页表单或人工流程办理业务，后者给公司带来巨大成本压力。作为受监管的垄断企业，客户满意度若低于96%将面临数百万英镑罚款。

此前两次昂贵的系统改造均告失败。最近一次外包团队开发的React应用上线仅3天就因客户投诉被迫下线——这个充斥着加载动画和全局JavaScript状态的应用不仅存在可访问性问题，更荒谬地试图用仅5MB容量的localStorage存储包括图片在内的所有表单数据。

我果断采用Astro框架重建网站，坚持HTML优先原则：仅通过Web Components渐进增强基础功能完好的HTML页面。设计理念源自四条核心原则： 1. 公共服务属性 2. 全设备兼容 3. 弱网环境可用 4. 数据永不丢失

受Terence Eden关于简单HTML的惊人效果的启发，我制定了具体需求： - 唯一会话ID机制 - 分步后端存储（含文件上传） - 无JavaScript可用 - 过时浏览器兼容 - WCAG AA级无障碍标准 - 现代化渐进增强

技术方案采用经典的表单提交-重定向模式（类似Remix的现代复兴），每个步骤都是独立页面。这对习惯客户端渲染的团队需要额外解释，但考虑到用户可能使用十年前的低端安卓机在建筑工地填表，发送20MB的JavaScript bundle显然荒谬。

针对表单验证这个常见痛点，我开发了不足1KB的HTML Web Component。它通过包装原生HTML表单实现： - 替换默认验证提示为ARIA错误提示 - 输入时实时验证 - 优雅降级机制 后续开源的validation-enhancer成为我20年开发生涯中最满意的验证库。

上线效果惊人：表单完成量直接翻倍，那些因JavaScript故障被传统统计忽略的用户终于显现。后端会话机制也成效显著——有用户甚至间隔一个月后继续完成填写。遗憾的是，接任开发者对"无JavaScript可用"的设计表示不解，认为"增加了工作量"。

这提醒我们：作为成熟行业，不应排斥老旧设备、弱网环境或辅助技术用户。能运行在3G网络PSP游戏机上的网页应用，必然能服务所有用户并经受时间考验。

以下是评论内容的总结，按主要观点分类呈现：

1. 关于技术选择的争议

• 反对过度使用React： "Remix is not that popular... Next.js quite possibly" (评论1) "including React blindly is just silly" (评论13)
• 技术不是问题关键： "People who built a crappy website using React are just as likely to build a crappy website using Astro" (评论2) "the problem was not react. The problem was clearly this excerpt" (评论4)

2. 传统Web开发的价值回归

• 支持简单HTML方案： "I rewrote the frontend in straight HTML with a little bit of JavaScript" (评论13) "why not take the html5 standard... htmx or alpinejs" (评论15)
• 渐进增强的价值： "Designing for failure modes often leads to better systems" (评论11) "Don't tell me were going to rediscover progressive enhancement all over again" (评论25)

3. 性能与用户体验

• 批评现代Web臃肿： "Shipping tens of megabytes per web page is impolite" (评论5) "a lot of old fundamentals are coming back" (评论7)
• 政府网站的特殊要求： "gov pages should be widely accessible... NEVER mandate internet access" (评论16) "everyone should be able to make use of these digital services" (评论18)

4. 具体技术方案讨论

• Astro框架的采用： "Interesting they went with Astro... handles page transitions cleanly" (评论10) "I'm seriously considering giving Atro a go" (评论17)
• 替代技术栈： "Most of my apps are now simply HTMX + Go + SQLite" (评论12) "you can render components to HTML and serve that" (评论14)

5. 开发文化批评

• 对当前开发趋势的不满： "It shows just how far gone webshit is" (评论19) "Too much VC money and big tech influence" (评论25)
• 基础工作的重要性： "Is it more work?" (评论24) "we used to actually care about the end user" (评论25)

关键数据点引用： - 关于性能："serves 10 TB of traffic per month" (评论12) - 关于监管："customer satisfaction dropped below 96%... millions of pounds in fines" (评论8) - 关于效果："doubled our users... halved form abandonment" (评论3)