如何在 WordPress 中生成關鍵 CSS（2 種方法）

已發表: 2023-01-17

訪問您網站的人不想等待很長時間才能看到您的內容。 如果您不優化您的代碼，像 CSS 這樣的渲染阻塞資源會導致訪問者認為加載時間變慢。

幸運的是，您可以輕鬆地為您的網站生成關鍵的 CSS。 通過安裝 Jetpack Boost 等插件，您將能夠提取所有必要的 CSS 來顯示首屏內容。 這可能是使您的網站看起來更快、更用戶友好的關鍵。

在這篇文章中，我們將解釋關鍵 CSS 以及您應該考慮為您的網站生成它的原因。 然後，我們將向您展示在 WordPress 中執行此操作的兩種不同方法。

什麼是 WordPress 中的關鍵 CSS？

訪問者單擊您網站的鏈接後，他們的瀏覽器必須處理一系列任務才能完整呈現內容。 下載、處理和將代碼轉換為像素所涉及的所有步驟構成了關鍵渲染路徑。

在此加載過程中，瀏覽器從上到下讀取站點的 HTML、CSS 和 JavaScript 代碼。 由於它不會自動知道哪些資源在呈現頁面時最重要，因此瀏覽器可能會在處理不必要的代碼時卡住。

如果某個 CSS 文件阻止您的網站呈現，它就會成為呈現阻止資源。 即使它不是顯示頁面所必需的，訪問者也不會看到內容，直到完全處理此渲染阻止 CSS。

關鍵 CSS 是指首屏網頁內容所需的 CSS 代碼。 從本質上講，它是瀏覽器向訪問者顯示第一部分內容所需的最少代碼。

生成關鍵 CSS 的好處

為您的網頁生成關鍵 CSS 涉及消除任何渲染阻塞 CSS 並使瀏覽器僅處理必要的內容。

1.優化內容分發

當您為您的 WordPress 網站優化 CSS 交付時，它可以改進渲染過程。 對於前端訪問者來說，您的頁面加載速度似乎更快。

當有人登陸您的網站時，他們首先看到的是首屏內容。 這是首頁上顯示的所有內容，無需滾動。

Jetpack 網站上首屏內容的示例

通過提取關鍵 CSS，您可以優化顯示此初始部分所需的 CSS 文件。 沒有它，用戶可能會看到尚未完全呈現的部分元素。

一個常見的誤解是關鍵 CSS 會減少加載時間。 雖然事實並非如此，但優化技術可以提高感知性能。

從本質上講，用戶會認為您的頁面加載速度更快，因為瀏覽器可以更有效地顯示首屏元素。

通過生成 WordPress 關鍵 CSS，訪問者將在您的網站上獲得更好的用戶體驗 (UX)。 因此，您可以降低跳出率並鼓勵回訪。

2. 提高核心網絡生命力

儘管 WordPress 關鍵 CSS 不會增加或減少頁面加載時間，但它可以改善您的 Core Web Vitals。 這些指標分析網站的用戶體驗。

以下是核心網絡生命力：

  • Largest Contentful Paint (LCP) ：網站的加載性能
  • 首次輸入延遲 (FID) ：網站的交互性
  • Cumulative Layout Shift (CLS) ：網站的視覺穩定性

在您掃描您的網站以獲得 Core Web Vitals 報告後，您可能會看到其他指標，例如首次內容繪製 (FCP) 或首字節時間 (TTFB)。 這些影響 LCP 並在加載過程中發揮重要作用。

關鍵 CSS 直接影響 FCP。 簡而言之，FCP 衡量的是網頁開始加載後呈現第一個元素所需的時間。 如果您的網站的 FCP 分數很低，訪問者通常會看到一段時間的空白頁面。

作為 WordPress 網站所有者，您的目標應該是讓 FCP 低於 1.8 秒，但許多因素都會對該分數產生負面影響，包括：

  • 渲染阻塞 JavaScript 和 CSS
  • 一個緩慢的服務器
  • 龐大的字體文件
  • 大型文檔對像模型 (DOM) 大小

由於渲染阻塞 CSS 對 FCP 有貢獻，因此生成關鍵 CSS 可以提高此分數。 在此過程中，您將內聯呈現首屏內容所需的所有 CSS。

如何測試您的網站是否存在阻止呈現的 CSS

在生成 WordPress 關鍵 CSS 之前，您需要知道您的網站是否需要它。 由於大型 CSS 文件被視為渲染阻塞資源，您可以使用速度優化工具掃描它們。

