WordPress 中的關鍵 CSS：它是什麼以及如何優化 CSS 交付

已發表: 2021-10-19

在 Google PageSpeed Insights 上運行性能審核時，您會發現 Google 幾乎每次都建議您“消除渲染阻塞資源”。這意味著您應該始終優先加載關鍵的 CSS 和 JavaScript。

但是如何決定哪個 CSS 是關鍵的，哪個不是？您應該“延遲”您網站的哪一部分來加快另一部分的速度？這一切都與優先級有關，並找出哪些 CSS 資源是必不可少的，以及如何優化它們的交付。

讓我們潛入水中。

什麼是關鍵 CSS 以及為什麼它對性能很重要？

關鍵 CSS 是一種提取首屏 CSS 以盡快顯示頁面的技術。這就像使用最低限度的 CSS 來顯示訪問者正在查看的內容。

關鍵 CSS 讓您重新思考瀏覽器如何加載 CSS：您需要優先考慮 CSS 以用於首屏內容。

換句話說，關鍵 CSS 是優化性能的關鍵。在渲染頁面之前，您的瀏覽器需要下載並解析 CSS 文件，使這些文件成為阻止渲染的資源。 CSS 文件越大，瀏覽器處理它們的時間就越長。所有那些由繁重的 CSS 文件創建的請求都會增加網頁的加載時間，讓訪問者感到不安和谷歌。

由於新的排名因素（包括 Core Web Vitals），頁面速度也可能會影響您的 SEO 性能。它們是 Google 為衡量用戶體驗而實施的一組因素——包括頁面的速度。體驗越好，您的排名就越高。

您熟悉衡量性能的六個 Lighthouse 指標嗎？其中兩個——首次內容繪製（FCP）和首次輸入延遲（FID）——測量您網站的感知速度。如果這些指標狀況良好，那麼 Google 會衡量您的用戶體驗。但是，如果兩個 KPI 都是紅色的，那麼您最好優化您的關鍵 CSS。

用簡單的英語解釋關鍵 CSS

用簡單的英語來說，關鍵 CSS 是一項優化任務。這就像告訴您的瀏覽器只加載訪問者正在查看的 CSS。這有助於提高感知速度，即網站在訪問者看來的速度有多快。

讓我們用下圖做一個快速練習。假設您是訪問網站的移動用戶。

場景 #1 – 在頂部，有一個帶有渲染阻止 CSS 的頁面。在整個 CSS 文件加載之前，您會看到一個空白頁面。

場景#2——在底部，關鍵的CSS首先被渲染。由於瀏覽器已經開始加載最重要的樣式表，因此您可以更早地看到頁面。

問題：哪種場景對您來說“感覺”更快？

頂部：使用阻止渲染的 CSS 加載頁面底部：內聯關鍵 CSS（在折疊內容之上） — 頂部：使用阻止渲染的 CSS 加載頁面
底部：內聯關鍵 CSS（折疊內容上方）

答：我們都同意底線的感知速度更好。

由於正確完成更快的頁面呈現，您的訪問者會感覺到頁面加載時間的減少。

為什麼需要關鍵 CSS？

加載 CSS 樣式表通常是您為 WordPress 網站設置樣式的方式。 CSS 是用於描述網頁的語言，例如顏色、佈局和字體。如果沒有 CSS，Web 將如下面的左列所示：

關鍵 CSS 渲染路徑是什麼意思？

關鍵渲染路徑是瀏覽器在訪問者屏幕上渲染頁面所需執行的一系列任務。例如，這些任務包括下載照片、字體和要在網頁上顯示的文本。

如前所述，瀏覽器還需要下載您的 CSS 文件以呈現頁面的正確佈局。如果您的文件非常大，訪問者最終會等到整個文件下載完畢。

但是，如果瀏覽器可以在下載過程中開始渲染 CSS 怎麼辦？

想像一種減輕阻塞並儘快開始 CSS 交付的方法。這種技術精確地稱為關鍵渲染路徑的優化。

瀏覽器遵循五個步驟，直到將頁面呈現給訪問者。在這個過程中會發生很多事情。這就是為什麼我們應該確保每個步驟都盡快完成。

現在出現了兩個問題：如何優化每一步？如何確保我們擁有最高效的 CSS 交付？

這些問題將我們帶到下一部分。您將學習如何使用關鍵的 CSS 技術（優化 CSS 交付）來改進渲染時間並消除渲染阻塞 CSS 錯誤。

優化 CSS 交付的 3 個步驟

CSS 控制著您的 WordPress 網站的視覺格式和样式，但如果 CSS 文件沒有以最佳方式交付，您最終可能會得到一個緩慢的網頁。

因此，提高 WordPress 網站性能的最佳方法之一是優化 CSS 代碼的交付方式和時間。為您的 WordPress 網站優化 CSS 交付的三個主要步驟，即：

第 1 步：查找並生成關鍵 CSS — 確定顯示首屏內容所需的最少 CSS 代碼。您需要了解用戶在首次加載頁面時可以在視口中看到的內容。為頁面確定正確的關鍵 CSS 可能很複雜，因為訪問者使用許多不同的屏幕尺寸，例如台式機、平板電腦和移動設備。

如何找到關鍵的 CSS

WebDev 為您提供了三個可用於識別關鍵 CSS 的工具：

關鍵 - 提取首屏 CSS（以及內聯和縮小它）
CriticalCSS – 另一個提取關鍵 CSS 的模塊
Penthouse – 如果您的網站有很多 CSS，這是一個不錯的選擇

第 2 步：內聯這個關鍵 CSS — 在 HTML 文檔的 <head> 中添加關鍵 CSS 以消除獲取這些樣式的所有額外請求。

