如何通過縮小來提高 WordPress 網站的性能

已發表: 2018-11-19

網站速度仍然是幾乎所有網站所有者長期關注的問題。雖然有幾種方法可以提高網站的速度，但有一種經常被忽視（但非常有效）的技術需要考慮——縮小。

簡單來說，縮小會優化您網站的代碼，使其尺寸更小，運行效率更高。雖然這似乎是一個小問題，但它實際上非常有效。

在本文中，我將向您介紹縮小的概念及其工作原理。我還將向您展示幾種方法，您可以自己使用此方法，甚至無需接觸代碼。讓我們開始吧！

“縮小”簡介（以及它如何幫助您）

該博客之前多次討論過保持網站快速運行的重要性。因此，您可能已經知道可以優化網站速度的幾種方法。今天，我將討論另一種方法。

您會看到，加載時間過長的潛在原因之一是代碼編寫效率低下。大多數網站所有者如今很少（如果有的話）需要編寫任何代碼，因此您甚至可能無法判斷您的代碼是否導致您的網站運行緩慢。但是，通過使用稱為縮小的過程，您可以忽略它。

如果您不是編碼員，這可能看起來非常複雜，但不要擔心。縮小實際上是一個簡單的過程，只涉及優化 CSS、HTML 和 JavaScript 代碼。稍後我將向您展示如何在不需要任何編碼技能的情況下實現這一目標。然而，在此之前，讓我們看看它在實踐中是如何工作的，使用下面的 CSS 片段：

h1 {
    background-color: blue;
}

h2 {
    background-color: red;
}

p {
    background-color: black;
}

即使對 CSS 有點熟悉，這也很容易理解。它只是指定應將哪種樣式分配給頁面上的不同元素。這是因為代碼被編寫為人眼可讀。為此，使用換行符和額外的空格來使代碼的每個部分都清晰定義並且更易於掃描。

然而，這實際上並不是計算機需要理解和運行代碼的東西。事實上，額外的字符使代碼“更重”，因此計算機讀取和執行需要更長的時間。因此，您可以將縮小視為將人類友好代碼轉換為機器友好代碼的過程。

如果你要縮小這段代碼，它會變成這樣：

h1{background-color:blue}h2{background-color:red}p{background-color:black}

該代碼實際上包含與上述代碼完全相同的功能，但去掉了所有不必要的部分。雖然看起來沒有什麼大的區別，但縮小後的代碼實際上比原始代碼輕了 36%。如果您想像同樣的原則適用於您頁面上的所有代碼，您可能會看到從長遠來看這可能是多麼有效。

那麼，您實際上是如何做到的呢？有幾種方法可供您使用，我將在本文中介紹它們。首先，讓我們看看如何手動縮小代碼。

如何手動縮小代碼

縮小代碼的一種方法是自己做。如果您正在編寫自己的代碼，例如創建主題或插件時，這將特別有用。但是，根據數量的不同，使用細齒梳子檢查代碼可能會很費力，如果不是不可能的話。

幸運的是，有很多工具可以幫助您在幾秒鐘內生成縮小代碼。一個這樣的例子是 Minify，它適用於 CSS 和 JavaScript：

只需將要壓縮的代碼粘貼到文本框中，單擊“縮小”，代碼就會立即以新形式返回。您甚至會看到新版本與原始版本相比輕了多少的摘要：

當您需要縮小 HTML 代碼時，我推薦使用 HTML Minifier：

我特別喜歡這個工具，因為它提供了很多關於如何壓縮代碼的選項，而且它也是谷歌批准的。您可以使用右側的設置來根據自己的喜好定制最終輸出。

雖然手動縮小代碼當然很有用，但大多數時候您可能希望自動化該過程。接下來，我將看看你如何做到這一點。

前端的小細節真的會減慢速度……而且有這麼多插件、主題和技術協同工作，可能很難知道從哪裡開始。我們的 Performance Insights Add-on 可讓您深入了解您網站的高性能和低性能方面。從那裡，我們更進一步，直接從我們的專家團隊為您提供建議的操作，讓您確切地知道在哪里以及如何提高您的網站速度！在這裡了解更多。

3 個 WordPress 插件可幫助您自動縮小代碼

到目前為止，實現縮小的最簡單方法是使用 WordPress 插件為您完成這項工作。這樣的插件會在調用時自動縮小您的代碼。

這意味著您可以縮小代碼而無需自己查看。考慮到這一點，讓我們看看一些最好的縮小插件！

1.自動優化

如果您擔心縮小將是一個複雜的過程，那麼 Autooptimize 是完美的對位。這是一個“一勞永逸”的解決方案，它將自動縮小您網站的所有腳本，而無需您進行任何輸入。您只需安裝並激活插件，剩下的就交給它了。但是，如果您確實希望進入技術方面，該插件還提供了幾個高級配置選項。

主要特點

使用簡單，無需配置。
自動縮小和壓縮您網站上的所有腳本。
將所有樣式移動到站點標題以獲得最佳性能。

定價：該插件是免費的，Autoptimize 還提供高級套餐，起價為 119 歐元，約合 138 美元。

2. 快速縮小

所有這些插件的運行主題是簡單。與之前的產品一樣，Fast Velocity Minify 開箱即用。通過將您的代碼和腳本壓縮到最少數量的文件中，該插件可確保您的 CSS 和 JavaScript 盡可能高效地交付。它還包括許多配置設置，包括可選的 HTML 縮小。

主要特點

縮小腳本文件以減少 HTTP 請求的數量。
使用默認設置提供即插即用功能。
合併和優化谷歌字體。

定價：該插件完全免費，不需要高級計劃。

3.合併+縮小+刷新

Merge + Minify + Refresh 是另一個開箱即用的縮小插件。雖然它的功能與 Autooptimize 非常相似，但它是一個特別輕量級的替代方案。由於縮小過程的工作方式，該插件提供了最小的減速，並且不需要您手動清除緩存（與其他解決方案不同）。

主要特點

自動縮小和組合您的腳本文件。
使用 wp-cron 最小化縮小過程中的減速。
與 WordPress 多站點設置兼容。

定價： Merge + Minify + Refresh 可免費下載和使用，沒有可用的高級計劃。

結論

在優化您的網站時，使用您可以使用的所有方法非常重要。其中之一是縮小，它使您能夠壓縮代碼以使其更高效而不會影響其功能。

在本文中，我討論瞭如何使用我推薦的插件之一在自己的網站上使用縮小：

自動優化。強大而簡單，為有經驗的用戶提供額外的設置。
快速速度縮小。一個可靠的選擇，對初學者和開發人員都非常有用。
合併+縮小+刷新。快速可靠，有助於確保始終保持良好的性能。

您對使用縮小來加速您的網站有任何疑問嗎？在下面的評論部分讓我知道！

使用我們的免費指南將您的網站性能提升到一個新的水平！

這個免費指南包含八個簡單的步驟，您可以使用它來提高您今天的 WordPress 網站的性能和速度。它涵蓋了從優化圖像、JavaScript 和 CSS 等 Web 資產到執行全面的插件審計的所有最佳 WordPress 性能實踐。

立即下載！