如何縮小 WordPress 文件（CSS、HTML 和 JavaScript）

已發表: 2022-11-12

您想縮小 CSS、HTML 或 JavaScript 等 WordPress 文件嗎？ 如果您想知道它是如何完成的，我們已經為您提供了保障。 本文將向您展示如何縮小 WordPress 文件並加速您的 WordPress 網站。

但在此之前，我們先來討論一下什麼是縮小，縮小的優點是什麼。 讓我們開始吧。

什麼是縮小？

縮小是 Web 開發人員使用的一種流行技術，通過壓縮 HTML、CSS 和 JavaScript 等靜態文件來減少整個網站的加載時間。 該過程的重點是使靜態文件的大小更小。

縮小的作用是刪除文件中除了提高人類可讀性之外沒有其他目的的所有空白。 由於服務器不關心可讀性，我們可以安全地刪除所有空格。 結果，文件的大小會減少一小部分。 但是，如果所有靜態文件都減少了一小部分，那麼整體效果會更加顯著。

例如，常規的 CSS 代碼如下所示：

 身體 {
 邊距：25px；
 填充：25px；
 顏色：#000000;
 背景：#f5f5f5;
 }
 h1 {
 字體大小：32px；
 顏色#ff6200;
 邊距底部：15px；
 }

但是在縮小之後，我們可以這樣：

 正文{margin:25px;padding:25px;color:#000000;background:#f5f5f5;}h1{font-size:32px;color#ff6200;margin-bottom:15px;}

如您所見，縮小過程從代碼中刪除了額外的換行符和空格。 這將減小文件大小並使服務器更快地讀取文件并快速將網站提供給訪問者。

與 CSS 類似，優化技術也可以壓縮 HTML 和 JavaScript。

如果您的 WordPress 網站周圍有很多靜態文件，您應該嘗試縮小它們。 可能，它將幫助您減小文件大小並使網站更快。

為什麼我們要在 WordPress 中縮小 HTML、CSS 和 Javascript

除了緩存、延遲加載等其他優化技術外，您還應該在 WordPress 中縮小 HTML、CSS 和 JavaScript，以使您的網站更快。

根據統計數據，全球超過 64%的網站使用 WordPress。 因此，可以肯定地說，您正在與同行業的其他 WordPress 博客競爭。

此外，谷歌還表示，他們會將網站的速度作為排名因素之一。

因此，通過實施縮小和其他優化技術，您可以讓您的網站/博客更快。 這將帶來更多的轉化、銷售（如果您使用的是 WooCommerce 商店）和收入。 但是，如果站點上只有有限數量的靜態文件，縮小不會給您帶來顯著的性能提升。

另一方面，如果您的網站處理大量 CSS、JS 和 HTML 文件，那麼縮小可能是最好的方法之一。

現在，您知道了縮小以及為什麼需要縮小文件。 接下來，讓我們進入主題：如何在 WordPress 中縮小 HTML、CSS 和 JS。

如何在 WordPress 中縮小 HTML、CSS 和 Javascript

您可以通過兩種方式在 WordPress 中縮小 HTML、CSS 和 JavaScript。

  • 手動
  • 使用專用插件

下面，我們將向您展示這兩種方法。 因此，您可以選擇適合您要求的方式。

手動縮小 WordPress 文件

如果您不想在 WordPress 網站上使用額外的插件進行縮小，可以使用此在線工具。 但是，當您使用手動方法時，您需要單獨優化每個文件。 這就是它的完成方式。

如果您檢查該網站，您將看到一個提交框。

縮小器

在那裡，您需要粘貼需要縮小的代碼。

縮小wordpress文件 - 粘貼css

您可以縮小 CSS、JS 或 HTML 代碼。 粘貼代碼後，單擊Minify 。

縮小CSS代碼

在下一頁上，您將獲得 CSS 的縮小版本。

縮小的CSS

正如您在屏幕截圖中看到的那樣，該工具從代碼中刪除了所有多餘的空格和換行符。 這樣，您可以優化您的 CSS、JavaScript 和 HTML。

之後，您需要將此代碼的縮小版本上傳到您的服務器。

該工具易於使用。 但主要缺點是您必須手動縮小每個 WordPress 文件。 這可能是一個相當耗時且乏味的過程。 如果您可以自動化服務器上所有文件的整個過程會怎樣？

這就是 WordPress 縮小插件的用武之地。讓我們看看如何在 WordPress 中縮小 CSS、HTML 和 JavaScript。

使用 WordPress 插件縮小 CSS、HTML 和 JavaScript

您可以用來縮小靜態文件的兩個最好的 WordPress 插件是：

  • WP火箭
  • 自動優化

在轉到教程之前，讓我們看看每個插件提供了什麼。

1) WP火箭

