如何輕鬆優化 WordPress CSS 傳遞（2 種方法）
最後更新時間：2024 年 2 月 9 日，編輯團隊 | 審核人：Syed Balkhi
分 享
193
分享
推文
分享
Facebook Messenger
電子郵件
編輯註：我們從 WPressize Me 的合作夥伴連結中賺取佣金。佣金不會影響我們編輯的意見或評價。了解更多有關編輯流程的資訊。
您想優化您的 WordPress CSS 傳遞嗎？
CSS 文件控制著您的 WordPress 網站的視覺格式和樣式。但是，如果您的 CSS 代碼未以最佳方式傳遞，那麼它可能會減慢您的網站速度。
在這篇文章中，我們將向您展示兩種簡單的方法來優化您的 WordPress CSS 傳遞。
WordPress CSS 傳遞如何影響 WordPress 性能
CSS 文件用於定義您的 WordPress 網站的視覺外觀。您的 WordPress 主題包含一個 CSS 樣式表文件，有些插件也可能使用 CSS 樣式表。
CSS 是現代網站必不可少的，但根據其設置方式，CSS 文件可能會降低網站的速度和性能。
即使是網站速度的小延遲，也會造成不良的用戶體驗，並可能影響您的搜索排名和轉換，導致流量和銷售減少。
CSS 文件減慢您的網站的一種方式是，如果它們需要在頁面顯示之前被加載，那麼您的訪客將會看到一個空白頁面，直到 CSS 文件加載完成。這被稱為阻止渲染的 CSS。
另一個常見的原因是 CSS 文件包含了顯示當前頁面可見部分所需的更多代碼。這些額外的未使用的 CSS 代碼意味著其加載時間將更長。
好消息是，您可以通過優化 CSS 代碼的傳遞方式來提高您的 WordPress 站點性能。
這是通過識別顯示當前網頁第一部分所需的最小 CSS 代碼來完成的，這被稱為「關鍵 CSS」。
然後，將這部分關鍵代碼內聯添加到頁面的 HTML 中，而不是在單獨的樣式表中，以便在不需要先加載 CSS 文件的情況下可以渲染代碼。
其餘的 CSS 可以在訪客看到頁面內容後加載，這被稱為「延遲加載」。
話不多說，讓我們看看兩種優化 WordPress CSS 傳遞的方法，您可以選擇最適合您的方法：
使用 WP Rocket 優化 WordPress CSS 傳遞
使用 Autoptimize 優化 WordPress CSS 傳遞
方法一：使用 WP Rocket 優化 WordPress CSS 傳遞
WP Rocket 是市場上最好的 WordPress 緩存插件。它提供了最簡單的方法來優化您的 WordPress CSS 傳遞。事實上，這樣做就像勾選一個框一樣簡單。
WP Rocket 是一個付費插件，但最棒的是所有功能都包含在其最低的計劃中。
首先，您需要安裝和激活 WP Rocket 插件。 有關更多詳細資訊，請參閱我們的分步指南，了解如何安裝 WordPress 插件。
激活後，您需要導航到「設置」»「WP Rocket」頁面，並切換到「文件優化」標籤。
然後，您需要向下滾動到 CSS 文件部分。
到達那裡後，需要勾選「優化 CSS 傳遞」選項旁邊的框。
這一功能將智能地識別設置訪客首先看到的頁面部分所需的關鍵 CSS。您的頁面將加載得更快，其餘的 CSS 將在訪客看到其內容後加載。
現在，您只需要點擊「保存更改」按鈕，並等待 WP Rocket 為您的所有文章和頁面生成必要的 CSS 文件。
它還會自動清除您網站的快取，以便訪客看到最新的優化版本，而不是存儲在快取中的未優化版本。
WP Rocket 可以幫助您改善網站性能的方式還有很多。要了解更多，請參閱我們的指南，了解如何正確安裝和設置 WP Rocket 在 WordPress 中。
方法二：使用 Autoptimize 優化 WordPress CSS 傳遞
Autoptimize 是一個免費的插件，旨在改進您的網站 CSS 和 JavaScript 文件的傳遞。
雖然 Autoptimize 是一個免費插件，但它不如 WP Rocket 功能齊全，並且需要更多的設置時間。
例如，它無法像 WP Rocket 一樣自動識別關鍵 CSS。相反，Autoptimize 需要第三方服務的幫助，這是一個額外的費用，並需要額外的配置時間。
然而，這可能是一個不錯的選擇，如果您的預算緊張且不需要 WP Rocket 的所有功能來加速您的網站。
首先，您需要安裝和激活 Autoptimize 插件。 有關更多詳細資訊，請參閱我們的分步指南，了解如何安裝 WordPress 插件。
啟用後，您需要訪問「設置」»「Autoptimize」頁面來配置插件設置。到那裡後，您需要向下滾動到 CSS 選項部分，並勾選頂部的「優化 CSS 代碼」框。
一旦這樣做，您需要確保「聚合 CSS 文件」選項未勾選，然後勾選「消除阻塞渲染的 CSS」。
您現在可以點擊「保存更改和清空快取」按鈕來儲存您的設置。
但是，插件將無法正常工作，直到您註冊一個 Critical CSS 帳戶。這是一個付費訂閱服務，將為 Autoptimize 提供其所需的關鍵 CSS 代碼，以優化您的 WordPress CSS 傳遞。
為此，導航到 Autoptimize 設置中的 Critical CSS 標籤。在這裡您會找到註冊 Critical CSS 所需的資訊。您可以通過點擊第三段中的註冊鏈接開始。
收到您的 Critical CSS API 金鑰後，向下滾動到 API 金鑰部分，您可以將其粘貼到「您的 API 金鑰」文本框中。
之後，確保點擊「保存更改」按鈕。
Autoptimize 現在擁有所有資訊，可以內聯添加關鍵 CSS，並在頁面渲染後延遲加載樣式表。結果是，您的網站將具有更快的加載速度。
我們希望這篇教程能幫助您了解如何優化 WordPress CSS 傳遞。您可能還想查看我們的終極指南，了解建立 WordPress 網站的真實成本，以及我們精選的最佳受管理 WordPress 主機公司。
如果您喜歡這篇文章，請訂閱我們的 YouTube 頻道，獲取 WordPress 影片教程。您也可以在 Twitter 和 Facebook 上找到我們。
分 享
193
分享
推文
分享
Facebook Messenger
電子郵件
