某些連結的「狀態」顯示為「未觸發」——這些連結的預渲染過程尚未啟動。但是,當我們將滑鼠懸停在頁面上的連結上時,我們會看到每個 URL 預先呈現時狀態會改變。
請記住,Chrome 對預渲染設定了限制,包括最多兩次預渲染moderate,因此將滑鼠懸停在第三個連結上後,我們會看到該 URL 的失敗原因:
滑鼠懸停兩個連結後FIFO 生效
將滑鼠懸停在兩個連結後,先進先出 (FIFO) 生效。
也可以使用右上角的下拉式選單或選擇面板頂部的 URL 並選擇Inspect來切換 DevTools 面板使用的渲染器:
使用 Chrome DevTools 檢查預先渲染的頁面
使用 Chrome DevTools 檢查預先渲染的頁面。
此下拉清單(以及所選的值)在所有 廣告資料 其他面板(例如「網路」 面板)之間共享,您可以在其中看到正在請求的頁面是預先渲染的頁面:
預先渲染頁面的網路標籤顯示已預先渲染的文件
預先渲染頁面的網路標籤顯示已預先渲染的檔案。
或是Elements 面板,可以看到頁面內容:
元素標籤顯示預渲染頁面的 HTML 內容
元素標籤顯示預先渲染頁面的 HTML 內容。
就像您能夠調試預渲染頁面一樣,您也可以預取頁面。對於「推測性載入」插件,請確保選擇「預取」 作為「推測模式」。
使用推測載入設定從預渲染切換到預取
使用推測載入設定從預渲染切換到預取。
現在,當您使用 DevTools 檢查頁面並導航至「推測性載入」標籤時,操作將 針對各種 URL 進行預取,且規則也會變更。
可以透過 Chrome DevTools 存取每個預取連結的狀態
每個預取連結的狀態可以透過 Chrome DevTools 存取。
當您將滑鼠懸停在連結後導航到「網路」標籤時,預先取的資源將顯示在最後,如「類型」列 所示 。這些資源以最低優先順序獲取,因為它們是為了將來的導航,並且 Chrome 會優先考慮當前頁面的資源。
當您將滑鼠懸停在連結上時,「網頁」標籤會顯示預先取的頁面
當您將滑鼠懸停在連結上時,「網路」標籤會顯示預先取的頁面。
效能比較
到目前為止,您已經了解了「推測載入」外掛程式的作用及其工作原理。理論已經足夠了;讓我們比較同一伺服器( Kinsta 的 WordPress 託管)上兩個相同網站的效能。
為此,我 在同一資料中心(使用Google 的 C3D VM進行增強)上使用MyKinsta儀表板建立了兩個 WordPress 站點,並且沒有為這兩個站點安裝任何其他插件。Iowa (US Central)
使用 MyKinsta 建立兩個站點,以比較使用和不使用推測性載入插件的站點
使用 MyKinsta 建立兩個站點,以比較使用和不使用推測載入插件的站點。
「Bare-site」沒有插件,而「Speculative-site」則安裝了「Speculative Loading」插件並在WordPress 儀表板上啟動。
重要的是要知道推測規則 API 只會
增加加載您將要導航的下一頁所需的 阿爾巴尼亞電話號碼列表 時間 – 您無法根據Lighthouse等通用網站效能工具來判斷這一點。
我們將透過從兩個網站上的特定內部連結載入頁面來測試頁面速度,並 在您檢查網站以查看載入時間和其他資訊時使用 Chrome DevTool 的「網路」標籤。
對於“裸網站”,您會注意到載入需要更長的時間,因為整個載入過程都是在運行中進行的,並且 DOM 內容剛剛載入: