如何在 WordPress 中縮小 CSS / JavaScript 信息（3 種策略）

已發表: 2022-04-26

您想縮小 WordPress 網頁上的文檔嗎？

縮小您的 WordPress CSS 和 JavaScript 信息可以使它們更快地加載並加速您的 WordPress 網站。

在本手冊中，我們將向您展示如何在 WordPress 中簡單地縮小 CSS/JavaScript 文件以提高性能和速度。

Easily minify CSS and JavaScript files in WordPress

什麼是縮小，你什麼時候需要它？

“縮小”一詞用於描述使您的網站文件尺寸更小的系統。它通過從資源代碼中刪除空格、行和不需要的人來做到這一點。

這是標準 CSS 代碼的一個實例：

human body 
margin:20px
padding:20px
colour:#333333
history:#f7f7f7

h1 
font-dimension:32px
coloration#222222
margin-base:10px

縮小代碼後看起來像這樣：

entire bodymargin:20pxpadding:20pxcolor:#333history:#f7f7f7
h1font-dimension:32pxmargin-base:10px

通常，建議僅縮小發送到用戶瀏覽器的文檔。這包含 HTML、CSS 和 JavaScript 文件。

您也可以縮小 PHP 文檔，但縮小它不會提高客戶的頁面加載速度。這是因為 PHP 是一種服務器端編程語言，這意味著它在將某些內容髮送到訪問者的 Internet 瀏覽器之前在服務器上運行。

考慮到壓縮信息的加載速度更快，縮小數據文件的好處是提高了 WordPress 的速度和整體性能。

儘管如此，一些專家認為大多數網站的功能進步很小，不值得困難。縮小只會刪除大多數 WordPress 網站上幾千字節的數據。您可以通過優化萬維網圖像來最大限度地減少網站加載時間。

如果您試圖在 Google Pagespeed 或 GTMetrix 軟件上獲得 100/100 的評分，那麼縮小 CSS 和 JavaScript 會顯著提高您的分數。

提到這一點，讓我們看一下如何輕鬆地縮小 WordPress 網頁上的 CSS/JavaScript。

我們將提供超過 3 種獨特的選擇供您選擇：

可以了，好了？讓我們從我們提出的最佳流程開始。

過程 1. 使用 WP Rocket 縮小 WordPress 中的 CSS/JavaScript

這種技術更容易，建議所有消費者使用。無論您使用的是哪個 WordPress 主機，它都會運行。

最初，您需要安裝並激活 WP Rocket 插件。有關其他詳細信息，請參閱我們的分階段移動指南，了解如何設置 WordPress 插件。

WP Rocket 是市場上最好的 WordPress 緩存插件。它允許您非常輕鬆地將緩存插入 WordPress，並大大提高網站速度和網站加載時間。

有關更多信息，請參閱我們關於如何在 WordPress 中安裝和建立 WP Rocket 的教程。

激活後，您需要查看設置 » WP Rocket網頁並切換到“文件優化”選項卡。

從這裡開始，您需要查看 Minify CSS 文檔解決方案。

然後 WP Rocket 將向您顯示一個警告，這可能會在您的網站上分裂點。繼續，只需單擊“激活縮小 CSS”按鈕。如果它觸發了您的 Internet 站點的任何問題，您可以不斷地停用此選擇。

隨後，您必須向下滾動到下方的 JavaScript 文檔部分。

在這裡，只需測試“縮小 JavaScript 文件”可能性旁邊的框。

同樣，您會看到一條警告，指出這可能會破壞您網站上的內容。繼續，只需單擊“激活縮小 JavaScript”按鈕。

在那之後，永遠不要忽略單擊“保留調整”按鈕以保留您的配置。

WP Rocket 現在將開始縮小您的 CSS 和 JavaScript 信息。您可以在插件設置中非常清除緩存，以確保它開始為未來的網頁訪問者使用縮小的 CSS 和 JavaScript。

技巧 2. 在 WordPress 中使用 SiteGround 縮小 CSS/JavaScript

如果您將 SiteGround 作為您的 WordPress 網絡託管服務提供商，那麼您可以使用 SiteGround Optimizer 縮小 CSS 文件。

SiteGround Optimizer 是一個通用的性能優化插件，可以在他們的系統上執行。它與他們的 Ultrafast PHP 一起表現良好，可以加強您網站的加載時間。

只需在您的 WordPress 網站上設置並激活 SiteGround Optimizer 插件即可。有關更多詳細信息，請參閱我們關於如何安裝 WordPress 插件的分步指南。

之後，您需要單擊 WordPress 管理側欄中的 SG Optimizer 菜單。

這只會帶您進入 SG Optimizer 設置。

在本文中，您需要單擊“轉到前端”按鈕而不是“其他優化”。

在下一台顯示器上，您需要切換“縮小 CSS 文件”解決方案即將到來的切換開關。

接下來，您必須切換到 JavaScript 選項卡並打開即將到來的“縮小 JavaScript 文件”選項的切換。

就這些！您現在可以清空 WordPress 緩存並查看您的站點以加載縮小版本的 CSS 和 JS 文檔。

方法 3. 使用 Autooptimize 縮小 CSS/JavaScript

此方法適用於不在 SiteGround 且未使用 WP Rocket 的消費者。

最初，您需要設置並激活 Autooptimize 插件。有關更多詳細信息，請參閱我們關於如何安裝 WordPress 插件的分階段操作指南。

激活時，您需要查看選項»自動優化網頁以配置插件選項。

從本文開始，您首先需要驗證 JavaScript 選項下的“優化 JavaScript 代碼”選項。

之後，您需要向下滾動到 CSS 選擇並檢查“優化 CSS 代碼”選項旁邊的框。

永遠不要忘記單擊“保存調整”按鈕來存儲您的配置。

然後，您只需單擊 Vacant Cache 按鈕即可開始處理您的縮小數據文件。該插件還可用於處理 WordPress 中的渲染阻塞 JavaScript 和 CSS。

我們希望這篇文章能幫助您縮小 WordPress 網頁上的 CSS 和 JavaScript。您可能還想查看我們關於在 WordPress 中優化核心網絡生命力的教程，並遵守我們最出色的 WordPress 通用性能教程。

如果您喜歡這篇文章，請務必訂閱我們的 YouTube 頻道以獲取 WordPress 電影教程。您也可以在 Twitter 和 Facebook 上找到我們。