WP Rocket 3.17：透過自動延遲渲染提高 INP 指標
已發表: 2024-09-26您是否曾經感覺到您的網站響應緩慢，尤其是當您嘗試與長部落格頁面或電子商務產品頁面進行互動時？效能最佳化具有挑戰性，在改進與使用者體驗相關的複雜指標（例如下次繪製互動 (INP)）時更是如此。 INP 是衡量網頁回應能力的新核心 Web 重要指標，在提高速度、使用者體驗和 SEO 方面發揮關鍵作用 - 換句話說，您不能忽視它。
如果您一直在努力提高網站的速度和使用者體驗以獲得更好的 INP 等級，您將很高興了解有關我們新的主要版本及其全新自動化功能的更多資訊。向 WP Rocket 3.17 問好！
我們的新主要版本專注於自動優化您的網站在訪客滾動時呈現內容的方式。它對於部落格、線上商店和任何有大量內容可供探索的網站特別有用。
我們很高興推出 WP Rocket 3.17，原因有兩個。
首先，新功能將提高 INP 指標和感知速度，尤其是在行動裝置上。它還可能對其他關鍵指標產生積極影響，例如最大內容油漆和第一內容油漆等級。優化與使用者體驗相關的指標也可以提高轉換率，這就是讓您的網站更快的最終目標，對嗎？
此外，WP Rocket 是第一個對所有網站頁面提供如此強大且自動優化的外掛程式。
在我們的部落格文章中了解所有內容，或觀看影片。
什麼是渲染及其對效能的影響
要了解 WP Rocket 3.17 如何提升網站效能，我們先從解釋渲染開始。當您的網頁載入時，就會出現渲染 - 即瀏覽器將網站程式碼轉換為使用者在螢幕上看到的視覺元素的方式。
瀏覽器渲染需要幾個階段，從瀏覽器接收 HTML 檔案並建立 DOM 樹開始，DOM 樹是網頁的樹狀結構表示。最後一個階段是繪畫——瀏覽器將每個元素繪製到螢幕上，使用者可以看到完成的網頁。
與 Web 效能最佳化一樣，有一個問題。事實上，渲染過程可能是一個效能挑戰，因為它要求瀏覽器同時處理許多任務。這種多任務活動發生在所謂的主執行緒上，它主要受 JavaScript 檔案的影響。
當主執行緒太忙時，就會導致任務很長。這些耗時的任務就像交通堵塞一樣，會減慢頁面的響應速度並影響「與下一次繪製的互動」等指標——這是衡量頁面對用戶互動的響應速度的關鍵核心 Web 重要指標。
渲染和效能
當我們談論渲染及其對性能的影響時，我們特別指的是過程的兩個部分：渲染和繪畫 - 正如您在上一節中看到的那樣。這些階段是瀏覽器努力在螢幕上顯示內容的階段，也是影響 INP 分數和感知速度的階段。
在此過程中，有幾個變數可能會影響效能。舉幾個例子：DOM 大小、JavaScript 執行速度和動畫。頁面上的內容越多，渲染優化的挑戰性就越大。
既然您知道渲染對於速度至關重要並且需要改進，那麼讓我們學習如何使其成為可能。
滿足內容可見性 CSS 屬性
優化瀏覽器渲染（進而優化速度和回應能力）的有效方法是利用 CSS 內容可見性屬性。此屬性告訴瀏覽器不要立即呈現頁面的所有內容部分，而是等到使用者即將看到它們。
你玩過電子遊戲嗎？如果是這樣，您就知道整個世界並不是一次性加載的。相反，新場景及其背景僅在您前進時顯示或渲染。這正是 CSS 屬性 content-visibility 允許做的事。
那麼，這有什麼幫助呢？透過使用內容可見性，瀏覽器可以一次完成更少的工作。它可以專注於當前最重要的事情，而不是嘗試立即渲染所有內容。這意味著：
- 它通知瀏覽器在需要之前忽略渲染某些元素，因此瀏覽器需要處理的長任務更少，尤其是在渲染和繪製方面。
- 頁面載入速度更快，因為最明顯的部分很快就準備好了。
- 當使用者與其互動時，頁面回應速度更快。
因此，您的網站可以提供增強的使用者體驗。訪客將更快地看到您的內容，並能夠在滾動和單擊時與頁面進行互動。
好消息是內容可見性屬性現在受到所有主要瀏覽器的支援。這意味著這項強大的功能可以為幾乎所有用戶提高網站的效能，無論他們使用什麼瀏覽器。
透過在 WP Rocket 3.17 中套用內容可見性屬性，我們引入了自動延遲渲染功能。繼續閱讀以了解其含義。
3.17：引入自動延遲渲染
我們的新主要版本使自動延遲渲染成為可能。與往常一樣，我們的新版本和增強功能的目標是幫助您以最簡單的方式提高網站效能，無論您的技術技能如何，也無論您是否掌握網路效能優化技術。
我們專注於對速度和使用者體驗產生重大影響的功能，WP Rocket 3.17 也不例外。
首先也是最重要的是，新版本可以顯著提高您的 INP 分數，使您的網站對訪客的回應更加靈敏。它還可能會稍微提高您的最大內容繪畫和第一內容繪畫分數，儘管這更多的是積極的副作用。
新功能可以安全實施，並且永遠不會影響您的訪客。如果瀏覽器因為版本較舊而不支援內容可見性屬性，則即使啟動 WP Rocket 3.17，也不會發生任何情況。
該功能對於您的網站來說風險也很低——它不太可能破壞任何東西。
順便說一句，我們三年前就考慮過發布這樣的功能。當時功能是基於JavaScript的，需要長期測試來驗證對SEO的潛在影響。同時，內容可見性 CSS 屬性得到了更多支持，提供了可行且更簡單的解決方案。隨著 INP 與 Web 效能優化的相關性越來越高，發布此功能變得理所當然。
自動延遲渲染的工作原理
讓我們回到視頻遊戲的類比。
想像一下你正在玩一個遊戲。當您向前移動角色時，遊戲會在到達新區域之前渲染它們。這正是自動延遲渲染在您的網站上的工作原理。
由於上一版本 WP Rocket 3.16，引入自動延遲渲染成為可能。我們先前的版本引進了 2 個重要的增強功能：
- 我們預設啟動了獨立的行動快取。
- 我們引入了關鍵影像（首屏影像）的檢測和優化，這要歸功於信標收集有關要優化的元素的真實資訊。 3.17 功能將擴展信標追蹤的範圍，以提供有關佈局的準確信息，並使新的最佳化成為可能。
以下是啟用 WP Rocket 3.17 後會發生的情況。
當使用者登陸您的頁面時，新功能將不允許瀏覽器立即呈現所有內容。相反，只有當用戶接近頁面上的該點時，瀏覽器才會渲染頁面上的元素 - 就像遊戲僅在您接近它時才加載下一個區域一樣。頁面越長，延遲渲染的效率就越高。
這就是為什麼新版本特別有利於：
- 包含大量內容的長頁面，例如部落格文章或產品清單。
- 包含需要更多時間渲染的複雜元素的頁面，例如非複合動畫（例如畫布動畫和影片背景）。
WP Rocket 是第一個在所有頁面上準確地套用此自動功能的外掛程式。事實上，WP Rocket 3.17 會分析頁面的結構並偵測可以套用延遲渲染的元素。該插件單獨處理每個頁面（桌面版和行動版），以確保我們獲得準確的元素，而不會錯過任何機會。
沒有標記選項 - 您無需執行任何操作即可啟動它。 WP Rocket 更新到 3.17 後即可使用。
延遲渲染如何改善下一個油漆等級的交互
現在讓我們來看看 WP Rocket 3.17 如何提升您的 INP 等級。
首先，根據 Google 的說法，良好的反應能力意味著您的 INP 分數應低於 200 毫秒。
在我們深入研究我們運行的測試結果之前，還需要強調的是，您的網站可以實現的效能改進取決於其當前的最佳化等級。如果您的網站已經得到了很好的優化，您可能會看到 INP 等級有細微的提高。然而，如果有改進的空間，您可能會在 INP 分數以及 LCP 和 FCP 分數上體驗到更顯著的提升。
為了衡量 INP 效能改進，我們建議使用 DebugBear 的 INP 偵錯器等工具，它可以讓您清楚地了解啟用 WP Rocket 3.17 及其延遲渲染自動功能之前和之後網站的反應能力。
如果您想知道為什麼這次我們不使用基於 Lighthouse 的 PageSpeed Insights 工具，那是因為 INP 是一個欄位指標，是根據互動計算的。 Lighthouse 還沒有測量它，至少目前是這樣。
讓我們透過一個真實的範例來向您展示 WP Rocket 3.17 可以帶來的潛在增強功能。我們測試了一個電子商務網站，該網站有大量內容可供滾動瀏覽——多個部分、產品圖片和商品清單。出於測試目的，我們還在網站中添加了 JavaScript 工作負載，以保持主線程繁忙，並驗證延遲渲染的效率以改善這種情況。
這是我們發現的。
在啟用具有自動延遲渲染功能的 WP Rocket 3.17 之前
INP結果是204ms。正如您所看到的，結果凸顯了需要改進的地方：
從更技術的角度來看，我們也分析了 Chrome DevTool Performance 標籤中的瀏覽器渲染。螢幕截圖突出顯示了長任務和渲染所需的時間：2610 毫秒。
啟用具有自動延遲渲染的 WP Rocket 3.17 後
INP 結果現在為 146ms。這次，INP 等級為綠色。
這次，Chrome DevTool 效能標籤顯示如何最佳化長任務，渲染時間減少到 2325 毫秒。
如您所見，我們測試了完全相同的頁面。唯一的區別是第二個啟用了自動延遲渲染，而第一個則沒有。
改進是巨大的。我們已從需要改進的橙色 INP 分數頁面移至顯示綠色結果的頁面，建議確保響應能力並提供出色的用戶體驗。
總結
無論您經營部落格、線上商店或任何其他類型的內容豐富的網站，WP Rocket 3.17 及其延遲渲染功能都可以自動改進 INP 等關鍵指標。
提升 INP 可以提高頁面回應能力，進而提升使用者體驗。這可以幫助訪客在您的網站上停留更長時間，並使他們轉換並返回 - 這就是為什麼您不應該忽視其優化。
為什麼不親自看看如何提升 INP 等級呢？將 WP Rocket 更新到版本 3.17，或試試看。我們很想知道新的主要版本如何為您服務。請在評論中告訴我們您使用 WP Rocket 3.17 的體驗以及您獲得的改進！