要開始使用，請將您網站的 URL 輸入到 PageSpeed Insights 中。 此 Google 軟件將通過各種速度審核來分析您網站的性能。

Google PageSpeed 主頁

在頁面頂部，您會看到您的 Core Web Vitals 評估。 它包括 Largest Contentful Paint、First Input Delay、Cumulative Layout Shift、First Contentful Paint、Interaction to Next Paint 和 Time to First Byte 等指標。

使用 Google PageSpeed 進行核心網絡生命力評估

正如您之前了解到的，渲染阻塞 CSS 與 FCP 分數密切相關。 確保您的移動和桌面評估結果均為 1.8 秒或更短。

如果你的分數很低，你的網站上可能有龐大的、未經優化的 CSS 文件。 要驗證這是否屬實，請向下滾動至機會。 本部分提供了改進網站加載時間的具體建議。

Google PageSpeed 推薦的改進列表

在這裡，您可能會注意到一條警告，告訴您消除渲染阻塞資源。 儘管此消息可能引用 JavaScript 文件，但它也可能表示您需要生成關鍵 CSS。

如何在 WordPress 中生成關鍵 CSS

現在您已經了解了更多關於 WordPress 關鍵 CSS 及其重要性的信息，是時候生成它了！ 無論您的技能水平如何，您都可以按照我們對初學者友好的教程輕鬆學習如何優化 WordPress 中的 CSS 交付。

方法一：用插件生成關鍵CSS

雖然您可以自己生成它，但使用 WordPress 插件優化 CSS 交付通常更容易。 正確的工具可以自動推遲不太重要的 CSS。 另外，您不必手動編輯任何代碼。

Jetpack Boost 可以快速提高您網站的加載性能。 經過簡單的設置過程後，您可以使用此插件生成關鍵 CSS、推遲非必要的 JavaScript 等。

Jetpack Boost 主頁，上面寫著“最簡單的 WordPress 速度優化插件”

要開始使用 Jetpack Boost，請在 WordPress 中安裝並激活它。 然後，您將收到一個基於您網站當前性能的分數。

Jetpack Boost 的頁面速度得分

使用免費插件，您會看到優化 CSS 加載的選項。 或者，您可以升級到付費訂閱以自動生成關鍵 CSS。 這將有助於避免每次進行更改時都必須重新生成 CSS。

切換 Jetpack Boost 設置

要啟用關鍵 CSS，只需使用左側的開關即可。 同樣，您可以推遲非必要的 JavaScript 並為圖像打開延遲加載。 結合起來，這些設置可以顯著減少頁面加載時間，並允許訪問者更早地看到您的內容。

方法二：手動生成關鍵CSS

如果你不想使用插件，你也可以手動生成關鍵的 CSS。 請務必記住，此方法涉及編輯您網站的代碼，因此對於初學者來說可能是一個更複雜的過程。

第 1 步：備份您的網站

首先，您需要創建 WordPress 網站的備份。 如果您的網站文件有誤，您可以輕鬆恢復到這個保存的版本。 這樣，您就不會丟失任何重要數據。

如果您需要輕鬆管理備份，可以安裝 Jetpack VaultPress Backup 插件。 此工具將備份存儲在異地並提供一鍵式恢復，即使您的站點完全關閉也是如此。

以下是如何開始：

轉到插件 → 在您的 WordPress 儀表板中添加新插件。 搜索“Jetpack VaultPress Backup”並點擊Install now → Activate 。

然後，您會看到一個新窗口，您可以在其中設置插件。 單擊設置 Jetpack 。

設置 Jetpack VaultPress 備份

然後，將您的站點連接到您的 WordPress.com 帳戶。 重定向回您的站點後，單擊立即升級以查看 Jetpack VaultPress 備份計劃的多個選項。

至少，您需要備份計劃，但安全和完整提供了額外的工具來保護、發展和加速您的站點。

您的第一個備份將自動開始，您可以通過轉到 WordPress 儀表板中的Jetpack →備份來檢查其進度。

如果在接下來的幾個步驟中發生任何錯誤，只需返回此頁面並點擊恢復到此點。 這會將您的站點恢復到舊版本，從而消除發生的任何錯誤。

第 2 步：使用關鍵的 CSS 生成器

一旦您知道您的網站已備份，您就可以開始生成您的關鍵 CSS。 最簡單的方法之一是使用關鍵的 CSS 生成器。 該工具將自動生成您的關鍵 CSS，避免您手動創建代碼。

