改善下一個網頁的載入效能

網頁功能： 推測規則

如要提升使用者瀏覽網站時的網頁載入效能，最有效的方法之一，就是在使用者造訪下一個網頁之前，先開始載入該網頁。只要使用 Speculation Rules API，透過推測載入技術即可達成。

運作方式

推測載入功能會使用 JSON 格式的推測規則，告知瀏覽器哪些連結可以預先擷取或預先算繪，進而在使用者點選連結時提升載入網頁效能。

規則可以是硬式編碼的網址清單 urls 鍵 (稱為清單規則)，也可以是包含一組 href 和 CSS 選取器的 where 鍵，用於尋找網頁上的連結 (稱為 document 規則)。

規則也可以包含選用的 eagerness 屬性，指定何時應預先擷取或預先算繪網頁。eagerness 屬性可設為 immediate、eager、moderate 或 conservative。immediate 會盡快推測，其他則會等待使用者信號，例如短暫懸停、長時間懸停，或開始點選頁面。

規則可以與不同的積極度設定結合，積極預先擷取，然後在使用者互動更多時預先算繪。

適用時機

推測載入特別適合用於靜態網頁，因為這類網頁的內容不太可能經常變更，且網頁製作成本較低，尤其是在邊緣快取時。這項功能也可用於動態網頁，但請務必留意內容過時的可能性。

推測載入通常用於同源連結，但進階選項允許部分跨源推測。本指南著重於較常見的同源用途。

如果網頁很可能是下一個造訪的網頁，例如頭條文章或學習課程等逐步流程中的下一頁，則適合採用更積極的推測載入。

如果使用者接下來的動作不明顯，或網頁上有許多連結，且每個連結被造訪的可能性相同，則適合採用較不積極的推測載入。等待更多信號 (例如懸停或開始點選網頁)，就能在下一頁搶先一步，改善使用者體驗，即使未完全預先擷取或預先算繪也一樣。

同樣地，預先擷取是比預先算繪更保守的選擇，使用的資源較少 (在用戶端和伺服器端)，但為使用者帶來的好處較少。這很適合做為初步實作，之後再根據開發人員的明確要求，擴大至預先算繪。

使用方式

推測規則採用 JSON 格式，可包含在 <script type="speculationrules"> 標記中。規則可以包含在文件的 <head> 或 <body> 中，也可以使用 JavaScript 動態新增。

您也可以在全域層級或個別規則中使用 tag。設定後，這個標記會包含在 Sec-Speculation-Tags 標頭中，方便您在伺服器端識別推測預測。

預先擷取預先定義網址的簡易網址清單規則範例

<script type="speculationrules">
  {
    "tag": "product-page-speculations",
    "prefetch": [
      {
        "urls": ["/product/1", "/product/2", "/product/3"]
      }
    ]
  }
</script>

簡單的文件規則範例，用於預先算繪網頁上所有相同來源的連結

<script type="speculationrules">
  {
    "tag": "all-links-speculations",
    "prerender": [{
      "where": { "href_matches": "/*" }
    }]
  }
</script>

<script type="speculationrules">
  {
    "tag": "speculations-with-exclusions",
    "prerender": [{
      "where": {
        "and": [
          { "href_matches": "/*" },
          { "not": {"href_matches": "/wp-admin"}},
          { "not": {"href_matches": "/*\\?*(^|&)add-to-cart=*"}},
          { "not": {"selector_matches": ".do-not-prerender"}},
          { "not": {"selector_matches": "[rel~=nofollow]"}}
        ]
      }
    }]
  }
</script>

混合規則集範例

這個範例顯示的規則集會積極預先擷取所有連結，然後在收到更多 moderate 積極度的信號時，進一步預先算繪這些連結。

<script type="speculationrules">
  {
    "prefetch": [{
      "tag": "prefetch-speculations",
      "where": { "href_matches": "/*" },
      "eagerness": "eager"
    }],
    "prerender": [{
      "tag": "prerender-speculations",
      "where": { "href_matches": "/*" },
      "eagerness": "moderate"
    }]
  }
</script>

最佳做法

  • 建議使用推測規則，預先擷取及預先算繪使用者接下來可能造訪的網頁。
  • 建議對靜態網站使用推測規則，因為這類網站的內容不太可能經常變更，且網頁製作成本較低，尤其是在邊緣快取時。
  • 建議：對動態網頁使用推測規則時，請務必謹慎。動態網頁的內容較常變更，可能過時，且製作成本較高。
  • 建議優先使用文件規則，而非清單規則，因為文件規則更具彈性，可讓多個網頁共用相同規則，並可用於預先擷取及預先算繪未事先得知的網頁。
  • 務必權衡預先擷取和預先算繪的優缺點，並根據用途選擇合適的做法。預先算繪的成本高於預先擷取，且在顯示動態狀態的複雜應用程式中，可能會造成更多非預期的副作用，但能提供更優質的使用者體驗。如果不確定，請詢問開發人員。
  • 建議考量不同 eagerness 層級的優缺點，並根據用途選擇合適的層級。更積極的推測可提供更優質的使用者體驗，但會使用更多資源，且在顯示動態狀態的複雜應用程式中，可能會造成更多非預期的副作用。如果不確定，請詢問開發人員。
  • 請勿過度使用推測規則，例如推測網頁上的每個連結。瀏覽器有限制 (非積極推測最多 2 個)。immediate 應僅用於極少數連結。
  • 請勿推測可能觸發狀態變更的網址 (例如 /logout 或 /add-to-cart)，如果這些網址可能包含在文件規則中，請明確將其排除在推測規則之外。
  • 請勿在單頁應用程式 (SPA) 上使用推測規則。推測規則適用於多頁應用程式 (MPA)，瀏覽器每次導覽時都會前往新文件。在 SPA 中，瀏覽器不會在每次導覽時前往新文件，因此推測規則無法正常運作。

瀏覽器支援和備用策略

不過，推測載入功能會逐步強化。這項功能可安全地用於強化成效，且可能帶來成效優勢，因此強烈建議使用。如果瀏覽器不支援推測規則，就會直接忽略。