如何為WordPress網站生成關鍵CSS？

網際網路上有許多拖放式網站建設者可以在沒有技術技能的情況下建立網站。但是，您必須學習SEO的一些技術方面，才能使您的網站保持在搜尋引擎結果頁面的頂部。

關鍵CSS是這樣的技術主題之一，用於優化您的內容交付，進而直接影響速度。對於在其網站上使用多個外掛的普通使用者來說，WordPress生態系統使這變得更加複雜。

在本文中，讓我們探討如何為WordPress網站建立關鍵CSS以提高Google PageSpeed分數。

基礎知識

在討論關鍵CSS之前，有必要了解一些術語，例如首屏和內容交付優化。此外，您還需要了解在WordPress上使用外部樣式表的基本方法。

首屏內容

當您在桌面或移動裝置上開啟網站時，您在螢幕上看到的可見部分是首屏內容區域。這是一個傳統的報紙術語，您可以在其中看到首頁頂部的首屏內容。一般來說，人們習慣於摺疊報紙，摺疊區域上方提供重要內容。同樣，首先載入的網頁頂部可見部分應該為使用者提供最有價值的內容。因此，您應該專注於優化可見頂部以快速載入。

內容交付優化

許多速度工具（如Google PageSpeed Insights）衡量網站如何提供首屏內容。您可以將其視為對首次內容繪製 (FCP) 的測量。如果他們檢測到阻塞，您將看到刪除阻塞元素的警告。您將在Google PageSpeed Insights工具中看到的流行建議之一是消除渲染阻塞資源。如果您點選該建議，Google將向您展示優化關鍵CSS/JS的交付並推遲所有非關鍵CSS/JS。

Critical-CSS-and-JS-Suggestion

關鍵的CSS和JS建議

修復阻塞渲染的JavaScript (jQuery) 非常容易，因為主題/外掛預設在頁尾部分載入指令碼。jQuery是唯一的問題，許多網站可能需要它來載入首屏內容。因為，WordPress也使用jQuery，如果它只是由於jQuery，你可以忽略這個錯誤。否則，如果不會破壞您網站的佈局，請使用WP Rocket之類的外掛來組合和交付所有指令碼。

然而，問題在於生成關鍵的CSS並首先載入它。在本文中，我們將解釋如何處理CSS優化以提高頁面速度得分。

相關閱讀： 正確地配置WP Rocket外掛以提升網站載入速度。

在網站中載入CSS

有多種方法可以在您的網頁中插入CSS 。您可以通過內聯、內部或外部方式執行此操作。最流行和推薦的方法是在網頁的標題部分連結外部樣式表。由於頁首部分中的內容首先與網頁一起載入，因此會極大地影響首屏內容的載入，從而影響頁面速度。

<!DOCTYPE html>

<head>

</head>

<body>

Add Your Content Here

</body>

</html>

<!DOCTYPE html> <html lang="en"> <head>  <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="Link Your Stylesheet URL Here"> </head> <body> Add Your Content Here <script src="Add Your Script URL Here"></script> </body> </html>

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta Tags for Bootstrap 4 -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="Link Your Stylesheet URL Here">
</head>
<body>
Add Your Content Here
<script src="Add Your Script URL Here"></script>
</body>
</html>

在WordPress中載入CSS

WordPress使用style.css作為提供主題樣式的外部檔案。這是執行WordPress網站的必需檔案（除了functions.php之外）。此外，您網站上的每個外掛都可能新增額外的CSS檔案。在Chrome瀏覽器中開啟您的網站並檢視原始碼（確保您沒有安裝快取外掛或禁用頁面快取）。

Stylesheets-in-Header

頁首中的樣式表

您可以在頁面的標題部分看到WordPress連結所有外部樣式表。從優化的角度來看，這可能會導致多個問題：

一些主題使用幾MB大小的臃腫的CSS樣式。當使用者在桌面或移動裝置上開啟網頁時，您不需要載入所有這些樣式。
有不同的文章型別，例如可能使用完全不同樣式的產品。在這種情況下，您不需要其他CSS來進行初始（首屏）載入。

