關鍵渲染路徑：它是什麼以及如何優化它

當我們談論為用戶提供超快的網絡體驗時，我們通常只關注我們作為網站所有者和網絡開發人員應該做的事情。

但事實是：

提供快速的 Web 體驗還需要瀏覽器做大量工作。

它接收我們的 HTML、CSS 和 JavaScript 文件，並採取特定步驟將它們轉換為屏幕上的像素。

提高性能的秘訣在於了解接收資源和將資源轉化為渲染像素的處理過程之間發生的情況。

此過程也稱為關鍵渲染​​路徑 (CRP) 。

在本文中，您將了解有關 CRP 的所有信息，以及如何優化它以加快渲染速度。

• 什麼是關鍵渲染路徑？
• 關鍵渲染路徑序列解釋
• 如何優化您網站的關鍵呈現路徑
• 3個WordPress插件來優化你的CRP
• CRP 優化清單

讓我們開始！

什麼是關鍵渲染路徑？

關鍵呈現路徑是指網絡瀏覽器將 HTML、CSS 和 JavaScript 代碼轉換為用戶屏幕上的可視化表示所採取的一系列步驟。

它涉及一系列過程，例如構建文檔對像模型（DOM），生成CSS對像模型（CSSOM），並將兩者結合起來創建渲染樹。 然後渲染樹用於計算佈局並在用戶屏幕上繪製像素。

另一方面，關鍵渲染路徑優化是指減少 Web 瀏覽器執行序列的每個步驟所花費的時間，同時優先考慮與用戶當前操作相關的內容。

為確保您的優化工作一針見血，您需要深入了解序列的每個步驟。 所以接下來的幾段是必不可少的，我們強烈建議在採取行動之前先閱讀它們。

關鍵渲染路徑序列解釋

以下是瀏覽器在呈現頁面時執行的步驟的快速概述：

1. 瀏覽器下載並解析 HTML 標記並創建 DOM。
2. 接下來，它下載並處理 CSS 標記並構建 CSS 對像模型 (CSSOM)。
3. 然後，它結合來自 DOM 和 CSSOM 的必要節點來創建渲染樹，這是渲染頁面所需的所有可見節點的樹結構。
4. 它通過佈局過程計算頁面上每個元素的尺寸和位置。
5. 最後，瀏覽器在屏幕上繪製像素。

現在讓我們專注於每一步。

DOM

文檔對像模型 (DOM) 是瀏覽器對 HTML 文檔的內部表示。

加載網頁時，瀏覽器會解析 HTML 並創建一個樹狀節點結構來表示文檔中的元素。 每個節點對應一個 HTML 元素，並具有描述其屬性、內容和在樹中位置的屬性。

重要提示：瀏覽器逐漸構建 DOM，使我們能夠通過構建高效的結構並避免過大的 DOM 大小來優化頁面的呈現。

CSSOM

DOM 包含頁面的所有內容，而 CSSOM 包含有關如何設置 DOM 樣式的所有信息。

DOM 和 CSSOM 的另一個區別是：

DOM 構建是漸進的，而 CSSOM 則不是。

加載網站時，瀏覽器必須處理 CSS 以應用樣式。 與可以一點一點處理的 HTML 不同，CSS 需要一次處理所有內容。 這是因為某些樣式可能會在 CSS 文件中被其他樣式覆蓋，因此瀏覽器需要等到它讀取了整個 CSS 文件後再決定應用哪些樣式。

這樣做是為了避免顯示稍後將被覆蓋的樣式和浪費資源。

簡單的說：

瀏覽器會阻塞渲染過程，直到它接收並解析所有 CSS。

這就是為什麼 CSS 被認為是渲染阻塞資源的原因。

渲染樹

渲染樹是瀏覽器用來創建網頁視覺表示的 DOM 和 CSSOM 的組合。

瀏覽器使用渲染樹計算節點尺寸和位置作為繪畫過程的輸入。

重要提示：渲染樹中僅捕獲可見內容。 通常，頭部部分不包含可見信息，因此被排除在外。 此外，如果元素具有display: none屬性，則該元素及其後代都不會包含在渲染樹中。