在下面的 WebDev 示例中，他們在 <head> 文件中內聯了關鍵的 CSS，以便瀏覽器可以更快地交付它並儘快將某些內容呈現給用戶。

第 3 步：異步加載 CSS 的其餘部分——這會延遲非關鍵 CSS，以便在訪問者可以看到您的網頁內容之後加載它。這種技術也稱為“延遲加載”。 WebDev 很好地解釋了整個手動過程。

通過遵循這三個手動步驟，您將優化 CSS 交付和關鍵渲染路徑。但是，還有更直接的方法可以優化 WordPress CSS 交付：使用 WordPress 插件！

如何使用插件生成關鍵 CSS 和優化關鍵渲染路徑

幸運的是，您可以使用 WordPress 插件優化關鍵 CSS 的交付並推遲不太重要的資源。這將為您節省一些時間並避免手動修改代碼文件。我們整理了一份清單，以便您可以測試哪種工具最適合您。

WP Rocket – 最完整的緩存插件，可以檢測您的關鍵 CSS 以內聯並以最簡單的方式延遲它。您將在下一節中介紹一個實際示例。

自動優化 - 默認情況下在頁眉中註入 CSS，還可以內聯和延遲關鍵 CSS。

資產清理 - 內聯 CSS 文件（自動並通過指定樣式表的路徑）。

如何使用 WP Rocket 優化 CSS 交付

在 WP Rocket 3.10 中，異步加載 CSS 選項解決了我們之前看到的頁面速度建議：“消除渲染阻塞資源”。 WP Rocket 涵蓋了兩個主要的 CSS 優化：

它生成呈現網站可見部分（首屏內容）所需的關鍵 CSS。
它異步加載所有其他 CSS 文件（優先加載應該首先加載的文件）。

要優化 CSS 交付，只需按照 WP Rocket 儀表板中的這些步驟操作：

轉到設置> WP Rocket
單擊文件優化選項卡。
向下滾動到 CSS Files 部分，然後單擊標有Optimize CSS delivery的框。
選擇刪除未使用的 CSS選項（推薦選項）。這將僅提取頁面上需要的 CSS，並且還將內聯它。

刪除未使用的 CSS 或異步加載 CSS - 來源：WP Rocket — 刪除未使用的 CSS 或異步加載 CSS – 來源：WP Rocket

或者，WP Rocket 還允許您異步加載 CSS，並為關鍵 CSS 提供後備選項。如果插件無法生成正確的關鍵 CSS，請使用此備用字段。

後備關鍵 CSS - WP Rocket — 後備關鍵 CSS – WP Rocket

刪除未使用的 CSS 是消除渲染阻塞 CSS 的推薦方法。請注意，不可能同時激活兩者。

最後但同樣重要的是，WP Rocket 還解決了 PageSpeed Insights 的“減少未使用的 CSS”建議。

減少未使用的 CSS - PageSpeed Inisghts 審核 — 減少未使用的 CSS – PageSpeed Inisghts 審核

未使用的 CSS 會影響頁面的加載時間，因為瀏覽器仍然需要加載它們。 最大內容繪製 (LCP)和總阻塞時間 (TBT)等 Google 性能指標也將受到影響。 LCP 和 TBT 在 Google PageSpeed 和 Core Web Vitals 等級中的權重總計為 55%，因此保持這些指標健康至關重要。

讓我們在 PSI（移動）上評分不佳的 WordPress 網站上測試那些 WP Rocket 選項。您將看到 WP Rocket 將如何在我們的頁面速度優化過程中幫助我們。

在優化我的關鍵 CSS 之前，我的性能等級僅為 43/100，這使我的移動網站處於紅色：

我的 WordPress 網站在移動設備上的得分（沒有 WP Rocket）- 來源：PSI — 我的 WordPress 網站在移動設備上的得分（沒有 WP Rocket）——來源：PSI

我還收到兩個警告：“減少未使用的 CSS”和“消除渲染阻塞資源”。

現在，讓我們安裝 WP Rocket 並激活“ Remove Unused CSS”選項。

刪除未使用的 CSS 選項 - 來源：WP Rocket — 刪除未使用的 CSS 選項 – 來源：WP Rocket

現在在移動設備上的性能結果非常好。只需點擊幾下，我們就達到了 94/100。 WP Rocket 優化了我的渲染路徑，還處理了我的關鍵 CSS。

“消除渲染阻塞資源”和“減少未使用的 CSS”警告現在位於“通過審核”部分。

通過 WP Rocket 的審核 - 來源：PSI — 通過 WP Rocket 的審核 – 來源：PSI

就像我一樣，您可以使用 WP Rocket 來優化我們關鍵 CSS 的交付。這是一個可靠且高效的插件，只需單擊幾下即可幫助我達到驚人的性能目標。

PSI 的 KPI 和審計部分（移動的）	沒有 WP 火箭	與 WP 火箭
總成績	43/100	94/100
最大的內容塗料	10.2 秒	0.7 秒
總阻塞時間	540 毫秒	0 毫秒
“減少未使用的 CSS”	問題	通過審核
“刪除渲染阻塞資源”	問題	通過審核

包起來

優化您的關鍵 CSS 似乎令人生畏，但由於 WP Rocket 之類的插件，它不需要這樣。我們看到 WP Rocket 幫助消除了與 Google PageSpeed Insights 上的渲染阻止資源相關的紅色警告。

您將節省一些寶貴的時間，因為 WP Rocket 會自動應用 80% 的 Web 性能最佳實踐——並且您會在激活後立即看到速度提升。

此外，您始終可以信賴我們的 100% 退款保證。 儘管我們認為您永遠不會想要，但如果您在購買後 14 天內提出要求，我們很樂意提供退款。