如何使用 Speculative Loading 推測性加載來提高 WordPress 網站的頁面速度

Wordpress Getty Images 2
Wordpress Getty Images 2

如今,網頁充滿了在增強使用者體驗的圖片、影片和互動元素,但是,這些元素可能會減慢頁面的載入時間;隨著技術的進步,有一個目標始終不變:效能;每個人都希望自己的網頁能夠以閃電般的速度載入。

使網頁載入速度更快的一種方法是在使用者導航到網頁之前預先渲染或預先載入網頁。

預先渲染的由來

2011 年,Chromium 團隊 透過標籤向 Chrome 瀏覽器引入了早期的預先渲染形式<link rel="prerender" … >

這使得開發人員可以向瀏覽器提示使用者接下來可能會造訪哪個頁面,然後,瀏覽器會在後台默默地取得並呈現這些頁面,從而大大 減少使用者導航到這些頁面時的載入時間。

儘管有其好處,但這種早期的預渲染實作使用了大量的頻寬和 CPU 資源,如果使用者不訪問預渲染頁面,可能會導致隱私問題,此外,您必須手動選擇要預先渲染的連接,這並不總是有效或可行。

為了解決其中一些問題,Chrome 放棄了使用連結rel=prerender提示的預渲染,轉而使用 NoState Prefetch 方法,該方法涉及在不執行 JavaScript 或其他潛在侵犯隱私的操作的情況下獲取頁面資源。

NoState Prefetch 方法改進了資源加載,但無法像完整預渲染那樣提供即時頁面加載。

Speculative Loading 預先推測規則 API 簡介

推測規則 API (Speculative Loading) 是一個新的實驗性 JSON 定義的 API,它在導航到 URL 之前推測性地預先載入 URL,從而縮短渲染時間並改善使用者體驗。

該 API 使開發人員能夠使用 JSON 格式定義的結構來配置規則,script type="speculationrules"瀏覽器可以使用該結構來決定應預先渲染哪些 URL。

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

預先取時也是如此,這通常是預先渲染之路上良好的第一步:

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

上面的程式碼片段顯示了推測規則 API 如何透過指定要預先或預先渲染的 URL 清單來運作。

最近,Google 宣布了對推測規則 API 的新改進,現在提供了使用文件規則自動尋找連結的選項,這是透過根據條件從文件中取得 URL 來實現的where

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

在此程式碼片段中,頁面上的所有 URL 都被考慮進行預先渲染,除了那些指向WordPress 登入和管理頁面的 URL,您也可以指定等級eagerness– eager (立即)、moderate (懸停 200 毫秒)和conservative (滑鼠或觸地時)。

CSS 選擇器也可以用作替代方案或與匹配項結合href使用來查找當前頁面上的連結:

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

當您使用推測規則 API 時,您可以 在檢查頁面時使用 Chrome 應用程式標籤中的推測載入後台服務來檢查它。

Inspect Speculation Rules

瀏覽器支援

從特定版本開始, 基於 Chromium 的現代瀏覽器,包括 Chrome 和 Edge 都支援推測規則 API

Browser Support

這確保了支援的瀏覽器上的用戶可以受益於更快的載入時間,而其他瀏覽器上的用戶不會遇到任何負面影響,因為該 API 是一種漸進式增強工具。

預先推測性加載 WordPress 外掛

為了享受 WordPress 中推測規則 API 的優勢,WordPress 效能團隊,包括來自 Google 的開發人員,最近發布了 Speculative Loading 外掛程式,該外掛支援推測加載頁面上連結的前端 URL。

到目前為止,由於 API 仍處於早期階段,該外掛的採用率較低,但它已經獲得了一些正面的評價。

Review Speculative Loading

預設情況下,該外掛程式配置為當使用者將滑鼠懸停在相關連結上時預先渲染 WordPress 前端 URL,這可以透過 設定 >閱讀 下的推測載入部分進行自訂。

Customize Plugin

這意味著頁面上連結的任何 URL 都會使用eagerness的配置進行預渲染moderate,該配置通常在將滑鼠懸停在連結上時觸發,因此,啟動外掛後您無需執行任何操作;它開箱即用

例如:如果您已 在 WordPress 網站上安裝了推測性加載外掛程式,使用 Chrome DevTools 檢查網站並點擊 Elements 選項卡,當您向下滾動時,您會注意到已經script type="speculationrules"為您添加了各種推測規則。

Auto Speculative Rules

它使用正規表示式來指定應預先渲染的連結、指定不預先渲染的連結並設定急切度,以下部分詳細解釋了這些規則。

防止過度使用的限制

Chrome 設有限制以防止過度使用 API:

Limits To Prevent Overuse

它們透過基於緊急程度和用戶互動的各種設定來防止過度使用。

  • immediate並且eager– 它們不依賴用戶操作,因此具有更高的限制,它們允許透過消除舊的猜測來進行動態容量調整。
  • moderateconservative相反,這些設定是由使用者觸發的,並遵循先進先出 (FIFO) 原則,上限為 2,用新的推測替換最舊的推測以節省記憶體。
Fifo Rules

防止某些 URL 預先取得和預先渲染

值得注意的是, 預設情況下, WP-admin 路由被排除在預先渲染和預取之外,身為WordPress 開發人員,您可以決定您想要優先考慮的路線。

您可以使用篩選器自訂要推測預先載入的 URL 類型的規則plsr_speculation_rules_href_exclude_paths

以下程式碼範例確保 URL 類似https://wordpresssite.com/cart/https://wordpresssite.com/cart/book/將被排除在預取和預渲染之外:

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

有時,您可能希望從預先呈現中排除 URL 並允許預先提取它。例如,使用客戶端JavaScript 更新使用者狀態的頁面可能不應該預先渲染,但預取是合理的。

