103 早期提示：它是什麼以及如何實現它

103 Early Hints 是新的 HTTP 狀態代碼，可幫助瀏覽器在頁面開始到達之前決定預加載哪些內容。

在去年年底被 Cloudflare 首次提及之後，現在谷歌正式宣佈在 Chrome 103 版本中提供 Early Hints，支持預加載和預連接啟動：

在以下幾行中，您將了解 Early Hints 到底是什麼，以及如何在您的網站上實施它以提高性能。

但在此之前，我們將快速回顧瀏覽器的工作原理以及為什麼首先需要早期提示。

簡而言之：瀏覽器、服務器和服務器思考時間

為了讓您加載此頁面（或任何其他頁面）並閱讀內容，您的瀏覽器需要指示要渲染什麼以及需要獲取哪些資源（如圖像、字體、JavaScript 文件）以完成其繪製。

基本上，您的瀏覽器向服務器發送請求，加載內容的說明來自服務器的響應。

不幸的是，在服務器收集編譯整個網頁所需的所有資源並將其發送回瀏覽器之前，可能會有幾百毫秒的延遲。

這一時期被稱為“服務器思考時間”。

在此服務器思考時間期間，瀏覽器只是坐在那裡等待而不顯示任何內容。 而且我相信我們可以同意沒有人願意盯著空白屏幕。

這就是早期提示發揮作用的地方。

什麼是早期提示？

提高頁面性能的一種方法是使用資源提示。 正如它們的名字所暗示的那樣，它們向瀏覽器提供關於稍後可能需要哪些資源的“提示”——例如，預加載特定文件或連接到不同的服務器。

如果您對該主題感興趣並想了解更多信息，請查看我們關於資源提示及其實現的文章。

儘管使用資源提示聽起來很棒，但有一個問題。 為了讓瀏覽器對它們採取行動，服務器必須至少發送部分頁面。

輸入早期提示。

Early Hints 利用“服務器思考時間”向瀏覽器異步發送指令以開始加載關鍵子資源（如樣式表、關鍵 JavaScript 文件等）或與可能在服務器正在編譯完整響應時的頁面。

沒有早期提示

簡單來說：

啟用 Early Hints 後，服務器會發送兩個響應：第一個（HTTP 103 Early Hints 狀態代碼）指示瀏覽器可以立即開始加載的內容，第二個（HTTP 200 狀態代碼）是完整的響應，其餘的信息。

啟用早期提示

通過在編譯完整響應之前將這些提示發送到瀏覽器，瀏覽器可以弄清楚它需要做什麼才能更快地為用戶加載網頁。

最終結果：

更快的頁面加載時間並減少用戶感知的延遲。

如果您正在尋找更正式的解釋，Cloudflare 做得很好：

在您的網站上實施早期提示

您必須採取幾個步驟才能在您的網站上成功實施早期提示。

第 0 步：考慮使用鏈接 rel=preload或鏈接 rel=preconnect而不是早期提示

這是第 0 步，因為如果您的服務器可以立即發送 200 響應，則添加 Early Hints 是無用的。 相反，如果您想加快 200 響應甚至更多，您可以使用鏈接 rel=preload或鏈接 rel=preconnect資源提示。

確定服務器發送 200 響應的速度的最簡單方法是使用 KeyCDN 的性能測試工具。 您所要做的就是插入您網站的 URL 並獲取數據：

第 1 步：確定您的首頁

如果步驟 0 對您無效並且您的服務器需要時間來生成響應，那麼您就具備繼續集成早期提示的所有先決條件。

第一步是確定您的熱門登錄頁面，或者換句話說，您的用戶在您的網站上開始他們的旅程的頁面。 這些入口點比任何其他頁面都更重要，因為早期提示的有效性會隨著訪問者瀏覽您的網站而降低。

這是因為現代瀏覽器非常擅長猜測用戶接下來將訪問哪個頁面，並且它們可能擁有第二次或第三次後續導航所需的所有子資源。

第 2 步：確定對關鍵績效指標貢獻最大的關鍵來源和子資源

確定了您的熱門登錄頁面後，您應該繼續確定哪些來源和子資源是預連接或預加載提示的良好候選者。 這些將是對最大內容繪製和首次內容繪製等關鍵指標做出巨大貢獻的來源和資源。

更具體地說，您需要尋找阻止渲染的子資源，例如同步 JavaScript、樣式表，甚至是 Web 字體。

您可以通過 WebPageTest 等測試工具運行您的網站並檢查瀑布圖來識別它們。 所有渲染阻塞資源的前面都會有一個“X”：

識別適合早期提示的子資源的最簡單方法是您的主要資源是否已經在使用鏈接 rel=preconnect或鏈接 rel=preload 。 這些是完美的候選人。

這就是您可以手動將早期提示添加到您的網站的方式。

但是，如果您沒有自己的技術技能怎麼辦？

好吧，有一個更簡單的方法。

使用您的 Cloudflare 帳戶啟用早期提示

如果您是 Cloudflare 用戶，則可以通過儀表板啟用 Early Hints，執行以下步驟：

1. 登錄到您的 Cloudflare 儀表板並選擇您的域。
2. 在儀表板中，單擊速度 > 優化。
3. 在優化交付下，啟用早期提示。

您可能知道，NitroPack 的內置 CDN 也是由 Cloudflare 提供的。 這一轉變為我們開始研究新的 HTML 邊緣緩存功能打開了大門，該功能發布後，將使我們能夠為所有客戶提供啟用早期提示的可能性，而無需擁有 Cloudflare 帳戶。

我們正在深入開發過程，並努力盡快發布 HTML 邊緣緩存。 因此，請務必訂閱我們的時事通訊並關注我們的博客，以便第一個知道我們何時宣布它。