如今，網(wǎng)頁中充斥著旨在增強用戶體驗的圖片、視頻和互動元素。然而，這些東西會拖慢網(wǎng)頁的加載時間。雖然技術(shù)一直在進步，有一個目標(biāo)始終不變：性能。每個人都希望自己的網(wǎng)頁能以閃電般的速度加載。讓網(wǎng)頁加載速度更快的一種方法是在用戶瀏覽網(wǎng)頁之前進行預(yù)渲染或預(yù)獲取。

預(yù)渲染簡史

2011 年，Chromium 團隊 通過標(biāo)簽向 Chrome 瀏覽器引入了早期的預(yù)渲染形式<link rel="prerender" … >。

這樣，開發(fā)人員就可以向瀏覽器提示用戶下一步可能訪問的頁面。然后，瀏覽器會在后臺靜默地獲取并呈現(xiàn)這些頁面，從而大大縮短了用戶瀏覽這些頁面時的加載時間。

盡管好處多多，但這種早期的預(yù)渲染功能會占用大量帶寬和 CPU 資源，而且如果用戶不訪問預(yù)渲染的頁面，還可能導(dǎo)致隱私問題。此外，你還必須手動選擇要預(yù)演的鏈接，這并不總是有效或可行的。

為了解決其中一些問題，Chrome 棄用了使用鏈接rel=prerender提示的預(yù)渲染，轉(zhuǎn)而使用NoState Prefetch?方法，該方法涉及在不執(zhí)行 JavaScript 或其他潛在侵犯隱私的操作的情況下獲取頁面資源。NoState Prefetch 方法改進了資源加載，但無法像完整預(yù)渲染那樣提供即時頁面加載。

推測規(guī)則 API 簡介

推測規(guī)則 API是 一個新的實驗性 JSON 定義的 API，它在導(dǎo)航到 URL 之前推測性地預(yù)加載 URL，從而縮短渲染時間并改善用戶體驗。

該 API 使開發(fā)人員能夠使用 JSON 格式定義的結(jié)構(gòu)來配置規(guī)則，script type="speculationrules"瀏覽器可以使用該結(jié)構(gòu)來決定應(yīng)預(yù)渲染哪些 URL。

<script type="speculationrules">
{
  "prerender": [
    {
      "source": "list",
      "urls": ["firstpage.html", "secondpage.html"]
    }
  ]
}
</script>

在預(yù)取時也是如此，預(yù)取通常是預(yù)渲染的第一步：

<script type="speculationrules">
{
  "prefetch": [
    {
      "urls": ["firstpage.html", "secondpage.html"]
    }
  ]
}
</script>

上面的代碼片段顯示了推測規(guī)則 API 如何通過指定要預(yù)取或預(yù)渲染的 URL 列表來工作。最近，Google 宣布了對推測規(guī)則 API 的新改進，現(xiàn)在提供了使用文檔規(guī)則自動查找鏈接的選項。這是通過根據(jù)條件從文檔中獲取 URL 來實現(xiàn)的where。

<script type="speculationrules">
{
  "prerender": [
    {
      "source": "document",
      "where": {
        "and": [
          {
            "href_matches": "/*"
          },
          {
            "not": {
              "href_matches": [
                "/wp-login.php",
                "/wp-admin/*"
              ]
            }
          }
        ]
      },
      "eagerness": "moderate"
    }
  ]
}
</script>

在此代碼片段中，頁面上的所有 URL 都被考慮進行預(yù)渲染，除了那些指向WordPress 登錄和管理頁面的 URL。還可以指定級別eagerness– eager（立即）、moderate（懸停 200 毫秒）和conservative（鼠標(biāo)或觸地時）。

CSS選擇器也可以用作替代方案或與匹配項結(jié)合href使用來查找當(dāng)前頁面上的鏈接：

<script type="speculationrules">
{
  "prerender": [{
    "source": "document",
    "where": {
      "and": [
        { "selector_matches": ".prerender" },
        { "not": {"selector_matches": ".do-not-prerender"}}
      ]
    },
    "eagerness": "moderate"
  }]
}
</script>

使用 “推測規(guī)則 API “時，可以在檢查頁面時使用 Chrome 瀏覽器應(yīng)用程序選項卡中的 “推測負(fù)載 “后臺服務(wù)進行檢查。

還有更多內(nèi)容，我們將在調(diào)試部分進行研究。

瀏覽器支持

從特定版本開始， 基于Chromium 的現(xiàn)代瀏覽器（包括 Chrome 和 Edge）都支持推測規(guī)則 API。

由于 API 是漸進式增強工具，因此可確保使用受支持瀏覽器的用戶受益于更快的加載時間，而使用其他瀏覽器的用戶則不會受到任何負(fù)面影響。

推測性加載 WordPress 插件

為了享受 WordPress 中推測規(guī)則 API 的優(yōu)勢，WordPress 性能團隊 （包括來自 Google 的開發(fā)人員）最近發(fā)布了推測加載插件。該插件支持推測加載頁面上鏈接的前端 URL。

到目前為止，由于應(yīng)用程序接口仍處于早期階段，該插件的采用率較低，但也獲得了一些好評。

默認(rèn)情況下，該插件配置為當(dāng)用戶將鼠標(biāo)懸停在相關(guān)鏈接上時預(yù)呈現(xiàn) WordPress 前端 URL。這可以通過設(shè)置 >閱讀 下的推測加載部分進行自定義。

這意味著頁面上鏈接的任何 URL 都會使用eagerness的配置進行預(yù)渲染moderate，該配置通常在將鼠標(biāo)懸停在鏈接上時觸發(fā)。因此，激活插件后您無需執(zhí)行任何操作；它開箱即用。

