Hartwell Insurance
我們剛剛為 Hartwell Insurance 推出了全新網站，我真的為此感到自豪。這次的開發方式與大多數以往的 Tomango 網站建設不同，使用了一些新工具和一些經典的網頁標準。
這是一個多頁面、單頁（！）的網站，使用 Hugo 編寫，Hugo 是一個以效能為核心特色的靜態網站生成器。如果你有興趣，我在這裡 列出了很多 Hugo 和靜態網站的優勢。
簡而言之，靜態網站生成器會將整個網站預先渲染為 HTML 檔案，並像 1995 年那樣提供服務。
沒有 Apache 或 Node 後端在執行時進行編譯，一切都在建構階段完成。這意味著伺服器；在這個情況下是 Netlify，只需要做一件事——提供檔案。不出所料，提供簡單檔案的速度非常快。
起始點是 Netlify 創建的 Victor Hugo 資料庫。這讓我能夠無需自行設置工具，直接使用 Hugo、PostCSS、Browsersync 和 ES6，非常棒！
接著，我將設計檔案中的所有內容轉移到 Markdown，並在需要的地方放入短代碼。這個網站需要一些自定義的短代碼來處理一些呈現元素，例如展開圓形和全寬背景。但大多數情況下，只是乾淨的語意化 HTML，並加入了一些 CSS 和 JS 增強功能。
例如，下圖所示的兩欄布局。我使用了 CSS Columns，並在 <h1> 上加上 break-after: always;。沒有多餘的包裝器或難以清理的短代碼，只有乾淨的 HTML。
對於區塊標題的水波紋效果，我使用了 JS 來預置 <canvas> 元素，然後用 RequestAnimationFrame 進行動畫處理。這為頁面增添了些許動感。
在 Hartwell Profitmaker 部分，我曾考慮使用 Vue.js 來實現計算器，但經過深思熟慮後，我決定用 Vanilla JS 編程。結果，網站的所有 JS 檔案總共才 3.2KB！
我們的計劃是使用 Netlify 進行託管，並藉此獲得 Netlify Forms 的使用權。這讓我可以完全專注於前端開發，根本不需要花時間設置後端。
雖然網站是個漸進式網頁應用（PWA），但緩存失效問題通常不會讓我花太多時間思考。然而，這個網站的 PWA 特性需要我們重視緩存失效，確保當我們更新時，網站不會顯示錯誤的內容。由於我使用的是 Victor-Hugo，我不確定如何最佳處理這個問題，於是花了過多時間在 Webpack 和 Gulp 檔案上嘗試讓檔案名稱加上 hash。
後來，在等待理髮時，我讀了一篇 Netlify 博客文章，介紹他們如何使用 HTTP2 做緩存失效處理，這讓我頓時恍然大悟。
當你請求資源時，他們會在標頭中發送一個 ETag，這是該檔案的 hash。如果 ETag 匹配，則返回無內容，否則返回新的檔案和新的 ETag。沒有 app.klfjlkdsfjdslkfjdslkfdsj.js 或 app.js?v=20180112，只有乾淨的 app.js，並即時進行緩存失效。真是太神奇了。
最後，我可以加入 Service Worker。由於 Netlify 的緩存失效系統解決了大多數問題，這變得非常簡單。我選擇了網路優先，並對資源和 HTML 進行緩存回退。這意味著在網速較差的情況下，頁面的載入時間會受到影響，但由於我們使用的是 HTTP2，我希望持久連接和小巧的 ETag 可以保持快速。對於在線連接，每次請求都是最新的並即時更新。離線連接則會回退到每個資源的最後一次緩存狀態。這似乎運行得非常順利，並且當資源更新時，無需顯示更新提示。
結果
WebPageTest 結果顯示良好，速度指數為 456，比 Alexa 前 300,000 名的平均值小了 10 倍。
TestMySite.io 顯示來自 CDN 邊緣節點的首字節時間約為 2ms。Lighthouse 評測結果也相當不錯。仍有一些改善空間，例如懶加載圖片和內聯 CSS。對於 第二項建議，我並不特別興奮，但我會考慮進行一些懶加載，特別是我已經使用了 IntersectionObserver 來處理一些動畫效果。
最讓人鼓舞的是，這個網站在全球的速度表現相當快。大多數 Tomango 客戶（及其客戶）主要集中在英國，我們有一個專用伺服器位於薩里，能很好地服務本地市場。令我驚訝的是，從美國、澳洲和日本連接到我們伺服器的速度大幅下降。他們僅僅在等候首字節的時間就達到了大約 500ms，更不用說下載每個資源了。
由於 Hartwell Insurance 是一家美國公司，如果將其放置在我們的伺服器上，將會大幅延遲其當地回應時間。因此，選擇 Netlify 是主要原因之一。他們提供全球 CDN 託管，無論身處何處都能迅速加載。
這個專案的開發過程非常有趣，能在生產環境中實際應用新技術，並從中獲得真實的效能和可用性改善，讓我感到非常高興。即使是使用經典的網站技術來提供文件夾和檔案，也是一件有趣的事，當你已經習慣使用動態系統一段時間後，這樣做有一種純粹的樂趣。
這篇文章最初發表於 我的網站