WordPress 中提供推測加載

在 2024 年初的「立即加載頁面」網路研討會上，Google 的 Adam Silverstein 提到 WordPress 效能團隊正在開發一個插件，該插件將啟用推測規則 API：

快進到 2024 年 4 月，WordPress 正式發布了 Speculative Loading，這是一個支援 Speculation Rules API 的效能外掛程式。

但在我們開始討論之前，先快速概述一下推測規則 API。

推測規則 API 解釋

以下段落是 Google 推測規則 API 的簡要說明。 如果您想更深入地研究，請閱讀我們的專題文章。

Speculation Rules API是Google開發的實驗性技術，旨在提高未來頁面導航的效能。 基於廣泛可用的資源提示連結 rel=prefetch和連結 rel=prerender ，此JSON 定義的API 為開發人員和網站所有者提供了一種更靈活且更具表現力的方式來指定應預取或預渲染哪些文件.

您可以輕鬆在內聯中設定推測載入類型（預取或預渲染） 推測規則響應標頭引用的元素和外部文本文件。

您有兩個選項來啟用推測規則 API：

1. 使用 URL 模式：定義哪些 URL 適合預先或預先渲染。
   
2. 指定「渴望」等級：使用渴望設定來指示何時應該觸發推測 - 「渴望」一旦觀察到推測規則就會觸發； 如果您將滑鼠懸停在連結上 200 毫秒，則「中等」會執行推測； 「保守」推測指針或觸地

如何指定「渴望」的程度

是否預取或預渲染頁面取決於您想要實現的效能改進：

預取指示瀏覽器下載所引用頁面的回應正文，但不下載頁面引用的子資源。 當使用者導航到預取頁面時，它的載入速度比平常更快。

另一方面，預先渲染指示瀏覽器取得、渲染所有內容並將其載入到不可見的標籤中，包括子資源和 JavaScript。 當使用者導航到該頁面時，資源的預先載入會帶來近乎即時的體驗。

雖然預先渲染的效能優勢更為顯著，但您應該謹慎使用這種載入技術。 預渲染會使用大量記憶體和網路頻寬，如果使用者不導航到該頁面，可能會導致資源浪費。

相反，預取的前期成本比預渲染小得多，因此您可以更廣泛地採用預取。

WordPress 中的預渲染與預取

由於資源提示 API，WordPress 使用者多年來一直能夠在 HTML 文件中插入連結標籤來預取或預渲染資源。

然而，使用標籤缺乏彈性，因為必須儘早指定 URL，從而導致潛在的資源浪費或錯失效能提升。 此外，基於視口可見性插入連結標籤的動態解決方案提供了更大的靈活性，但仍可能導致過度預取。

考慮到所有這些限制，性能團隊非常積極地尋找更好的解決方案...

推測性加載：新的 WordPress 效能插件

推測性載入可以預先呈現或預先呈現頁面上連結的其他前端 URL。

啟動後，該外掛程式會自動插入 JSON 腳本，並以「中等」的熱情預先渲染頁面上的任何 URL。

您可以輕鬆更改此預設行為，並透過「設定」>「閱讀」畫面中的「推測性載入」部分進行修改：

來源：WordPress

此外，您可以使用名為「plsr_speculation_rules_href_exclude_paths」的篩選器自訂要推測預先載入的 URL。 例如，基於使用者動作（例如，購物車）修改的頁面可以被排除在預先呈現或預取之外。

這是過濾器的程式碼範例：

來源：WordPress

如何測試和發送回饋

WordPress 效能團隊鼓勵更多的人測試新插件，因為他們考慮將來將該功能納入 WordPress 核心中。

以下是您可以如何幫助他們的方法：

• 透過 WP Admin 或 Performance Lab 外掛程式在您的網站上安裝並啟動推測載入外掛程式。
• 透過「設定」>「閱讀」下的「推測載入」部分嘗試不同的配置。
• 調試插件添加的規則如何觸發推測性加載，以更好地理解該功能並發現潛在的錯誤。
• 在 GitHub 儲存庫或插件的支援論壇中報告回饋或錯誤。
• 將您的外掛程式與「plsr_speculation_rules_href_exclude_paths」過濾器集成，以從預取和/或預渲染中排除特定 URL。
  

NitroPack 的導航 AI：即時頁面體驗的自動化解決方案

NitroPack 的 Navigation AI 是一款基於 AI 的 Web 效能優化器，可自動預測和分析使用者行為，以在客戶旅程中預先渲染整個頁面。

基於推測規則 API 的非接觸式解決方案可讓開發人員和網站所有者透過以下方式提供即時瀏覽體驗：

1. 根據數據對頁面加載應用人工智慧增強的初始預測，而無需將其傳遞給推測規則 API（尚未）；
2. 一旦我們確定接下來的操作是什麼，就會分析使用者行為、調整預測並指示推測規則 API 預先渲染（或預取）頁面。

人工智慧和 Google 推測規則 API 的結合不可避免地會帶來令人印象深刻的效能結果：

• 載入時間不到 3 秒。
• LCP（最大內容繪製）和 CLS（累積佈局偏移）的巨大改進
• 整個網站更好的核心網路生命力

因此，如果您想讓訪客對您的頁面載入速度感到敬畏…

加入 Navigation AI 的候補名單，讓您的網站為即時使用者體驗做好準備 →

常見問題解答

WordPress 中的推測載入外掛程式是否使用 AI？

不，推測載入插件不是由人工智慧 (AI) 提供支援。 它利用 Google 的推測規則 API，將 JSON 腳本插入到頁面上連結的任何 URL 中，並使用「中等」的渴望度配置來預先渲染它們。

哪些頁面適合推測載入？

您可以將推測載入策略套用到未由使用者操作修改的所有頁面。 一個好的經驗法則是避免預先呈現或預先結帳和購物車頁面，因為這可能會導致糟糕的使用者體驗。 此外，當使用者載入的可能性很高（大於 80% 的時間）時，Google 僅建議偽裝頁面。

哪些瀏覽器支援推測規則 API？

雖然自版本109 以來，推測規則API 已在Chrome 和Edge 中可用，但Chrome 121 中提供了特定的子功能“文檔規則”，該子功能允許瀏覽器從頁面中的元素獲取用於推測加載的URL清單。

Google Analytics 如何處理推測性預載？

如果您使用的是 Google Analytics，則無需執行任何操作，因為 GA 預設會延遲啟動來處理預先渲染。 然而，使用其他工具時，預先渲染頁面可能會影響分析，網站所有者可能需要添加額外的程式碼，以便在啟動時僅啟用預渲染頁面的分析。 這可以透過使用 Promise 來實現，如果文件正在預先渲染，Promise 會等待prerenderingchange事件。