刪除WordPress中未使用的CSS可以在一定的程度上讓網站載入速度更快。
未使用的CSS是由您的WordPress主題或外掛新增的但並不真正需要的CSS程式碼。刪除這些CSS程式碼可提高WordPress效能和使用者體驗。
在本教程中，我們將學習如何在不破壞網站的情況下刪除WordPress中未使用的 CSS。
什麼是WordPress中未使用的CSS？
WordPress中未使用的CSS是載入到網站上但實際上並不需要用於顯示頁面的CSS程式碼。
額外的程式碼會使訪問者的瀏覽器需要更長的時間來呈現頁面，造成糟糕的使用者體驗。較慢的載入時間甚至會影響網站搜尋引擎排名，有可能會導致網站的自然流量減少。
您可以使用Google Pagespeed Insights瞭解未使用的CSS程式碼如何影響您的網站。標題為“Remove unused CSS”的部分，將詳細說明了哪些CSS檔案影響網站載入時間。
為什麼在WordPress中新增了未使用的CSS？
CSS用於設計WordPress網站的外觀。WordPress主題包含CSS，其中大部分包含在主題的style.css檔案中。
除了主題的CSS之外，部分WordPress外掛還將載入自己的CSS。例如，WooCommerce外掛將載入CSS以顯示產品，頁面構建器外掛將新增自己的CSS以顯示您的自定義頁面，而表單外掛將包含CSS以設定表單樣式。
然後，Web fonts、圖示字型和其他元素也需要新增自己的CSS檔案。
通常，這些檔案非常小並且載入速度很快。但是，如果WordPress網站有很多這樣的資源，累積起來，還是會對網站速度產生負面影響。
如何刪除WordPress中未使用的CSS？
我們可以有幾種不同的方法可以減少WordPress網站上未使用的 CSS。
但是，要完全刪除WordPress中所有未使用的CSS將是一項艱鉅的任務。由於WordPress在幕後工作的方式，一些未使用的CSS可能很難找到和刪除。
下面我們將向展示兩種刪除未使用CSS的方法，您可以選擇最適合的一種。
方法 1. 使用WP Rocket外掛刪除WordPress中未使用的CSS
這種方法比較簡單，推薦給初學者。它極大地改善了WordPress網站上CSS檔案的整體交付，包括刪除大部分未使用的CSS。
我們認為它是初學者的最佳解決方案，因為它更容易並且實現了為您的使用者提供更好體驗的主要目標。這意味著您的網站在速度測試工具上載入速度很快，並且訪客也感覺很快。
首先，您需要安裝並啟用WP Rocket外掛。
啟用後，您需要訪問Settings »WP Rocket頁面並切換到“File Optimization”選項卡。
接下來，您需要向下滾動到CSS檔案部分，選中“Optimize CSS delivery”選項旁邊的框。
此選項會生成一個CSS檔案，該檔案僅包含顯示網站可見部分所需的CSS程式碼。它首先載入該檔案，向訪問者顯示該頁面，然後使用延遲載入的技術載入其他CSS檔案。
通過刪除這個阻止渲染的CSS，網站可以比在頁面顯示之前載入所有CSS檔案更快地被使用者檢視。
啟用“Optimize CSS delivery”選項後，單擊“Save Changes”按鈕並等待WP Rocket為您的所有文章和頁面生成必要的CSS檔案。它還會自動清除您網站的快取。
完成後，您可以繼續使用Google Pagespeed Insights再次測試您的網站效能。
額外的檔案傳輸調整以提高效能
WP Rocket還支援從靜態檔案中刪除查詢字串、合併Google字型檔案並縮小HTML。所有這些調整都為您的整體速度帶來了微小的改進，從而為您的訪問者帶來了更快的載入體驗。
您還將看到用於縮小和合並CSS檔案的選項。這些選項將減少HTTP請求併為您提供額外的速度提升。
但是，您需要仔細檢查您的網站，以確保啟用這些設定後沒有任何問題。
此外，您可以對網站上的JavaScript檔案應用相同的優化。您可以縮小和組合它們以作為單個檔案並延遲JavaScript檔案的載入以提高效能。
方法 2. 使用Asset CleanUp外掛刪除WordPress中未使用的 CSS
這種方法更為高階及強大，支援從WordPress網站的任何頁面中刪除任何未使用的CSS。
但是，這個外掛相對有點複雜，您需要徹底測試網站功能和外觀，以確保沒有損壞。
首先，您需要安裝並啟用Asset Cleanup外掛。
啟用後，您需要訪問Asset CleanUp»Settings頁面並切換到Test Mode選項卡。從這裡，您需要開啟“Enable Test Mode”選項。
這允許您嘗試不同的設定並以管理員身份進行測試，而不會影響網站訪問者。
之後，您需要訪問Asset CleanUp»CSS/JS Manager頁面。從這裡，您可以逐頁解除安裝不需要的CSS和JavaScript檔案。
它將首先獲取您的主頁，並向您顯示該頁面上載入的所有CSS和JavaScript檔案。
您需要向下滾動並檢視載入的檔案。如果您看到不需要的檔案，則可以針對該特定頁面、文章型別或站點範圍解除安裝該檔案。
該外掛還允許您從此處選擇特定的文章或頁面，或者您可以通過像往常一樣編輯文章或頁面來訪問相同的選項。
在文章編輯螢幕上，您會在文章編輯器正下方找到Asset CleanUp框。
當訪問者在您的網站上檢視此頁面時，該外掛將自動獲取並列出載入的所有檔案和資源。然後，您可以簡單地解除安裝該頁面上不需要的未使用的CSS或JavaScript檔案。
注：不要忘記在刪除任何未使用的CSS或JavaScript後測試網站，以確保一切正常。
完成解除安裝和刪除未使用的CSS和JavaScript檔案後，您可以返回外掛的設定頁面並關閉“Test Mode”。
不要忘記單擊“Update All Settings”按鈕來儲存您的更改。
您現在可以使用Google Pagespeed Insights測試您的網站，以檢視未使用的CSS通知中的更改。
希望本教程能幫助您刪除WordPress中未使用的 CSS。關於如何提升WordPress網站的效能，你還可以閱讀以下教程：
評論留言