WordPress網站CSS、JavaScript和HTML檔案瘦身壓縮教程

在本教程中，我們將向您介紹WordPress壓縮（minification），並且引薦其中兩個最好的外掛以幫助您實現WordPress檔案瘦身壓縮。

隨著您的網站隨著工具和內容的增多而變得越來越大，檔案的數量可能會擴大到降低網站速度的程度。 速度在網際網路上很重要，因此載入緩慢的網站是一個大問題。

解決這個問題的一種方法是通過壓縮。Minification，即不影響其功能下通過壓縮某些檔案（例如 CSS、JavaScript和HTML檔案）以縮小其大小的過程。最好的部分是縮小您的檔案，您甚至不需要任何編碼知識。

什麼是Minification（以及為什麼它很重要）

網際網路上的每一秒都很重要。隨著網站變得更加優化，人們已經準備好期待快速的載入時間。事實上，幾乎一半的網際網路使用者希望網站在兩秒或更短的時間內載入。

當一秒鐘的延遲會導致轉化率減少7%時，停留在緩慢的網站上可能會被判死刑。幸運的是，有一些補救措施可以幫助您加快網站速度，特別是壓縮。

這是指壓縮層疊樣式表 (CSS)、JavaScript和HTML 程式碼以縮小檔案大小而不影響其功能的過程。您可能沒有意識到這一點，但許多讓您的網站保持執行的檔案也可能是您載入時間更長的原因。

從表面上看，這個過程可能聽起來過於技術性，但它非常簡單。它只涉及從程式碼中刪除不必要的字元。

讓我們看一個例子。以下是一個未經壓縮的CSS片段：

#bluetext {
font-size: 2em;
color: blue;
}

#redtext {
font-size: 1em;
color: red;
}

經過壓縮後程式碼如下：

#bluetext{font-size:2em;color:blue;}#redtext{font-size:1em;color:red;}

如果您檢查壓縮後的程式碼，您會看到所有必需的資訊仍然存在，但換行符、空格和一些字元已被刪除。這些元素不是計算機理解程式碼所必需的，它們的存在只是為了使程式碼對人類更具可讀性。

這種微小的更改似乎不會產生很大的影響，但請考慮一下您在站點的引擎蓋下執行了多少行程式碼。縮小可以顯著減小每個檔案的大小，從而使您的網站載入速度更快。如果您的站點包含大量檔案、指令碼和外掛，則尤其如此。

我們現在將研究兩種可用於壓縮程式碼的方法，手動和使用專用外掛。

如何手動壓縮CSS和JavaScript

手動壓縮可讓您使用專用應用程式快速壓縮CSS和JavaScript程式碼。這使您能夠首先編寫易於閱讀和解釋的程式碼，然後在幾秒鐘內使用工具將其壓縮。

我們建議使用工具，例如CSS Minifier或Clean CSS。與JavaScript 類似，雖然Minify是一個很好的起點，但還有其他選擇，例如JSCompress和JavaScript Minifier。

這些工具都將以相同的方式工作。例如，使用Clean CSS，您將原始程式碼貼上到相關欄位中，然後單擊CSS Minify。您將在另一個欄位中看到結果，可以進行復制和貼上。

但是，我們建議分別儲存兩個版本的程式碼；否則，您可能會丟失原始程式碼。當然，原始版本比縮小版本更容易進行故障排除和編輯。

如果您對自己的編碼能力有信心，您也應該只使用手動縮小。如果您沒有很多經驗，我們建議您改用WordPress壓縮外掛，，下面我們將推薦其中的兩個。

WordPress檔案壓縮外掛

我們還可以使用WordPress外掛來壓縮保持網站執行的CSS和JavaScript檔案。由於這些檔案屬於網站前端載入極其重要的部分，您應該確保只使用受信任且安全的外掛。

1.Fast Velocity Minify

Fast Velocity Minify是新手和有經驗的使用者的絕佳選擇。預設情況下，它會自動壓縮您網站上的所有CSS、JavaScript和HTML程式碼，並且不需要額外的配置。但是，如果您想修改細節，它還提供了大量其他選項。

• 需要最少的配置並實時自動執行。
• 為高階使用者提供廣泛的選項。
• 出色的結果和可靠的支援。

最為重要的一點是，Fast Velocity Minify是開源且完全免費的。

2. Autoptimize

Autooptimize是比較流行的壓縮外掛之一（有充分的理由）。它會將您的檔案捆綁在一起，優化它們並快取它們以儘可能少地建立對站點的請求。雖然它確實提供了一些額外的選項，但這個外掛非常適合那些想要“一勞永逸”的縮小方法的人。

• 初學者容易掌握。
• 提供更多選項以獲得更優化的效能。
• 使用專用 API 啟用更具體的自定義。

Autooptimize外掛是免費的，但開發人員還提供高階配置服務，包括為您的站點量身定製的個人安裝和優化。這些費用分別為119歐元和599歐元。

如何使用外掛壓縮WordPress檔案

現在您已經熟悉了可用的工具，剩下要做的就是壓縮WordPress站點的檔案。在這個例子中，我們選擇使用Fast Velocity Minify外掛。這是因為它對於初學者來說很容易實現，同時仍然為高階使用者提供了大量的可選配置。我們甚至在我們的知識庫中推薦它！

一旦你已經安裝並啟用外掛，你不需要做別的事情-你的網站現在可以縮小。

下次有人訪問您的網站時，該外掛將攔截您的檔案並建立它們的副本。然後它將檔案分組以減少所需請求的數量，然後縮小程式碼。這些優化的檔案隨後會儲存在快取中，並在再次訪問該站點時使用。這意味著您的原始檔案仍會儲存且不受影響。

如果您是更有經驗的使用者，該外掛確實提供了一些高階設定。您可以通過在 WordPress 中轉到“設定”>“Fast Velocity Minify”找到設定選項 。

在其他選項中，您可以禁用某些檔案的壓縮、從程序中排除特定資產以及確定快取的位置。每個選項都帶有附加資訊和建議的註釋，您還可以 參考常見問題解答 以獲取更多資訊。

但是，我們建議保留所有預設設定，除非您確切地知道自己在做什麼。該外掛設定為使用標準設定自動壓縮所有CSS、JavaScript和HTML 程式碼，這足以對大多數網站產生積極影響。

小結

壓縮您的WordPress檔案是一種提高網站效能的快速而簡單的方法，這反過來又可以確保您不會因載入時間過長而失去訪問者。這似乎是一個技術噩夢，但正如我們在本文中所展示的，您實際上並不需要通過JavaScript瞭解CSS來壓縮WordPress檔案。

除了WordPress網站檔案壓縮以提升WordPress效能之外，我們還可以使用的策略包括：壓縮WordPress圖片，使用Gzip壓縮，WordPress快取及依據PageSpeed Insights指引優化WordPress。