首先，打開 CoreWebVitals 關鍵 CSS 生成器。 輸入您的網站或要優化的特定頁面的 URL。 然後，點擊Generate critical CSS 。

關鍵的 CSS 生成器工具

加載完成後，您將在文本框中看到生成的 CSS 代碼。 複製此代碼。

為站點生成的關鍵 CSS

保存此代碼後，您可以將其內聯到您的網站上！

第 3 步：內聯關鍵 CSS

當有人訪問您的網站時，他們的瀏覽器將從服務器檢索您網站的文件。 它會在解析過程中首先檢查 <head> 部分是否有必要的內容。 然後，它將繼續呈現 <body> 內容。

要確定關鍵 CSS 的優先級，請將其放在文件的 <head> 部分。 這稱為內聯。 內聯 CSS 時，瀏覽器會請求在呈現頁面的其餘部分之前檢索此樣式表。

本質上，內聯 CSS 會將代碼放在需要使用的地方。 因此，訪問者的瀏覽器在顯示目標內容之前不必解析渲染阻止文件。

複製生成的關鍵 CSS 後，您可以將其內聯到文件中。 通過 FTP 導航到您的public_html文件夾。 然後，轉到wp-content → themes → 您的活動主題並打開header.php文件。

在此頭文件中，找到 <title> 標記。 在它下面，使用 <style> 標籤添加關鍵的 CSS。 最後，選​​擇更新文件。

常見問題 (FAQ)

到目前為止，我們已經討論了關鍵 CSS 以及如何生成它。 如果您對在您的網站上內聯 CSS 仍有疑問，我們將在這裡解答！

生成關鍵 CSS 會破壞您網站的外觀嗎？

如果操作不當，生成關鍵 CSS 可能會對您網站的外觀和佈局產生負面影響。 幸運的是，您可以通過簡單地恢復 WordPress 站點的已保存備份來撤銷任何更改。 使用 Jetpack VaultPress Backup，您可以查看活動日誌並一鍵恢復舊版本的站點。

此外，您可以使用 Jetpack Boost 等插件在必要時打開和關閉關鍵 CSS。 這些簡單的設置是根據 WordPress 最佳實踐構建的，因此它們不太可能在前端影響您的網站。

我還能做些什麼來優化我的 CSS 代碼？

如果您想進一步優化您網站上的 CSS，請考慮將其縮小。 您將在 CSS 縮小期間刪除不必要的代碼以減小 CSS 文件的大小。

您的 CSS 代碼可能包含空格和換行符以使其更易於閱讀。 由於瀏覽器可以處理沒有這些額外元素的代碼，因此您可以刪除它們。 這減少了運行文件所需的資源和時間。

您也可以完全刪除未使用的 CSS。 通過將文件減少到僅包含必要的代碼，您的網站將開始加載得更快。

我還能做些什麼來提高頁面速度？

加快網站速度的最佳方法之一是改進您的 Core Web Vitals。 使用 PageSpeed Insights 等工具，您可以識別未優化的元素，例如渲染阻塞資源。

由於瀏覽器從上到下加載您網站的代碼，因此加載過程很容易被 JavaScript 中斷。 通過延遲 JavaScript 解析，訪問者不必等待腳本加載就可以看到您的內容。

此外，考慮對圖像實施延遲加載。 使用 Jetpack Boost 中的此設置，在訪問者向下滾動之前，不會加載折疊下方的圖片。 這可以防止您的網站同時加載每個圖像，從而延遲渲染過程​​。

最後，內容交付網絡 (CDN) 可以顯著加快您的網站速度。 CDN 不依賴於一台服務器，而是使用全球數據中心系統。 像 Jetpack 的 CDN 這樣的選項可以改進圖像和靜態文件的內容交付。

優化 WordPress 中的 CSS 交付

如果您正在嘗試改進網站的內容交付，那麼消除任何渲染阻塞資源非常重要。 由於未優化的 CSS 會延遲渲染過程​​，因此生成關鍵 CSS 是值得的。 雖然這樣做不會直接縮短加載時間，但可以讓訪問者更快地看到首屏內容。

回顧一下，以下是在 WordPress 中生成關鍵 CSS 的方法：

  1. 使用 Jetpack Boost 等插件生成關鍵 CSS。
  2. 使用關鍵 CSS 生成器。

借助 Jetpack Boost，您無需編輯任何代碼即可優化 CSS。 下載激活插件後，一鍵生成關鍵CSS！