佈局

渲染樹構建完成後，接下來就是佈局了。 佈局通過定義每個元素的尺寸、位置和相互關係來確定頁面上每個元素的放置和方向。

但事情是這樣的：

佈局性能受 DOM 的影響。

換句話說：

DOM 節點數越多，佈局過程越長。

畫

最後階段是在創建渲染樹和佈局之後將像素繪製到屏幕上。

最初，整個屏幕在加載過程中被繪製。 隨後，僅重繪屏幕受影響的部分，因為瀏覽器被設計為僅重繪必要的區域。

請記住，繪製階段的持續時間取決於在渲染樹上實施的更新的性質。

現在讓我們看看您可以應用哪些優化來幫助瀏覽器並加快某些進程。

如何優化您網站的關鍵渲染路徑

瀏覽器運行整個過程所需的時間可能會有所不同。 有很多運動部件會影響關鍵路徑長度：

• 文檔尺寸
• 請求數
• 用戶設備
• 應用樣式

然而，在 CRP 優化方面，有三種技術被認為是首選：

1. 通過推遲非關鍵資源或完全消除它們來最大限度地減少關鍵資源的數量
2. 優化所需的請求數以及每個請求的文件大小
3. 優先下載關鍵資產，從而縮短關鍵路徑長度

讓我們更深入地了解如何實施每個推薦的優化策略：

優化渲染阻塞的 CSS 和 JS 資源

你已經知道，當瀏覽器遇到阻塞渲染的 CSS 和 JS 資源時，它必須先下載、解析和執行它們，然後再做任何其他事情，包括渲染。

在優化 CSS 方面，您可以實施以下技術：

• 關鍵 CSS。 它識別呈現網頁可見部分所需的最小 CSS 規則集，並將它們作為內聯 CSS 提供給瀏覽器，而不是加載完整的樣式表。 通過只為首屏內容加載必要的 CSS，瀏覽器可以更快地呈現頁面並改善用戶體驗。 這是因為瀏覽器不必在呈現頁面之前等待整個樣式表加載完畢。
  
• 合併 CSS 文件。 CSS 連接是將多個 CSS 文件組合成一個文件的過程。 這種技術通過減少加載網頁所需的 HTTP 請求數來提高性能，因為瀏覽器只需要下載和解析單個 CSS 文件而不是多個文件。

就您的 JavaScript 文件而言，您可以執行以下操作：

• 延遲 JS 加載。 延遲 JS 加載是一種通過延遲加載 JavaScript 文件直到加載和解析 HTML 文檔之後來加速您的站點的技術。 您可以在引用 JS 文件的腳本標籤上使用defer屬性。 需要注意的是，defer 屬性應該只用於不需要在加載時立即執行的 JS 文件（例如，只在特定頁面上使用的文件），因為如果有多個延遲腳本，執行順序可能無法預測被使用。
  
• 異步加載 JS。 某些 JS 文件可能需要使用 async 屬性，該屬性允許文件與 HTML 文檔的解析異步加載和執行。

您可以對 CSS 和 JavaScript 應用一些優化：

• 縮小。 縮小涉及從 CSS 和 JavaScript 文件中刪除不必要的字符，例如空格、註釋和換行符。 此過程可以顯著減小文件的大小，而不影響其功能或外觀。
  
• 刪除未使用的 CSS 和 JS。 未使用的 CSS 和 JS 指的是特定頁面上未使用但仍在加載的特定規則。 刪除文件的這些部分將直接影響瀏覽器構建渲染樹的速度。

在自動駕駛儀上優化您的渲染阻塞資源。 安裝 NitroPack →

減小文件的大小

為了減少瀏覽器需要下載的數據量，我們可以採用 HTML、CSS 和 JavaScript 資源的縮小、壓縮和緩存等技術。

您已經知道縮小意味著什麼，所以讓我們關注其他兩個：