您網站上的每個頁面都需要最低限度的CSS才能載入首屏內容。頁面載入所需的最小CSS在技術上稱為關鍵CSS。在上述所有情況下，Google PageSpeed Insights和其他工具都會向您顯示優化CSS交付的警告。

請記住，刪除未使用的CSS和指令碼也與在頁面上使用過多的CSS/指令碼有關。然而，這與關鍵的CSS優化完全不同。您甚至可能不會在特定頁面上使用某些外掛。例如，您不需要網站所有頁面上的聯絡表單外掛的CSS。

在這種情況下，聯絡表單檔案中的CSS/JS檔案在常規部落格文章中是不必要的，您將看到刪除未使用的CSS/JS警告。

檢視我們關於如何在WordPress中禁用未使用的CSS/JS並優化WooCommerce頁面載入的文章。

如何在WordPress中生成關鍵CSS？

現在您知道了關鍵CSS對提高頁面載入速度的重要性。有兩種方法可以為您的網站生成關鍵CSS。

手動生成關鍵CSS並插入您的網站
使用WP Rocket外掛優化內容交付

我們將詳細解釋這兩個過程，您可以選擇最適合您網站的過程。

手動生成關鍵CSS

網際網路上有許多第三方工具可用於手動生成關鍵CSS。但是，當您網站上的所有頁面都相似並且首屏區域沒有自定義內容時，這是有意義的。您可以嘗試其他免費的關鍵CSS生成服務，例如Sitelocity。

轉到Sitelocity網站並輸入頁面的URL。
單擊“生成關鍵路徑CSS”按鈕。
您可以為您的頁面獲取最小化的關鍵CSS。

Generate-Critical-CSS

生成關鍵CSS

現在您已經生成了關鍵的CSS，下一個任務是將它插入到您網站的標題部分。理論上，您可以在<head>和</head>標記之間插入header.php檔案中的樣式。有一些外掛可以幫助在標題部分插入樣式而無需修改模板檔案。

Autoptimize是我們可以為此目的推薦的外掛之一。如果您已經在使用Autoptimize進行快取，您還可以使用相同的外掛來插入關鍵CSS。

您可以在Autooptimize外掛的“CSS Options”下插入關鍵CSS。首先啟用“Inline and Defer CSS”覈取方塊並將關鍵的CSS貼上到出現的文字框中。

CSS-Options

CSS選項

如您所見，Autooptimize外掛還可以在延遲其他樣式的同時自動內聯首屏CSS。但是，這會迅速將快取大小增加到100%，並且您無法在外掛中選擇自動清除快取。此外，在大多數情況下，它會破壞網站。您可以使用Autooptimize CriticalCSS Power-Up外掛，它會以更好的方式幫助您。為了使用這個附加元件，您必須以每月10美元的價格從Criticalcss.com獲取API。

為什麼手動關鍵CSS生成不起作用？

雖然上述手動插入過程看起來很容易，但它並不是一件容易的事。以下是您的關鍵CSS不起作用的一些原因。

您可能有不同的內容，例如頁面、部落格文章、產品等。您網站上的每種內容型別都需要不同的關鍵CSS來載入首屏內容。使用外掛或手動插入會在所有頁面上載入關鍵的CSS並破壞一些內容。
每次更新主題、外掛和WordPress核心時，都必須生成關鍵的CSS。否則使用舊的關鍵CSS會破壞您網站的佈局。對於普通使用者來說，為網站上的每一次更新持續更新關鍵CSS是一項不可能完成的任務。使用可用的自動更新選項，在更新安裝的外掛/主題/核心之前必須非常小心。
對於移動裝置和桌面裝置，您可能需要單獨的關鍵CSS。

對於所有這些問題，剩下的唯一選擇是使用一些外掛來處理這些問題並動態自動生成關鍵CSS。

使用WP Rocket為WordPress建立關鍵 CSS

幸運的是，您有一個快取外掛，可以在WordPress中完成這一關鍵的CSS生成。由於其簡化的設定，WP Rocket是WordPress最受歡迎的快取外掛之一。同樣，關鍵的CSS生成是外掛的優點之一，任何普通使用者都可以在不破壞網站的情況下獲得好處。