wp火箭

如果你正在尋找最強大的 WordPress 緩存和速度優化插件，你必須看看WP Rocket。 WP Rocket 是一個輕量級但功能豐富的 WordPress 緩存插件，可以幫助每個博主和企業主通過簡單的鼠標點擊來提高網站的速度。

WP Rocket 的主要優點是易於使用的界面。 該插件有一個易於使用的儀表板，可幫助每個人了解最佳功能以及何時打開它們。 使用這個插件，除了在 WordPress 中縮小 CSS、HTML 和 JavaScript 文件之外，您還可以做更多事情。

我們在 WP Rocket 插件中喜歡的流行功能是 CDN 集成、WooCommerce 集成和數據庫集成。

由於他們提供 CDN 集成，您可以將插件與您喜歡的任何 CDN 服務集成。 創建CDN（內容交付網絡）服務是為了使文件服務更快。 你可以使用BunnyCDN、Cloudflare、Stackpath或任何你喜歡的東西。

此外，WooCommerce 優化功能將確保從緩存中刪除購物車、結帳和相關的重要頁面。 這將使您的 WooCommerce 商店更加用戶友好。

最後，數據庫優化功能從MySQL數據庫中消除了所有不需要的表、評論和已刪除的帖子。 可能，這將有助於網站所有者提高網站速度並減少服務器上的負載。

特徵
  • 輕的
  • 便於使用
  • CDN 集成
  • WooCommerce 集成
  • 數據庫優化
  • 文件優化
價錢

WP Rocket 是一個高級緩存插件。 您可以根據需要獲得訂閱。 僅供參考，他們最便宜的計劃每年花費49 美元。

2) 自動優化

自動優化

如果您更喜歡使用輕量級 WordPress 插件來管理 WordPress 文件縮小，您應該嘗試Autooptimize 。

Autooptimize 是一個流行的插件，可以加速任何 WordPress 或 WooCommerce 網站。 該插件被全球超過一百萬個 WordPress 網站使用。 最重要的是，它們還具有獨特的功能。

例如，為了優化圖像性能，您可以使用 Autooptimize 的延遲加載功能。 它將確保僅在訪問者向下滾動時才提供圖像。

除了延遲加載，谷歌字體優化是另一個很酷的功能。 大多數 WordPress 主題作者通常在其主題中使用 Google 字體，因此當最終用戶使用它時，網站會向 Google 字體的服務器發送額外的 HTTP 請求。 您可以使用自動優化來減少它。

由於它是一個輕量級工具，該插件不會增加服務器的額外負載或整個網站的大小。 當您需要一個簡單的解決方案來提供所有必需的功能時，您需要選擇 Autooptimize。 但是，開發團隊建議使用緩存插件進行更好的優化。

特徵
  • 延遲加載
  • 縮小
  • 谷歌字體優化
  • 輕的
價錢

Autooptimize 是一個免費的 WordPress 插件，可通過 WordPress 插件庫下載。

因此，這是兩個最流行的縮小 WordPress 文件的插件。 但是，它們並不是唯一可用的選項。 如果您想探索，請隨時查看我們關於最佳 WordPress 縮小插件的指南。

接下來，我們將向您展示如何使用這些插件來縮小文件。

如何使用 WP Rocket 縮小 WordPress 文件

如果您需要將網站的性能提升到一個新的水平，WP Rocket 是一個不錯的選擇。 除了縮小之外，它還有許多可以幫助提高頁面加載時間的功能。

由於它是一個高級插件，您將無法直接從 WordPress 存儲庫安裝它。 相反，您必須從官方網站購買並從那裡下載。

下載高級插件後，您需要在 WordPress 網站上手動安裝該插件。

安裝 wp 火箭

安裝後，激活插件。

激活 wp 火箭

在 WordPress 設置中，您將看到WP Rocket 配置。

w火箭配置

您將在左側看到可以使用的所有配置選項。

wp火箭配置選項

主要選項是：

  • 儀表板
  • 緩存
  • 文件優化
  • 媒體
  • 預載
  • 高級規則
  • 數據庫
  • 內容分發網絡

等等

您需要做的就是轉到“文件優化”選項卡。 您將在那裡看到縮小 JS 和 CSS 文件的設置。

文件優化 - 縮小 wordpress 文件

從那裡，縮小你想要的文件。

CSS 縮小

啟用 CSS 縮小部分中的選項，您就準備好了。

縮小 css - 縮小 wordpress 文件

您還可以從縮小中排除自定義 CSS 文件。

JavaScript 縮小