• 壓縮。 壓縮是一種應用算法以使用比原始文件更少的位數來重寫文件的二進制代碼的技術。 因此，您的文件的大小要小得多，從而減少了頁面加載時間和帶寬使用。
  
• 緩存。 緩存利用每個瀏覽器中實現的 HTTP 緩存。 為確保有效緩存，我們必須確保每個服務器響應都提供正確的 HTTP 標頭，指示瀏覽器應在何時緩存請求的資源以及緩存多長時間。

依靠最先進的緩存機制。 立即獲取 NitroPack →

優先下載關鍵資產

通常，瀏覽器非常擅長確定最重要資源的優先級並首先獲取它們。 但是，在某些情況下，您可以通過手動確定最關鍵資源的優先級來幫助他們更快地加載您的網站。

您可以使用資源提示來告訴瀏覽器如何處理特定的資源或網頁。

以下是三個主要的：

• 鏈接 rel=預取。 Prefetch 是一種低優先級的資源提示，它允許瀏覽器獲取稍後可能需要的資源並將它們存儲在瀏覽器的緩存中。

• 鏈接 rel=預連接。 preconnect 指令幫助瀏覽器在向服務器發送初始請求之前建立早期連接。

• 鏈接 rel=預加載。 預加載用於強制瀏覽器在瀏覽器發現資源之前下載資源，因為它對頁面至關重要。

重要提示：預取和預連接是資源提示，它們會在瀏覽器認為合適的情況下執行。 預加載指令是瀏覽器強制執行的命令。 詳細了解如何實施資源提示。

現在您知道如何處理關鍵渲染路徑優化，讓我們看看一些可以自動執行該過程的 WordPress 插件。

3個WordPress插件來優化關鍵渲染路徑

所有上述優化都可以手動完成。 但是，其中一些需要技術知識以確保您不會在此過程中破壞您的網站。

對於所有 WordPress 用戶來說幸運的是，有一些插件可以幫助優化 CRP。 在我們看來，讓我們來看看前 3 名候選人：

NitroPack - 多合一解決方案

NitroPack 是領先的多合一網站速度優化解決方案，結合了超過 35 種網絡性能功能。 在優化關鍵渲染路徑時，NitroPack 會自動處理優化，例如：

• 關鍵 CSS
• CSS 和 JS 縮小
• CSS 和 JS 壓縮
• 緩存
• 延遲 JS 加載
• 刪除未使用的 CSS 和 JS

但優化功能並不止於此。 您還將獲得完整的性能工具包：

• 內置CDN
• 完整的圖像優化堆棧
• 字體優化
• 電子商務購物車緩存
• 24/7 支持

自動加速您的網站。 立即獲取 NitroPack →

WP Super Cache - 僅緩存插件

WP Super Cache 是一個緩存插件，主要提供緩存功能和 HTTP 壓縮，但在資源壓縮和使用異步和延遲屬性優化 JavaScript 方面存在不足。

最顯著的特點包括：

• 為所有訪問者啟用緩存
• 禁用登錄訪問者的緩存
• 壓縮頁面以便更快地為訪問者提供服務
• 緩存重建

快速性能

Swift Performance 是另一個插件，您可能會發現它對您追求優化的 CRP 很有用。 它的一些功能包括：

• 縮小 CSS 和 JavaScript 文件
• 關鍵 CSS
• 緩存
• 圖片優化

優化關鍵渲染路徑 [清單]

我們在本文中涵蓋了很多基礎知識，因此這裡有一個方便的清單，列出了我們提到的所有優化：

• 生成關鍵 CSS
• 合併 CSS 文件
• 延遲 JavaScript 加載
• 異步加載 JavaScript
• 縮小 CSS 和 JavaScript
• 壓縮 CSS 和 JavaScript
• 刪除未使用的 CSS 和 JavaScript
• 應用縮小
• 應用壓縮
• 使用緩存
• 實現鏈接 rel=preload
• 實現鏈接 rel=prefetch
• 實現鏈接 rel=preconnect

下載 CRP 優化清單 →

最後但同樣重要的是——不要忘記在每次優化前後進行測試！