如何使用插件使您的 WordPress 網站加載更快

如果您想吸引讀者的注意力，擁有一個包含大量精彩內容的漂亮網站非常重要。 不幸的是，如果您的頁面加載速度太慢，讀者可能永遠看不到您的內容。 為什麼？ 您只有幾秒鐘的時間來吸引他們的注意力並阻止他們轉移到下一個站點。 讀者不想等待您的內容加載。 等待的時間越長，您失去它們的可能性就越大。

因此，優化頁面加載速度非常重要。 在線有幾個很好的工具可以幫助您測量速度和解決問題。 最受歡迎的工具之一是 Google PageSpeed Insights。

PageSpeed 見解

Google PageSpeed Insights 是一款免費使用的在線工具，可以測試任何網站的加載速度、識別問題、確定問題的優先級，並提供解決這些問題的建議。

對於這篇文章，我使用我自己的網站，它使用來自 Elegant Themes 的 Divi 作為基本博客。 我正在展示需要修復的內容、該工具提出的建議以及我如何修復它們。 該分數給出了移動和桌面的結果。 我專注於桌面。 一些移動問題將在此過程中得到解決。

大多數這些問題將通過使用插件來解決。 在決定插件時，請堅持使用最近更新並具有良好聲譽的插件。 許多插件將解決不止一個問題。

提醒一句——有些插件不能很好地與其他插件配合使用，因為它們都試圖做同樣的工作。 這可能與想要的效果不同。 我建議在您的主站點上使用它們之前在測試站點上試用它們。 不僅是插件本身，還有插件組合。 在您的實時站點上嘗試插件之前，請確保您有最近的備份。

我的分數

我的分數是可怕的 46 。 首先要注意的是結果中有三個不同的部分：

• 應該修復（2 項）
• 考慮修復（6 項）
• 通過（2 項）

每個部分都會展開以顯示問題所在，並就如何解決這些問題提供建議。 我發現最好從第一個項目開始並按順序進行。 按順序解決它們也將解決列表中的其他問題。

注意——我什至在此過程中遇到了一些失敗。 我將它們包括在內，以便您了解可能存在的問題。

應該修復

我有兩個需要立即關注的項目：

• 啟用壓縮
• 消除首屏內容中的渲染阻塞 JavaScript 和 CSS

啟用壓縮

我最重要的問題是我沒有使用壓縮。 它表明我可以將文件傳輸大小減少 79%。 這可以使用 gzip 或 deflate 來完成。

WP 性能得分助推器

這個免費的插件具有 gzip 壓縮，並且將通過刪除查詢字符串、添加變量：accept-encoding 標頭和設置過期緩存來解決其他幾個問題，例如 CSS 和 JavaScript 問題。 我選擇它是因為它的 4.7/5 有超過 10,000 次活動安裝。 它的開發是為了加快頁面加載和改進頁面分數測試。

這給了我一個 78 分的消息，以減少服務器響應時間。 這與我的託管計劃有很大關係。 我正在通過將我的網站移至新的託管計劃來解決此問題。 這超出了本文的範圍。

一個很酷的事情是它解決了下一個問題的一些主要問題：消除首屏內容中的渲染阻塞 JavaScript 和 CSS。 此問題現已移至考慮修復。 它還完全修復了 Leverage Browser Caching。 該網站現在通過了 4 條規則，而之前只通過了 2 條。

減少服務器響應時間

奇怪的是服務器響應時間從 0.96 上升到 1.4。 減少服務器響應時間現在在應該修復中。 這需要一個緩存插件。

W3 總緩存

W3 Total Cache 是迄今為止最流行的加速網站服務器性能的插件。 它有近一百萬的活躍安裝，評分為 4.4/5。 它通過緩存優化您的網站。 您可以單獨選擇不同的緩存選項。 它們包括頁面、數據庫、對象和瀏覽器。 它將緩存未來過期的標頭和實體標籤、提要和搜索結果。 它還具有縮小 JS、CSS 和 HTML 的功能。 完全配置後，它將使您的 Google PageSpeed 得分至少提高 10 倍。

我在打開所有緩存功能的情況下進行了嘗試。 這使我的分數達到 86 。 我的網站第一次處於綠色狀態，我遇到的所有問題都在考慮修復。 它現在通過了 5 條規則，包括服務器響應時間，現在說“服務器響應迅速”。

考慮修復

當我第一次運行測試時，這部分的問題比我最終得到它時要多。 當我在“應該修復”區域修復問題時，其中許多問題都得到了解決。

最初包括的問題：

• 利用瀏覽器緩存
• 服務器響應時間
• 縮小 JavaScript
• 優化圖像
• 縮小 CSS
• 縮小 HTML

以下是當前存在的問題。

消除首屏內容中的渲染阻塞 Javascript 和 Css

首屏的 JavaScript 和 CSS 可以通過在瀏覽器上放置過多的負載來減慢頁面加載速度。 它們必須先加載，然後才能加載折疊上方的其他任何東西。

有幾種方法可以修復它：

• 延遲加載
• 異步加載
• 將它們直接內聯到 HTML

這是我用來解決此問題的插件。

自動優化

該插件將縮小（刪除所有不必要的格式並減小文件大小並在瀏覽器上加載）並壓縮您的 JavaScript、CSS 和 HTML。 它將添加過期標頭並緩存它們。 它會將您的樣式移動到頁眉並將腳本移動到頁腳。 使用高級設置，您可以根據您的特定需求對其進行調整。

這也將解決一些問題，例如縮小列表中的 JS 和 CSS。

