在當今的數位時代，網站的載入速度和效能是至關重要的。Google 一直致力於提升使用者的網頁體驗，而近期推出的 Fetch Priority API 正是一項旨在優化資源載入，提升網站效能的重要工具。透過這項新技術，網站開發者可以更精確地控制網頁元素的載入順序，進而提升網站的整體表現。
提升網站效能的新利器：Fetch Priority API
在數位時代，網站的載入速度與效能至關重要。Google 一直致力於提升使用者的網頁體驗，而 Fetch Priority API 正是一項用於優化資源載入順序、提升網站效能的重要技術。透過這項新技術，開發者可以更精確地控制網頁元素的載入順序，確保關鍵內容能夠優先呈現，從而提升整體用戶體驗。
什麼是 Fetch Priority API？
Fetch Priority API 允許開發者設定網頁資源的載入優先級，透過 fetchpriority 屬性指示瀏覽器應如何處理資源的載入順序。這有助於加速關鍵內容的顯示，減少不必要的等待時間，從而提升網站的使用體驗與效能。
目前，fetchpriority 屬性支持以下三種值：
high：高優先級，該資源應被優先載入。low：低優先級，該資源可以在高優先級資源載入後再處理。auto（預設值）：讓瀏覽器根據自身的演算法決定資源的載入優先級。
如何使用 Fetch Priority API？
使用 Fetch Priority API 非常簡單，只需在 HTML 標籤中添加 fetchpriority 屬性。
應用範例：優化圖片載入順序
<img src="img/carousel-1.jpg" fetchpriority="high">
<img src="img/carousel-2.jpg" fetchpriority="low">
<img src="img/carousel-3.jpg" fetchpriority="low">
<img src="img/carousel-4.jpg" fetchpriority="low">範例中，第一張輪播圖（carousel-1.jpg）被設為高優先級 (high)，確保它能夠優先載入，提升頁面首次呈現的速度；而其餘圖片則設為低優先級 (low)，可在第一張圖片載入後逐一載入，減少不必要的資源競爭。
在這個例子中，我們將輪播圖的第一張圖片設置為高優先級（high），以確保它能夠優先載入，而其他圖片則設置為低優先級（low），可以在第一張圖片載入後再逐一載入。
更多應用場景：CSS & JS 預載入
fetchpriority 不僅適用於圖片，也能應用於 CSS 和 JavaScript，幫助優化網站載入流程。
CSS & JS 預載入範例
<!-- 我們不希望這張圖片優先載入，因為它不是主要內容 -->
<img src="/images/in_viewport_but_not_important.svg" fetchpriority="low" alt="I'm an unimportant image!">
<!-- 優先預載入 JavaScript，但降低其執行優先級 -->
<link rel="preload" href="/js/script.js" as="script" fetchpriority="low">
<script>
// 觸發低優先級的 fetch 請求
fetch('https://example.com/', { priority: 'low' })
.then(data => {
console.log('低優先級資源已載入');
});
</script>在這裡，我們:
- 降低圖片的優先級 (
fetchpriority="low")，避免影響關鍵內容載入。 - 預載 JavaScript (
preload)，但降低執行優先級，確保其他關鍵資源不受影響。 - 在 JavaScript
fetch()請求中指定priority: 'low'，降低 API 請求的影響。
為什麼使用 Fetch Priority API？
使用 Fetch Priority API 的主要好處在於它能夠幫助網站開發者更好地控制資源的載入順序，從而優化網站的載入速度和效能。這不僅能提升使用者的瀏覽體驗，還能改善網站在 Google 的排名，因為網站速度和效能是 Google 評估網站品質的重要指標之一。
使用 Fetch Priority API 的好處包括：
加速關鍵內容的載入：確保首屏重要內容優先載入，減少延遲。
降低不必要的資源競爭：避免次要資源影響關鍵資源的載入。
提升使用者體驗：減少首屏等待時間，提升網站的流暢度。
有助於 SEO：網站載入速度是 Google Page Experience 評估的一部分，優化資源載入有助於提升搜尋排名。