向下滾動到 JavaScript 縮小選項卡並從那裡啟用縮小。

使用 wp Rocket 縮小 javascript

進行這些更改後，您需要保存設置。 截至目前， WP Rocket 不支持 HTML 文件縮小。

這樣，您可以使用 WP Rocket 進行 WordPress 縮小。 接下來，我們將了解如何使用 Autoptimize 插件進行縮小。

如何使用自動優化縮小 WordPress 文件

如您所知，您首先需要在您的 WordPress 網站中安裝並激活 Autooptimize。 為此，您可以轉到Plugins > Add New並蒐索 Autooptimize。 找到它後，安裝並激活該工具。

縮小 WordPress 文件 - 激活自動優化

安裝插件後，您可以在 WordPress 設置下看到它。

縮小 wordpress 文件 - 自動優化設置

開發團隊為插件添加了四個自定義選項。

自動優化選項

  • JS、CSS 和 HTML
  • 圖片
  • 關鍵 CSS
  • 額外的

您必須按照這些步驟來縮小 CSS、HTML 和 JavaScript 文件。

JavaScript 優化

JavaScript 優化是您將在插件的設置頁面上看到的第一件事。 啟用優化 JavaScript 代碼選項以縮小 JavaScript 文件並移至下一步。

javascript 選項

CSS 優化

在 JavaScript 選項的正下方，您可以看到 CSS 優化。 啟用聚合 CSS 文件和聚合內聯 CSS選項以縮小服務器上的所有 CSS 文件。

css 選項 - 縮小 WordPress 文件

HTML 優化

要優化 HTML 文件，請移至 HTML 選項。

在那裡，啟用優化 HTML 代碼選項。

html 選項 - 縮小 WordPress 文件

完成所有必需的更改後，您必須保存插件的設置。

這樣，您可以優化 WordPress/WooCommerce 網站上的靜態文件。 此外，Autooptimize 具有更多優化功能，因此您可以探索插件以獲得更多速度和性能改進。

而已。

這就是您可以使用 Autooptimize 縮小 WordPress 文件的方法。

注意：有時，縮小特定主題文件會破壞您的網站。 因此，每次對文件應用縮小後，請從前端檢查您的網站。

測試/比較縮小結果

現在您已經成功地縮小了您的 WordPress 或 WooCommerce 靜態文件（CSS、HTML 和 JavaScript）。 接下來，讓我們看看之前和之後的結果。 有多種工具可用於測試網站的速度，例如：

  • 王國
  • GTmetrix
  • PageSpeed 見解

對於此測試，我們將使用GTmetrix 。 它是一種流行的工具，可用於網站速度測試。 所以這裡是結果。

注意：我們創建了一個新的 WordPress 網站並導入了一些虛擬內容進行測試。 不建議在沒有內容的情況下測試新網站的速度。

前

完全加載 - 縮小 WordPress 文件

  • 性能 – 88%
  • 結構 – 97%
  • 滿載時間 – 3.3 秒

後

結果後 - 縮小 WordPress 文件

  • 性能 – 98%
  • 結構 – 98%
  • 滿載時間 - 1.4 秒

如您所見，我們已將網站的加載時間從 3.3 秒減少到 1.4 秒。 這是一個重大的改進。

結論

正如您在上面看到的，如果您需要讓您的 WordPress 或 WooCommerce 網站更快，您必須將其優化到最高水平。 縮小 WordPress 靜態文件是加快網站速度的一種常見且簡單的方法。 這樣做的主要優點是您不需要處理任何代碼或編輯核心/主題模板。

手動優化所有靜態文件可能具有挑戰性且耗時。 每當您向網站添加新的 CSS/HTML 或 JS 文件時，您都必須通過網站對其進行優化。 這不是初學者友好或方便的方法。

WP Rocket和Autoptimize是您可以用來優化靜態文件的兩個最佳插件。 兩者都具有易於使用的功能，即使是非技術人員也可以輕鬆配置它們。 如果您正在尋找優化所有現有和未來靜態文件的最佳方法，插件方法是最佳選擇。

我們希望您發現這篇有用的文章並學習瞭如何縮小 WordPress 文件。 如果您願意，請考慮在社交媒體上與您的朋友和博主分享這篇文章。 此外，您可能想查看我們的博客存檔以獲取更多相關文章。

你打算使用哪種方法？ 讓我們在評論中知道！

您可能想閱讀的類似文章：

  • WordPress 速度優化插件：提高網站速度的 5 大插件！
  • 加快 WordPress 網站速度的最佳 WordPress 緩存插件
  • 如何修復緩慢的 WooCommerce 商店並加快速度？