打造以 HTML 為先的網站以提升使用者轉換率

HTML 為先的架構提升使用者轉換率

將一個複雜且以 JavaScript 為主的 React 應用程式，改以 Astro 的 HTML 為先架構取代，於一夜之間使完成服務申請表單的使用者數量翻倍。此成長歸因於新系統仍能在舊版瀏覽器、低階硬體與不佳網路連線的使用者上正常運作——這些先前因 JavaScript 錯誤而被彈回、且在基於 JavaScript 的分析中不可見的人口族群。

JavaScript 為主框架在公共服務中的失敗

在一家受規範限制的壟斷公用事業公司中，關鍵的申請表單先前是透過舊的 ASP 表單或手動流程管理。最近一次嘗試以 React 應用程式現代化，卻在三天內因大量客訴而失敗。失敗的實作存在多項關鍵缺陷：

  • 效能瓶頸： 應用程式依賴過度的載入指示器與全域 JavaScript 狀態。
  • 無障礙缺口： 該服務對有障礙的使用者並不友善。
  • 儲存管理不當： 重要的圖片上傳嘗試儲存於 localStorage，其 5 MB 的嚴格上限導致資料遺失與當機。

HTML 為先方法的核心原則

為確保服務能適用於每一位可能的使用者，網站以 Astro 重新構建，並以漸進增強為核心。架構的指導原則是：網站必須在任何機器上運作，無論連線品質或瀏覽器版本如何。

通用存取的技術需求

  • 唯一會話 ID： 每個表單會話皆分配唯一 ID，以追蹤進度。
  • 伺服器端持久化： 包括上傳檔案在內的資料於表單精靈的每一步都儲存於後端，以防止資料遺失。
  • JavaScript 獨立性： 即使未啟用 JavaScript，表單亦能完整提交。
  • 舊版瀏覽器支援： 網站設計能在過時且效能低下的瀏覽器上正常運作。
  • 無障礙合規： 團隊遵循 WCAG AA 標準。
  • 漸進增強： 現代 CSS 與 JavaScript 僅用於提升體驗，而非核心功能的前提條件。

實作：表單精靈與驗證

多頁表單模式

此應用採用經典的網頁模式：表單精靈的每一步皆為獨立頁面。使用者點擊「下一步」時，表單送至伺服器；若 API 驗證成功，瀏覽器即導向下一步。此方式避免將大量 JavaScript 傳送給可能使用十年前行動裝置、以 3G 連線的使用者。

輕量化驗證 via Web Components

開發者未使用沉重的 React 驗證函式庫，而是實作自訂的 HTML Web Component（後續以 validation-enhancer 發布）。此元件：

  1. 包裹現有的 HTML 表單，利用原生瀏覽器驗證。
  2. 防止預設的瀏覽器工具提示，改將錯誤資訊放入 aria-describedby（或 aria-errormessage）元素中。
  3. 使用者輸入時即時清除驗證錯誤。
  4. 若 JavaScript 失效，退回原生瀏覽器驗證；若仍失效，則再退回後端 API 驗證。

整個驗證增強功能的程式碼量不足 1 KB。

結果分析與產業影響

「隱形使用者」現象

完成表單數量翻倍揭露了現代遙測的一個關鍵缺陷：基於 JavaScript 的分析套件無法追蹤因 JavaScript 錯誤而被彈回的使用者。這些使用者在開發者眼中是「隱形」的，直到技術障礙被移除才會被發現。

社群見解與反駁

圍繞此案例的技術討論突顯了「履歷驅動開發」與以使用者為中心的工程之間的分歧：

  • 簡潔性的論點： 許多開發者指出，對大多數專案而言，HTMX、Go 與 SQLite 的組合已足夠，且產業因大廠與風投資金的影響，正向不必要的複雜度漂移。
  • 「好設計」的論點： 部分批評者認為成功在於更佳的設計與有能力的開發者，而非單純選擇 HTML 而非 React，並指出若正確實作，React 亦能打造無障礙且高效能的網站。
  • 無障礙的使命： 討論者強調，對於政府與公用事業服務而言，提供「輕量」備援不僅是偏好，更是一種準法律要求，以確保沒有任何公民被關鍵基礎設施排除在外。

"當然，你的基於 javascript 的分析套件看不到因 javascript 錯誤而被彈回的使用者。想到每天有多少人因這種偏見而被排除在關鍵系統之外，實在令人恐懼。"

結論

為最低公分母（例如在 3G 連線上的 PlayStation Portable）打造服務，確保每個人都能使用。透過優先考慮 HTML 與漸進增強，而非客戶端框架，開發者能觸及更廣的受眾，並建立能在數十年內持續運作的系統。

Sources