例如，如果已 在 WordPress 網(wǎng)站上安裝了推測性加載插件。使用Chrome DevTools 檢查站點并單擊Elements 選項卡。當(dāng)您向下滾動時，注意到已經(jīng)script type="speculationrules"為你添加了各種推測規(guī)則。

它使用 Regex 來指定應(yīng)該預(yù)渲染的鏈接，指定不預(yù)渲染的鏈接，并設(shè)置渴望程度。下文將詳細解釋這些規(guī)則。

防止某些 URL 預(yù)獲取和預(yù)呈現(xiàn)

需要注意的是， 默認(rèn)情況下， WP-admin路由被排除在預(yù)渲染和預(yù)取之外。作為一名WordPress 開發(fā)人員，可以決定想要優(yōu)先考慮的路線。

可以使用plsr_speculation_rules_href_exclude_paths過濾器自定義推測預(yù)加載的 URL 類型的規(guī)則。

以下代碼示例確保 URL 類似https://wordpresssite.com/cart/或https://wordpresssite.com/cart/book/將被排除在預(yù)取和預(yù)渲染之外：

<?php
 
add_filter(
    'plsr_speculation_rules_href_exclude_paths',
    function ( $exclude_paths ) {
        $exclude_paths[] = '/cart/*';
        return $exclude_paths;
    }
);

調(diào)試 WordPress 網(wǎng)站的推測規(guī)則

由于預(yù)渲染頁面是在單獨的渲染器中渲染的，就像一個隱藏的背景標(biāo)簽頁，激活后會取代當(dāng)前標(biāo)簽頁，因此調(diào)試推測規(guī)則可能會很棘手。Chrome 瀏覽器團隊在 DevTools 方面做了大量工作，讓你可以使用它們進行調(diào)試。

在 Chrome DevTools 中，導(dǎo)航到“應(yīng)用程序” 選項卡，然后向下滾動到“推測性加載” 選項卡。這為開發(fā)人員提供了有關(guān)推測、預(yù)渲染 URL、失敗 URL 等的詳細信息。

在這里，可以看到頁面上的五個鏈接可以根據(jù)與在 Speculative rules JSON 中設(shè)置的規(guī)則相匹配的 URL 進行預(yù)渲染，如下所示。注意，我們不需要列出所有 URL；文檔規(guī)則允許瀏覽器從頁面上的相同來源鏈接中獲取這些 URL。

一些鏈接的 “狀態(tài) “顯示為 “未觸發(fā)”這些鏈接的預(yù)渲染過程尚未開始。不過，當(dāng)我們將鼠標(biāo)懸停在頁面上的鏈接上時，就會看到狀態(tài)隨著每個 URL 的預(yù)渲染而改變。

Chrome 瀏覽器對預(yù)渲染設(shè)置了限制，包括中度急切最多只能預(yù)渲染兩次，因此在將鼠標(biāo)懸停在第三個鏈接上后，我們會看到該 URL 的失敗原因：

還可以使用右上角的下拉菜單或選擇面板頂部的 URL 并選擇Inspect來切換 DevTools 面板使用的渲染器：

下拉列表（以及所選的值）在所有其他面板（例如“網(wǎng)絡(luò)” 面板）之間共享，可以在其中看到正在請求的頁面是預(yù)渲染的頁面：

或者Elements 面板，可以看到頁面內(nèi)容：

就像你能夠調(diào)試預(yù)渲染頁面一樣，也可以預(yù)取頁面。對于“推測性加載”插件，請確保選擇“預(yù)取” 作為“推測模式”。

現(xiàn)在，使用 DevTools 檢查頁面并導(dǎo)航到“推測性加載”選項卡時，操作將 針對各種 URL 進行預(yù)取，并且規(guī)則也會發(fā)生變化。

將鼠標(biāo)懸停在鏈接后導(dǎo)航到“網(wǎng)絡(luò)”選項卡時，預(yù)取的資源將顯示在最后，如“類型”列 所示 。這些資源以最低優(yōu)先級獲取，因為它們是為了將來的導(dǎo)航，并且 Chrome 會優(yōu)先考慮當(dāng)前頁面的資源。

推測規(guī)則 API 對分析的影響

分析對于通過頁面瀏覽量和事件跟蹤網(wǎng)站使用情況以及通過真實用戶監(jiān)控 (RUM) 評估性能至關(guān)重要。重要的是要知道預(yù)渲染會影響分析。

例如，使用推測規(guī)則 API 可能需要額外的代碼才能僅在實際訪問預(yù)渲染頁面時激活分析。盡管Google Analytics、Google 發(fā)布商代碼 (GPT) 和Google AdSense 會延遲跟蹤直至頁面處于活動狀態(tài)，但并非所有提供商默認(rèn)都會這樣做。

為了解決這個問題，可以設(shè)置 Promise 來僅在頁面激活時初始化分析：

// Promise to activate analytics on page activation for prerendered pages
const whenActivated = new Promise((resolve) => {
  if (document.prerendering) {
    document.addEventListener('prerenderingchange', resolve);
  } else {
    resolve();
  }
});

async function initAnalytics() {
  await whenActivated;
  // Initialize analytics
}

initAnalytics();

總結(jié)

本文解釋什么是 Speculative Rules API、它是如何工作的，以及如何在 WordPress 網(wǎng)站上使用它。它仍是一項試驗性功能，但已逐漸得到廣泛采用。推測規(guī)則仍然僅限于同一標(biāo)簽頁中的頁面，但正在努力減少這些限制。

聯(lián)系我們
教程看不懂？聯(lián)系我們?yōu)槟赓M解答！免費助力個人，小企站點！	客服微信
① 電話：020-2206-9892
② QQ咨詢：1025174874
③ 郵件：info@361sale.com
④ 工作時間：周一至周五，9:30-18:30，節(jié)假日休息