簡介 103 Early Hints

Early hints 在伺服器回應真正內容之前提早回應「已知」會用到的內容，利用伺服器準備真正內容的空檔時間。

靜態網站做這個幾乎沒有幫助。

在 Hugo 實作 early hints

先講結論，別做，pagespeed insights 根本測不出差異，因為靜態網站沒有伺服器準備時間，你只需要把關鍵資源放到 head 標籤最前面就好了，就像 capo.js 建議的那樣。

建立方式很簡單

1. 用 hugo.Store 把你要的資源的 RelPermalink 記錄下來

2. 再把資源網址取出來建立 _headers 檔案（Cloudflare/Netlify 適用的 _headers 檔案）

   1. 用 resources.FromString 不需要碰設定檔
   2. 用 outputFormats 方案適用於目標檔案用了 templates.Defer，設定檔設定新的輸出格式，設定他的 weight 在 HTML 之後，這樣就能確保執行順序正確

3. _headers 檔案的 early hints 寫法像這樣

   Link: <https://cdn.example.com>; rel=preconnect, <https://cdn.example.com>; rel=preconnect; crossorigin

在 Cloudflare 實作 early hints

先講結論，官網的 103 Early Hints 是你唯一一篇需要看的文檔，其他都沒用。

如果是 Cloudflare Pages 部署，不需要設定，CF 已經自動偵測並且自動發 early hints 了。

如果是 Cloudflare Workers 部署，workers 目前（2026/10）如果要支援 early hints，你必須採用 custom header 方案。這最大的問題是，這裡就會需要處理請求了，因此會有 API 費用問題；並且如果用 static assets 部署，請求會多經過一層 worker 處理而不是 static header 直出。

相關文章

照重要順序排列

1. Chrome developers: Faster page loads using server think-time with Early Hints
2. MDN: Link header
3. MDN: 103 Early Hints
4. Cloudflare: Headers
5. Cloudflare: 103 Early Hints
6. Cloudflare: Migrate from Pages to Workers
7. Cloudflare: Early Hints