CSS檔案控制WordPress網站的視覺格式和樣式。但是，如果您的CSS程式碼沒有以最佳方式交付，那麼它可能會降低您的網站速度。在本教程中，我們將向您展示兩種優化WordPress網站CSS交付的簡單方法。
WordPress網站CSS交付如何影響WordPress效能
CSS檔案用於定義WordPress站點的視覺外觀。您的WordPress主題包含一個CSS樣式表檔案，您的一些外掛也可能使用CSS樣式表。CSS是現代網站所必需的，但CSS檔案可能會降低您網站的速度和效能，具體取決於它們的設定方式。
即使網站速度稍有延遲，也會造成糟糕的使用者體驗，並可能影響您的搜尋排名和轉化，從而導致流量和銷售額減少。
CSS檔案可能會減慢網站速度的一種方式是，是否需要在顯示頁面之前載入它們。這意味著您的訪問者將看到一個空白頁面，直到CSS檔案載入完畢。這被稱為渲染阻塞CSS。CSS檔案可能會降低網站速度的另一個常見原因是，它們包含的程式碼比顯示當前頁面可見部分所需的程式碼多。額外的程式碼意味著它們需要更長的時間來載入。
好訊息是，您可以通過優化CSS程式碼的交付方式來提高WordPress網站的效能。這是通過確定顯示當前網頁的第一部分所需的最少CSS程式碼來完成的。這被稱為關鍵 CSS。然後將此關鍵程式碼內聯新增到頁面的HTML中，而不是新增到單獨的樣式表中，以便無需先載入CSS檔案即可呈現程式碼。
在您的訪問者可以看到頁面的內容後，可以載入其餘的CSS。這稱為“延遲載入”。在本教程中，我們將向您展示兩種優化WordPress網站CSS交付的方法，您可以選擇最適合您的一種。
方法 1：使用WP Rocket優化WordPress CSS交付
WP Rocket是市場上最好的WordPress快取外掛。它提供了優化WordPress CSS交付的最簡單方法。事實上，這就像選中一個框一樣簡單。WP Rocket是一個付費外掛，但最好的部分是所有功能都包含在基礎版本中。
您需要做的第一件事是安裝並啟用WP Rocket外掛。啟用後，您需要導航到“設定”»“WP Rocket”頁面並切換到“File Optimization”選項卡。
接下來，您需要向下滾動到CSS files部分。在那裡，您需要選中“Optimize CSS delivery”選項旁邊的框。
此功能將智慧地識別對訪問者首先看到的網頁部分進行格式化所需的關鍵CSS。您的頁面將載入得更快，而其餘的CSS將在您的訪問者看到其內容後載入。
您現在需要做的就是單擊“Save Changes”按鈕並等待WP Rocket為您的所有文章和頁面生成必要的CSS檔案。它還會自動清除您網站的快取，以便您的訪問者看到您網站的新優化版本，而不是快取中儲存的任何未優化版本。
WP Rocket 還有很多其他方法可以幫助您提高網站的效能。要了解更多資訊，請參閱我們關於如何在WordPress中正確安裝和設定WP Rocket的教程。
方法 2：使用Autooptimize優化WordPress CSS交付
Autooptimize是一個免費外掛，旨在改進您網站的CSS和JS檔案的交付。雖然Autoptimize是一個免費外掛，但它沒有WP Rocket那麼多的功能，及需要更多的時間來設定。
例如，它無法像WP Rocket那樣自動識別關鍵 CSS。相反，Autoptimize需要高階第三方服務的幫助，這需要額外的費用並需要額外的時間進行配置。但是，如果您預算緊張並且不需要WP Rocket的所有其他功能來加速您的網站，那麼它可能是一個不錯的選擇。
您需要做的第一件事是安裝並啟用Autooptimize外掛。啟用後，您需要訪問設定»Autoptimize頁面以配置外掛設定。在那裡，您需要向下滾動到CSS選項部分並選中頂部的Optimize CSS Code框。
完成此操作後，您需要確保未選中“Aggregate CSS-files”選項，然後選中“Eliminate render-blocking CSS”。您現在可以單擊“Save Changes and Empty Cache”按鈕來儲存您的設定。
但是在您註冊一個關鍵CSS帳戶之前，該外掛將無法正常工作。這是一項高階訂閱服務，它將提供Autooptimize優化您的WordPress CSS交付所需的關鍵CSS程式碼。
為此，請導航到Autooptimize設定中的Critical CSS選項卡。在這裡，您將找到註冊Critical CSS所需的資訊。您可以通過單擊第三段中的註冊連結開始。
收到Critical CSS API金鑰後，向下滾動到API Key部分，以便將其貼上到“Your API key”文字框中。之後，請確保單擊“Save Changes”按鈕。
Autooptimize現在擁有新增關鍵CSS內聯和延遲載入樣式表所需的所有資訊，直到呈現頁面之後。因此，您的網站載入速度會更快。最後，希望通過本教程，您學會了如何優化您的WordPress網站CSS交付，以進一步提升網站的速度。
評論留言