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