[SEO]提升網站效能：掌握 Google Fetch Priority API 的優化策略

作者:

在當今的數位時代，網站的載入速度和效能是至關重要的。Google 一直致力於提升使用者的網頁體驗，而近期推出的 Fetch Priority API 正是一項旨在優化資源載入，提升網站效能的重要工具。透過這項新技術，網站開發者可以更精確地控制網頁元素的載入順序，進而提升網站的整體表現。

什麼是 Fetch Priority API？

Fetch Priority API 是一項允許開發者指定網頁資源載入優先順序的機制。透過設定 fetchpriority 屬性，開發者可以告訴瀏覽器哪些資源應該優先載入，哪些可以稍後再處理。這有助於確保關鍵內容能夠迅速呈現給使用者，從而提升網站的使用者體驗和效能。

如何使用 Fetch Priority API？

使用 Fetch Priority API 相當簡單，只需在 HTML 標籤中添加 fetchpriority 屬性並指定其值。目前，fetchpriority 屬性支持三個值：

  • high：表示該資源具有高優先級，應優先載入。
  • low：表示該資源具有低優先級，可以在其他高優先級資源載入後再處理。
  • auto（預設值）：表示讓瀏覽器自行決定該資源的載入優先級。

以下是一個實際應用的範例：

  <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">

在這個例子中，我們將輪播圖的第一張圖片設置為高優先級（high），以確保它能夠優先載入，而其他圖片則設置為低優先級（low），可以在第一張圖片載入後再逐一載入。

為什麼使用 Fetch Priority API？

使用 Fetch Priority API 的主要好處在於它能夠幫助網站開發者更好地控制資源的載入順序，從而優化網站的載入速度和效能。這不僅能提升使用者的瀏覽體驗，還能改善網站在 Google 的排名，因為網站速度和效能是 Google 評估網站品質的重要指標之一。

相關連結 : 使用 Fetch Priority API 最佳化資源載入功能  |  Articles  |  web.dev

官方範例

fetchpriority不只能用在圖片也可以用在載入CSS或JS上

<!-- We don't want a high priority for this above-the-fold image -->
<img src="/images/in_viewport_but_not_important.svg" fetchpriority="low" alt="I'm an unimportant image!">

<!-- We want to initiate an early fetch for a resource, but also deprioritize it -->
<link rel="preload" href="/js/script.js" as="script" fetchpriority="low">

<script>
  fetch('https://example.com/', {priority: 'low'})
  .then(data => {
    // Trigger a low priority fetch
  });
</script>