首先，您必須購買WP Rocket高階外掛。
安裝並啟用WP Rocket後，轉到“設定 > WP Rocket”並導航到“File Optimization”部分。
向下滾動並啟用“Optimize CSS Delivery”覈取方塊並選擇“Load CSS Asynchronously”按鈕。
儲存您的更改以開始關鍵的CSS生成過程。

Generate-Critical-CSS-in-WP-Rocket

在WP Rocket中生成關鍵CSS

這將允許外掛為您的WordPress網站上的每種文章型別自動生成關鍵CSS。它包括首頁。主頁、頁面、文章和您在網站上使用的任何其他自定義文章型別。如果需要，您可以新增使用第三方工具手動生成的備用關鍵CSS。通常，您可以將此備用關鍵CSS框留空。您還可以在“Cache”部分啟用單獨的移動快取。

請注意，WP Rocket是一個具有單站點許可證的高階外掛，售價49美元。我們認為，值得購買此外掛，因為它提供了端到端的快取解決方案以優化速度。該外掛提供一年的支援和更新。之後，它將繼續工作，您無需更新即可使用關鍵的CSS和其他功能。您可以以30%的折扣續訂以獲得支援並獲得任何附加功能。與Autoptimize一起使用的criticalcss API每月10美元相比，這是一個更好的選擇。

重新生成關鍵CSS

當您更新主題/外掛/WordPress 核心或在您的站點上新增自定義文章型別時，有必要重新生成關鍵CSS。否則，WP Rocket將使用舊的關鍵CSS並破壞您網站的佈局。因此，請確保不要忘記重新生成關鍵CSS。

單擊頂部欄上的“WP Rocket”選單，然後選擇“Regenerate Critical CSS”選項。
或者，您可以轉到外掛的儀表盤並單擊“Regenerate Critical CSS”按鈕。

Regenerate-Critical-CSS

重新生成關鍵CSS

特定頁面的自定義關鍵 CSS

如前所述，您可能有一個主頁或另一個使用頁面構建器外掛建立的頁面。與您網站上的所有其他部落格文章相比，此頁面將具有完全不同的關鍵 CSS。在這種情況下，您必須建立單獨的關鍵 CSS 並僅在該頁面上有條件地載入。WP Rocket 只需點選幾下即可幫助您實現這一目標。

轉到要生成單獨的關鍵 CSS 的頁面的頁面/文章編輯器。
在側邊欄文件面板上，找到“WP Rocket Options”面板。如果沒有找到，請單擊右上角的三個點按鈕，然後選擇“首選項”。在彈出視窗中，您可以啟用站點上可用的所需文件面板。
選擇“Optimize CSS Delivery”覈取方塊並點選“Generate Specific CPCSS”按鈕。
這將為該頁面生成特定的關鍵CSS，並且外掛將在使用者訪問該頁面時載入此關鍵CSS。

Generate-Critical-CSS-for-Specific-Page

為特定頁面生成關鍵CSS

測試關鍵CSS

實現手動方法或者使用WP Rocket外掛後，可以通過檢視頁面原始碼來測試頁面。確保登出您的管理面板或為外掛中的登入使用者啟用快取。正如您在下面的螢幕截圖中看到的，WP Rocket在Header中新增了關鍵的CSS。

WP-Rocket-Critical-CSS

WP Rocket關鍵CSS

您還可以在Google PageSpeed Insights工具中檢視頁面。如果一切順利，您將看到在傳遞的結果下消除了渲染阻塞資源和其他CSS錯誤。這表明您已在網站上正確實施關鍵CSS。

小結

我們希望這篇文章能夠強調關鍵CSS在WordPress網站中的重要性。當您的站點較小且頁面較少時，您可以使用手動選項。但是，對於一個有大量文章和不同文章型別的正在執行的部落格，您可以嘗試WP Rocket外掛。儘管它花費了您一些錢，但您可以為您的站點獲得完整的快取解決方案。

渲染阻塞關鍵CSS

如何為WordPress網站生成關鍵CSS？

基礎知識