為此,plsr_speculation_rules_href_exclude_paths過濾器接收當前模式(prefetchprerender)以提供條件排除。

例如,讓我們確保類似的 URLhttps://wordpresssite.com/products/無法預先呈現,同時仍允許預先取得它們。

<?php
add_filter(
    'plsr_speculation_rules_href_exclude_paths',
    function ( array $exclude_paths, string $mode ): array {
        if ( 'prerender' === $mode ) {
            $exclude_paths[] = '/products/*';
        }
        return $exclude_paths;
    }
);

調整 WordPress 網站的預先推測規則

調試推測規則可能很棘手,因為預先渲染的頁面是在單獨的渲染器中渲染的,就像隱藏的背景選項卡 在啟動時會替換當前選項卡一樣, Chrome 團隊在 DevTools 方面做了很多工作,讓您能夠使用它們進行偵錯。

在 Chrome DevTools 中,導覽至「應用程式」 標籤,然後向下捲動至「推測性載入」 標籤,這為開發人員提供了有關推測、預先渲染 URL、失敗 URL 等的詳細資訊。

Debug Speculation Rules

在這裡,您可以看到頁面上的五個連結可以根據與推測規則 JSON 中設定的規則相符的 URL 進行預呈現,如下所示。請注意,您不需要列出所有 URL;文件規則允許瀏覽器從頁面上的相同來源連結中取得這些內容。

Chrome Devtool

某些連結的「狀態」顯示為「未觸發」——這些連結的預渲染過程尚未啟動,但是,當我們將滑鼠懸停在頁面上的連結上時,我們會看到每個 URL 預先呈現時狀態會改變。

請記住,Chrome 對預渲染設定了限制,包括最多兩次預渲染moderate,因此將滑鼠懸停在第三個連結上後,我們會看到該 URL 的失敗原因:

Fifo Effect

也可以使用右上角的下拉式選單或選擇面板頂部的 URL 並選擇 Inspect 來切換 DevTools 面板使用的渲染器:

Inspect Prerendered Page

此下拉清單以及所選的值,在所有其他面板,例如:「網路」 面板之間共享,您可以在其中看到正在請求的頁面是預先渲染的頁面:

Network Prerendered

或是 Elements 面板,可以看到頁面內容:

Element Prerendered

就像您能夠調試預渲染頁面一樣,您也可以預取頁面。對於「推測性載入」外掛,請確保選擇「預取」 作為「推測模式」

Prefetch Speculative Loading

現在,當您使用 DevTools 檢查頁面並導航至「推測性載入」標籤時,操作 針對各種 URL 進行預取,且規則也會變更。

Prefetched Links

當您將滑鼠懸停在連結後導航到「網路」標籤時,預先取的資源將顯示在最後,如「類型」列 所示,這些資源以最低優先順序獲取,因為它們是為了將來的導航,並且 Chrome 會優先考慮當前頁面的資源。

Prefetch Output

性能對比

到目前為止,您已經了解了「推測載入」外掛程式的作用及其工作原理,理論已經足夠了;讓我們比較同一伺服器上兩個相同網站的效能。

為此,我們在同一資料中心使用 Google 的 C3D VM 進行佈署,建立了兩個 WordPress 網站,並且沒有為這兩個站點安裝任何其他外掛。

兩個 WordPress 網站:

  • Bare-site
  • Speculative-site

「Bare-site」沒有外掛,而「Speculative-site」則安裝了「Speculative Loading」外掛件並在 WordPress 控制台上啟用。

重要的是要知道推測規則 API 只會增加加載您將要導航的下一頁所需的時間,您無法根據 Lighthouse 等通用網站效能工具來判斷這一點。

我們將透過從兩個網站上的特定內部連結載入頁面來測試頁面速度,並 在您檢查網站以查看載入時間和其他資訊時使用 Chrome DevTool 的「網路」標籤。

對於「全新的網站」,您會注意到載入需要更長的時間,因為整個載入過程都是在運行中進行的,並且 DOM 內容剛剛載入:

Bare Site

但對於 Speculative-site,DOM 內容已經透過 Speculative API 載入並快取。

Speculative Site

兩個網站之間的差異可能看起來很小,在本例中,差異約為 0.22 s,但對於內容較多的大型網站,您開始注意到顯著差異。

推測規則 API 對分析的影響

分析對於透過頁面瀏覽量和事件追蹤網站使用情況以及透過真實使用者監控 (RUM) 評估效能至關重要,重要的是要知道預渲染會影響分析。

例如,使用推測規則 API 可能需要額外的程式碼才能僅在實際存取預渲染頁面時啟動分析,儘管 Google Analytics、Google 發布商代碼 (GPT) 和 Google AdSense 會延遲追蹤直至頁面處於活動狀態,但並非所有提供者預設都會這樣做。

為了解決這個問題,可以設定 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();

結論

本文介紹什麼是預先推測規則 API、它的工作原理以及如何在 WordPress 網站上使用它,它仍然是一個實驗性功能,但它正在逐漸獲得大規模採用。

預先推測規則仍然僅限於同一選項卡內的頁面,但正在努力減少這些限制。

同樣重要的是要知道,網站效能的很大一部分取決於託管品質,我們推薦使用 Kinsta,Kinsta 以提供 具有數十種高級功能的高級 WordPress 託管而聞名。

Kinsta 的基礎設施完全容器化,並由 Google Premium Tier 網路上的 Google Cloud Platform 獨家提供支援,能夠為您提供大量最快的資料伺服器選擇、令人難以置信的性能、伺服器級快取、專用資源和增強的安全性。

Please rate Stellar
0 / 5 5 Votes 4

Your page rank:

Your Mastodon Instance