使用優先級提示和 fetchpriority 加速資源加載

您最關鍵的資源加載速度有多快？

這個確切的問題讓網站所有者（和經驗豐富的網絡專家）如痴如醉。 碰巧它就是在最初幾毫秒內成就或破壞您的網站的原因。

在優化資源加載方面，您有兩種選擇：

1. 完全依靠瀏覽器的機制以最佳順序下載和獲取資源。
2. 嘗試通過實施資源提示來幫助他們。

不幸的是，與現代瀏覽器一樣好，每個站點/應用程序的設置和上下文都不同。 雖然他們非常擅長分配資源優先級，但在某些情況下，這還不夠。

唉，資源提示對資源優先級的影響有限。

幸運的是，您可以將一個新提示添加到您的 Web 性能工具箱中——優先提示。

在本文中，您將了解更多關於：

• 什麼是優先提示；
• 何時使用它們；
• 如何通過 fetchpriority 實現它們；
• 如何在您的網站上測試它們。

讓我們開始！

什麼是優先提示？

優先級提示是一種信號，允許網站所有者和開發人員在瀏覽器加載資源（例如，圖像、字體、CSS、腳本和 iframe）時指示它們的優先級。

瀏覽器在構建網頁的過程中要下載各種資源。 作為優先資源，它首先請求並下載 HTML 文檔。

但是瀏覽器如何確定接下來要加載什麼？

好吧，瀏覽器對每種資源類型都有一組預先確定的優先級：

這些默認優先級通常工作得很好，從而產生良好的 Web 性能。

然而，正如 Addy Osmani 在他關於優先級提示的文章中提到的那樣，瀏覽器可以對接下來要獲取的內容做出很好的有根據的猜測。

但他們並不像你那樣了解你的項目。

因此，可能需要進行一些微調：

“像 Chrome 這樣的瀏覽器確實具有啟發式方法，可以根據信號（例如它們是否在視口中）來嘗試以適當的優先級獲取資源。也就是說，如果沒有優先級提示，Chrome 只能在佈局後提高視口內圖像的優先級已經完成。這通常為時已晚，此時，它可以與其他所有內容競爭。考慮使用提示的另一個原因是，作為頁面作者，您可能知道用戶首先看到的最重要的內容，並且可以通知瀏覽器，以便它可以針對您的用例進行優化。”

以前，您唯一能做的就是使用預加載或預連接。

而且雖然preload是瀏覽器需要遵守的強制性指令，但在某些情況下，預加載的資源仍然可以獲得較低的優先級。

例如，預加載的最大內容繪製 (LCP) 圖像可以獲得低優先級並被其他高優先級資源推回。 在這種情況下，優先提示可以完美地補充預加載並幫助加載資源。

這是關於優先提示的網絡研討會，Pat Meenan 談到了 Chrome 中的優先提示，甚至稱它們為 LCP 的“作弊代碼”：

這是優先提示功能的一個典型例子。

現在，讓我們看看何時應該在 Web 性能策略中實施優先提示。

何時使用優先提示

根據 Google 的說法，優先提示可以在 5 種主要情況下提供幫助：

1. 您有幾個首屏圖像，但它們不需要具有相同的優先級。 例如，在圖像輪播中，只有第一個可見圖像需要比其他圖像更高的優先級。
   
2. 視口內的英雄圖像以低優先級開始。 佈局完成後，Chrome 發現它們在視口中並提高它們的優先級（不幸的是，開發工具只顯示最終優先級 - WebPageTest 將同時顯示兩者）。 這通常會顯著延遲加載圖像。 在標記中提供優先級提示可以讓圖像以高優先級開始並更早地開始加載。

注意：將腳本聲明為 async 或 defer 會告訴瀏覽器異步加載它們。 但是，如上圖所示，這些腳本也被分配了“低”優先級。 您可能希望在確保異步下載的同時提高它們的優先級，特別是對於任何對用戶體驗至關重要的腳本。

您可以使用 JavaScript fetch() API 異步獲取資源或數據。 瀏覽器為 Fetch 分配了高優先級。 在某些情況下，您可能不希望所有提取都以高優先級執行，而是更喜歡使用不同的優先級提示。 這在運行後台 API 調用並將它們與響應用戶輸入的 API 調用（例如自動完成）混合時會很有幫助。 後台 API 調用可以標記為低優先級，交互式 API 調用可以標記為高優先級。

瀏覽器為 CSS 和字體分配了高優先級，但所有這些資源可能並不同樣重要或對 LCP 而言是必需的。 您可以使用優先級提示來降低其中一些資源的優先級。

幾乎所有網站都屬於前兩種情況。 要確定您是否應該處理其他任何問題，請深入研究您的 (HTML/JS) 代碼或尋求 Web 開發人員的幫助。

如何實現優先級提示：fetchpriority 屬性

您可以使用 fetchpriority HTML 屬性實現優先提示。

您可以將屬性用於：

• 關聯
• 圖像
• 腳本
• iframe 標籤

fetchpriority屬性接受以下三個值之一：

• high：表示您認為資源很關鍵，並希望瀏覽器對其進行優先級排序。
• 低：表示您認為資源不太重要，並希望瀏覽器取消它的優先級。
• auto：當您沒有偏好並讓瀏覽器決定適當的優先級時的默認值。

或者，您可以使用 JavaScript Fetch API：

使用fetchpriority屬性時要記住的幾件事：

• fetchpriority不能確保較高優先級的資源將在相同類型的其他（較低優先級）資源之前加載。
• fetchpriority不應用於控制加載順序本身。
• fetchpriority不是強制指令，它不能強制瀏覽器獲取資源或阻止它獲取。 是否要獲取資源取決於瀏覽器。

重要提示：與資源提示類似，應謹慎使用優先級提示，因為過度使用可能會導致速度變慢而不是性能提升。

如何使用優先提示測試您的網站

在運行測試之前，您應該知道優先提示僅在 Chrome 101（或更高版本）和 Edge 101（或更高版本）中可用：

現在到手頭的問題：

最簡單的方法是使用工具，因此您不必手動更改代碼。

幸運的是，WebPageTest 的實驗功能可以讓您在不更改代碼的情況下測試優先提示等性能功能。

但是，WebPageTest 的實驗功能是他們付費訂閱的一部分，因此您需要計劃一些額外的費用。

相反，如果您有技術技能，您可以自行微調​​您網站的代碼並測試優先提示的影響。

確保在每次更改後運行測試。

回顧

我們涵蓋了很多內容，所以這裡快速回顧一下最重要的幾點：

• 優先級提示允許您指示站點資源的優先級。
• 優先提示可以幫助您加快加載首屏圖像、英雄圖像（LCP 元素）、異步和延遲腳本、CSS 和字體文件。
• 優先級提示可以通過 fetchpriority 屬性來實現。
• 您可以將 fetchpriority 屬性與鏈接、img、腳本和 iframe 標記一起使用。
• fetchpriority 屬性接受三個值之一：high、low 和 auto。
• 警告：應謹慎實施優先提示，因為過度使用它們可能會導致性能下降而不是提高速度。
• fetchpriority 不是強制指令，它不能強制瀏覽器獲取資源或阻止它獲取。 是否要獲取資源取決於瀏覽器。
• 優先提示在 Chrome 101 或更高版本中可用。

要衡量優先提示對您網站的影響，請在每次更改後運行測試。

流行的測試工具：

• PageSpeed 見解
• GTMetrix
• 網頁測試
• 燈塔
• 王國