起初我只是打開了 HTML、JS 和 CSS 的基本設置。 這使我的分數達到 88 ，並將問題減少到 3 個 CSS 資源。 一個是由插件本身創建的，另外兩個是谷歌字體。 它現在通過了 7 條規則。 它解決了 Minify CSS 和 Minify HTML。

更好的 WordPress 縮小

這個插件的主要目的是縮小你的 CSS 和 JS，但它還有一個很酷的功能，可以讓你將文件移動到頁腳或其他位置（這就是我選擇它的原因）。 它使用排隊系統來提高與瀏覽器、插件和主題的兼容性。

當我安裝它時，我的主題的所有佈局設置都被刪除，我的所有菜單、圖像、鏈接等都出現在屏幕的最左側。 幸運的是，當我卸載它時，格式返回了。 這可能是設置中需要調整的東西。 我確信這是一個很好的插件，因為它有超過 60,000 次活動安裝和 4.4/5 的評分。 我只包含這個作為警告，如果沒有一些設置，它可能無法按照您需要的方式工作。

因為我的分數是 88 並且我知道這 3 個問題是什麼，所以我決定繼續下一個問題。

優化圖像

圖像大小在頁面加載速度中起著重要作用。 有時，您可以使用更小的圖像尺寸和更低的質量，而在 Web 上查看時不會有太大的視覺差異。 這不僅加快了加載時間並使用更少的帶寬，而且還加快了備份時間並減少了服務器上的存儲空間。

EWWW 圖像優化器

這個插件會在你上傳圖片時自動優化你的圖片，並將你​​的圖片轉換為產生最小尺寸的格式。 它還將優化您已經上傳的圖像。 您還可以讓它對 PNG 和 JPG 圖像應用有損減少。

當我安裝它時，它希望我找到並安裝幾個文件。 我認為這個插件適用於所有安裝的文件，但我決定找到一個開箱即用的插件。

WP Smush

該插件將在不降低質量的情況下減小圖像的文件大小。 它通過去除隱藏信息來做到這一點。 它將分析您的文件並告訴您需要刪除多少圖像。 您可以將它們大量塗抹。

免費版不會壓縮超過 1 MB 的任何內容，一次只能壓縮 50 個。 不僅如此，您還需要 WP Smush Pro，它可以將圖像壓縮到 32 MB，一次沒有數量限制。 如果您需要，它會備份原件。 價格從每月 19 美元起。

我有 114 張圖像需要處理。 其中 8 張圖片超過 1 MB。 我決定手動修復這些。 它粉碎了 98 張圖像並將文件大小減少了 4.79 MB (8.82%)。

這使我的分數達到了 90 。 Google Insights 確定了 5 張它不喜歡但沒有超過 1 MB 的圖片。 它們的範圍從 0.7 KB 到 17 KB。

手動優化圖像

您可以通過調整大小、降低質量和更改格式來手動優化圖像。 我最喜歡和最常用的處理圖像的工具之一是 Paint.NET。 這是一款適用於 Windows 的免費圖像和照片編輯應用程序，具有許多減小文件大小的功能。 你最喜歡什麼？

縮小 JavaScript、CSS 和 HTML

我以為我解決了這個…

當我處理其他問題時，我看到唯一要縮小的消息是 JavaScript。 一旦我優化了我的圖像，所有三個問題都會返回。 我回溯我的腳步，想知道發生了什麼。

通過嘗試 Better WordPress Minify 然後將其關閉，我縮小 CSS 和 HTML 的消息又回來了。 我的分數下降到 88 分，現在我又回到了 5 條通過規則的狀態。 我打開了 W3 Total Cache 的縮小功能，現在它通過了所有縮小問題。 我現在的分數是 88，它通過了 8 條規則。 此外，它還有六個文件。 我知道我已經解決了其中的一些問題，所以我一定改變了一些東西。

我進行了一些故障排除，發現當我早些時候遇到 Better WordPress Minify 的問題時，我已經關閉了 Autoptimize。 我重新打開了自動優化，從 W3 Total Cache 中關閉了 minify，並清除了緩存（非常重要的一步！）。 我現在得到了 90 的分數，並且該網站通過了 8 條規則。 它回到了首屏的三個 CSS 文件和優化圖像的消息。

根據我過去的經驗，我決定不在這些文件上浪費時間。 我認為谷歌討厭任何尺寸的圖像（無論我得到它們多小，我仍然會收到減小尺寸的消息）並且從 46 到 90 的 PageScore 是我書中的勝利。 我已經學會了在你領先時停下來的艱難方法。

最終得分

我的最終分數是 90/100。 我用來獲得這個分數的插件是：

• 自動優化（打開所有功能）
• W3 Total Cache（僅開啟頁面緩存功能）
• WP Performance Score Booster（所有功能已打開）
• WP Smush（免費版）

根據記錄，移動分數從 36 到 78。要修復它，我必須針對移動優化我的圖像和文件。

最後的想法

您的訪問者、Google 和其他搜索引擎討厭加載緩慢的網站。 使用 Google PageSpeed Insights，您可以準確了解問題所在，並獲得有關如何解決這些問題的提示。 從谷歌討厭的慢速網站到谷歌喜歡的快速網站，你只需要幾個免費插件。 只是要小心試驗——有些插件不能很好地與其他插件配合使用。

我想听聽你的意見。 您是否使用 Google PageSpeed Insights 優化了您的 WordPress 網站？ 你的經歷和我一樣嗎？ 您是否使用不同的插件來解決問題？ 我想在評論中聽聽你的經歷。