推測規則可用來預先擷取及預先算繪下一頁瀏覽內容,詳情請參閱上一篇文章。這種做法可加快網頁載入速度 (甚至能更快載入),大幅改善這些額外的網頁導覽功能Core Web Vitals。
對推測規則進行偵錯可能並不容易。這對於預先算繪的頁面特別有用,因為這類網頁會在獨立的轉譯器中顯示,類似隱藏背景分頁,在啟用後取代目前的分頁。因此,一般開發人員工具選項可能無法用於偵錯。
Chrome 團隊致力於改善開發人員工具,以支援推測規則偵錯功能。在這篇文章中,我們將說明使用這些工具的各種方式,瞭解網頁推測規則、可能無效的原因,以及開發人員何時可以使用更熟悉的開發人員工具選項。
「使用前」條款的說明
很多「前置-」字詞很容易造成混淆,所以我們一開始會說明以下幾點:
- 預先擷取:預先擷取資源或文件,以提升日後的效能。本文介紹如何使用 Speculation Rules API 預先擷取文件,而不是使用類似但較早的
<link rel="prefetch">
選項來預先擷取子資源。 - 預先算繪:這種做法不僅可預先擷取,還能依使用者前往而實際轉譯整個頁面,但會將其保留在隱藏的背景轉譯器程序中,方便使用者在實際瀏覽網頁時使用。再次強調,本文件關注的是較新版本的「Speculation Rules API」與舊版
<link rel="prerender">
選項 (不再執行完整預先算繪)。 - 導覽推測:由推測規則觸發的新預先擷取和預先算繪選項的統稱。
- 預先載入:超載的字詞,可能會參照多種技術和程序,包括
<link rel="preload">
、預先載入掃描器和 Service Worker 導覽預先載入。我們不會在這裡討論這些項目,但為了清楚區分這些商品與「瀏覽推測」一詞,我們在此列明字詞。
「prefetch
」的推測規則
推測規則可用於預先擷取下一項導覽的文件。舉例來說,將下列 JSON 插入網頁時,系統會預先擷取 next.html
和 next2.html
:
<script type="speculationrules">
{
"prefetch": [
{
"source": "list",
"urls": ["next.html", "next2.html"]
}
]
}
</script>
相較於舊版的 <link rel="prefetch">
語法,使用推測規則執行導覽預先擷取有一些優點,例如更生動的 API,以及儲存在記憶體快取 (而非 HTTP 磁碟快取) 的結果。
對「prefetch
」推測規則進行偵錯
您可以在「網路」面板中查看推測規則觸發的預先擷取作業,就像其他擷取作業一樣:
以紅色醒目顯示的兩個要求是預先擷取的資源,會顯示在「Type」欄中。系統會根據 Lowest
的優先順序擷取這些項目,因為日後的瀏覽方式也是如此;Chrome 會優先處理目前網頁上的資源。
按一下任一資料列也會顯示 Sec-Purpose: prefetch
HTTP 標頭,其在伺服器端以下列方式識別這些要求:
使用「Speculative load」分頁對 prefetch
進行偵錯
Chrome 開發人員工具的「應用程式」面板中新增了「推測載入」部分,位於「背景服務」部分下方,協助您對推測規則進行偵錯:
這個部分提供三個分頁:
- 推測載入:列出目前網頁的預先算繪狀態。
- 規則,會列出在目前網頁上找到的所有規則組合。
- 推測:列出規則集中所有預先擷取和預先算繪的網址。
「推測」分頁會顯示在先前的螢幕截圖中,在這個範例中,我們可以看到本範例網頁有一組預先擷取 3 個網頁的推測規則。其中兩個預先擷取成功,另一個失敗。您可以按一下「規則集」旁邊的圖示,前往「元素」面板中的規則組合的來源。您也可以按一下「狀態」連結,前往依該規則集進行篩選的「推測」分頁。
「推測」分頁會列出所有目標網址,以及所有目標網址適用的動作 (預先擷取或預先轉譯)、網址的來源規則組合 (因為網頁上可能有多個規則),以及每項推測的狀態:
網址上方的下拉式選單可用來顯示所有規則組合中的網址,或只顯示特定規則組合的網址。下方會列出所有網址。按一下網址即可查看更詳細的資訊。
在此螢幕截圖中,我們可以看到 next3.html
頁面發生的失敗原因 (該頁面不存在,因此傳回 404,表示非 2xx HTTP 狀態碼)。
摘要分頁「推測載入」會顯示「這個網頁的推測載入狀態」報表,可顯示該網頁是否使用預先擷取或預先算繪。
如果是預先擷取的網頁,系統會在使用者瀏覽網頁時顯示成功訊息:
無與倫比的推測
當使用者瀏覽網頁時,如果網頁的推測規則並未導致系統使用預先擷取或預先轉譯,該分頁就會另外列出一個部分,詳細說明網址為何與任何推測網址不符。如要找出推測規則中的錯字,這項功能就能派上用場。
舉例來說,我們前往 next4.html
,但只有 next.html
、next2.html
或 next3.html
是預先擷取內容,因此,我們可以看到這與這三項規則的其中任何一項不匹配。
「推測載入」分頁非常適合用來對推測規則本身進行偵錯,以及找出 JSON 中的任何語法錯誤。
至於預先擷取作業,「網路」面板應該較為熟悉。以預先擷取失敗為例,這裡會顯示預先擷取的 404:
不過,「推測載入」分頁更能派上用場,用於預先算繪推測規則,詳情請見下文。
「prerender
」的推測規則
預先算繪推測規則遵循與預先擷取推測規則相同的語法。例如:
<script type="speculationrules">
{
"prerender": [
{
"source": "list",
"urls": ["next.html", "next2.html"]
}
]
}
</script>
這個規則集會觸發完整的載入及轉譯指定網頁 (受到某些限制)。這樣可以提供即時載入體驗,但會產生額外的資源成本。
但與預先擷取不同的是,這些欄位不會顯示在「網路」面板中,因為 Chrome 會透過獨立的轉譯程序擷取及轉譯這些內容。因此,「推測載入」分頁更重要的是對預先算繪推測規則進行偵錯。
使用「推測載入」分頁對 prerender
進行偵錯
相同的「推測載入」畫面可用於預先算繪推測規則,與嘗試預先轉譯的類似示範網頁相同,而非預先擷取三個網頁:
如您所見,這三個網址的其中一個網址無法預先算繪,開發人員可以點選「2 Ready, 1 Failure」連結,在「Speculations」分頁中取得每個網址的詳細資料。
我們在 Chrome 121 版中推出了文件規則支援功能。如此一來,瀏覽器就能從網頁上的相同來源連結取得這些內容,而不是列出一組特定的網址:
<script type="speculationrules">
{
"prerender": [
{
"source": "document",
"where": {
"and": [
{"href_matches": "/*"},
{"not": { "href_matches": "/not-safe-to-prerender/*"}}
]
},
"eagerness": "moderate"
}
]
}
</script>
這個範例會選取所有相同的來源連結,但以 /not-safe-to-prerender
開頭的連結會做為預先算繪候選項目。
也會將預先算繪的 eagerness
設為 moderate
,表示在使用者將遊標懸停或點選連結時,系統會預先算繪導覽。
此外,推測規則示範網站也設有類似規則,而這個網站新推出的「推測載入」部分會列出這個新分頁的實用性,因為頁面會列出所有符合條件的網址:
「狀態」會顯示為「未觸發」,因為這些項目的預先算繪程序尚未開始。不過,當我們將遊標懸停在連結上時,系統會預先算繪每個網址的狀態,這時會顯示以下狀態:
Chrome 已設定預先算繪限制,包括 moderate
的預先算繪上限 2 個。因此,將滑鼠遊標懸停在第 3 個連結上,就會看到該網址的失敗原因:
使用其他開發人員工具面板對 prerender
進行偵錯
與預先擷取作業不同的是,預先算繪的網頁不會顯示在開發人員工具面板 (例如「Network」面板) 中目前的轉譯程序中,因為這類頁面是在自家幕後轉譯器轉譯。
不過,您現在可以使用右上方的下拉式選單,切換開發人員工具面板使用的轉譯器,也可以在面板頂端部分選取網址,然後選取「檢查」:
這個下拉式選單 (和所選值) 也會在所有其他面板 (例如「網路」面板) 中共用,因此您可查看要求的網頁為預先算繪的頁面:
查看這些資源的 HTTP 標頭,可以發現所有和 Sec-Purpose: prefetch;prerender
標頭都設定過:
或者,您可以在「Elements」(元素) 面板中查看網頁內容,如下方螢幕截圖所示,此螢幕截圖顯示 <h1>
元素適用於預先算繪頁面:
或是「Console」(控制台) 面板,當中會顯示預先算繪頁面產生的控制台記錄:
在預先算繪的頁面中對推測規則進行偵錯
上述各節將說明如何對啟動預先算繪功能的頁面,進行偵錯。不過,預先算繪的頁面本身也可能會透過呼叫 Analytics (分析) 或登入控制台 (如上一節所述) 來提供偵錯資訊。
此外,在使用者前往預先算繪頁面後,「推測載入」分頁會顯示這個狀態,以及是否已成功預先算繪。如果無法預先算繪說明原因,請提供問題的原因:
此外,如果是預先擷取作業,則瀏覽不符合目前網頁之推測規則的頁面,會設法在「推測載入」分頁中顯示網址為何與前一個網頁的推測規則不符:
結論
在這篇文章中,我們已說明開發人員可以用多種方式對預先擷取和預先算繪推測規則進行偵錯。該團隊會持續努力開發推測規則的工具,我們非常重視開發人員建議,以及對這個令人期待的新 API 進行偵錯的其他方式。我們建議開發人員在 Chrome Issue Tracker 上回報任何功能要求或錯誤。
特別銘謝
Nubelson Fernandes 於 Unsplash 提供的縮圖。