最佳化指令碼優先順序

網頁功能： 擷取優先順序

瀏覽器會根據指令碼在文件中的位置，以及是否具有 async 或 defer 等屬性，為指令碼指派預設優先順序。使用 fetchpriority 可讓開發人員明確控管，確保重要指令碼優先載入，非必要指令碼則不會造成干擾。

導入方式

  1. 找出重要指令碼：判斷哪些指令碼對網頁的核心功能或初始使用者互動至關重要。
  2. 提升重要非同步指令碼的優先順序：對於使用 async 或 defer 載入的重要指令碼，請新增 fetchpriority="high" 屬性，確保系統在探索階段優先處理這些指令碼。
  3. 降低非必要指令碼的優先順序：對於不需要立即執行的指令碼 (例如數據分析、廣告或不需捲動位置的小工具)，請新增 fetchpriority="low"，並確保這些指令碼具有 async、defer 或 module 屬性，以免遭到封鎖。
  4. 依序執行剖析器阻斷指令碼：在內文結尾處，對剖析器阻斷指令碼使用 fetchpriority="low"，避免這些指令碼與更重要的資源爭奪頻寬。

範例程式碼

<!-- Elevate the priority of the critical app logic -->
<script src="/js/app.js" async fetchpriority="high"></script>

<!-- Deprioritize non-essential tracking scripts -->
<script src="/js/tracker.js" async fetchpriority="low"></script>

<!-- Deprioritize late-body scripts to favor critical images or CSS -->
<script src="/js/legacy-widgets.js" fetchpriority="low"></script>

最佳做法

  • 強制：最多只能在 1 到 2 個重要指令碼上使用 fetchpriority="high"，以免網路爭用及降低優先順序提升效果。
  • 務必使用 fetchpriority="high"，特別是針對已知對 Interaction to Next Paint (INP) 至關重要的 async 指令碼。
  • 務必使用 fetchpriority="low" 降低初始使用者體驗不需要的指令碼優先順序。
  • 請勿在每個指令碼標記上使用 fetchpriority；只有在已知瀏覽器的預設啟發式方法不理想時，才應使用該屬性變更。
  • 請勿使用已淘汰的 importance 屬性。已由 fetchpriority 取代。

備用策略

fetchpriority 屬性是漸進增強。不支援這項屬性的瀏覽器會忽略該屬性，並使用內部排程邏輯，不會發生錯誤。基本用途不需要明確的功能偵測或備用邏輯。