改善 WordPress 網站的頁面加載時間

如果您曾經在 WordPress 上進行過任何開發，那麼您可能會遇到一個緩慢的主題，它無緣無故地加載大量文件，產生一個緩慢的網站和一個大問題。 構建一個設計精美但運行緩慢的網站可能會令人非常沮喪。 這種緩慢會影響所有相關人員和每個人——包括您自己、您的業務和您的聲譽。

在 Go Fish Digital，我們經常被要求解決頁面加載時間問題，我們以多種方式這樣做。 那麼，如何減少 WordPress 主題或網站的加載時間？ 我在下面概述了幾個有助於解決這個問題的技巧：

發現問題

首先要做的是確定是什麼導致您的 WordPress 網站加載緩慢。 是大圖像、大量 HTTP 請求、Javascript 文件還是以上所有內容？ 找出答案是你的工作。

查找此信息的最簡單方法是使用瀏覽器的內部工具。 如果您使用的是 Chrome，請導航到有問題的頁面，然後按 Command + Alt/Option + J（對於 Mac）、Ctrl + Shift + C 或 F12（對於 Windows），或者只需右鍵單擊頁面並選擇“檢查” 。 這將調出您的“檢查員”。 您將看到類似以下內容：

你的可能會變小——這是正常的。 您只需要拉伸窗口以適應更多信息。 如果需要，您甚至可以將檢查器停靠在窗口的不同部分，或者將其作為自己的窗口彈出。 現在，您需要導航到頂部中間區域的“網絡”選項卡。 您應該會看到如下所示的內容：

此時，您可能看不到此部分中的任何內容。 如果發生這種情況，只需刷新頁面即可。 隨著頁面數據的加載，您將開始看到此窗口填充了各種條目。 這些將是各種文件和與網絡相關的調用，可以對其進行微調以加快加載時間。

按文件/調用加載時間最長的條目對條目進行排序後，您將開始看到圖像、Javascript 和 CSS 文件等項目。 這是正常現象，這也是您最初要關注的內容。

注意：有時，問題在於從不同網站收集資產（如 Facebook/Twitter 小部件、廣告等）。 在這些情況下，您需要諮詢您使用的第三方，以找出減少加載時間的獨特方法。

縮小所有的東西

縮小是在不影響瀏覽器處理所有內容的情況下刪除冗餘或不必要數據的過程。 我將從這裡開始解決網站的大部分問題。 通常，當您瀏覽“網絡”選項卡時，您會看到大量 CSS 文件。 每次瀏覽器必須去服務器檢索 CSS 文件或 Javascript 之類的內容時，都會導致更多的加載時間。 即使單個文件比單獨的多個文件大，單個文件的加載速度也會更快，因為服務器請求較少。 以下是一小部分插件，可幫助您將這些 CSS 和 Javascript 文件壓縮到一個可供訪問者管理的單一下載文件中：

• 自動優化
• 合併 + 縮小 + 刷新
• 快速速度縮小
• Minqueue（它有點過時了，但它仍然運行良好！）

Autooptimize 是一個非常簡單且有用的插件的一個很好的例子，它可以減少頁面加載時間。 我們的 Web 開發團隊已經在多個網站上使用了它，我們已經看到了很好的結果。

要記住的一件事是，壓縮您網站上的所有 Javascript 可能會導致其他插件（如 WooCommerce）出現一些困難，因此請保持警惕！

圖像壓縮和延遲加載器

創建慢速網站的另一個常見問題是桌面和移動設備上的大量圖像加載。 如果您查看之前的網絡選項卡並看到您加載了大量圖像，那麼這部分適合您。 幸運的是，有一些插件可以幫助我們壓縮圖像。 我推薦以下內容：

• 斯穆希特
• 小PNG
• ShortPixel 圖像優化器

但是，要手動壓縮主題中的圖像，我只需要使用 TinyPNG。 此工具會生成一個包含所有新壓縮圖像的 zip 文件。 然後，您可以將這些文件上傳到您的主題中以覆蓋現有圖像。

你聽說過懶加載嗎？ 延遲加載是一種 Javascript 技術，它僅在您的用戶實際看到時才在您的頁面上加載圖像。 這是一個非常方便的功能，有一些插件可以實現它：

• BJ 懶加載
• WP Rocket 的延遲加載

安裝完插件後，刷新頁面並確保查看網絡選項卡以進行更改。

注意：定期重新優化和刷新站點上的所有圖像是個好主意。 這裡有一個很酷的小插件。

緩存插件

緩存頁面是 Web 開發和 Web 優化的一個非常重要的部分。 緩存主要存儲各種響應、文件和其他信息，以便以後快速重用。 你可以在這裡閱讀更多關於它的信息。 長話短說，整個應用程序/網站都有不同級別的緩存，影響從服務器到訪問的實際網頁的所有內容。

WordPress 使用下面的插件，可以呈現數據並將其存儲起來，以供其他訪問者訪問您的網站時使用。 這將有助於極大地加速您的網站。 我推薦以下緩存插件（請務必與您的託管解決方案討論他們更喜歡的）：

• W3 總緩存
• WP 超級緩存
• Sucuri 安全和其他 Sucuri 服務
• 來自託管服務提供商的內置緩存（WP Engine 就是一個很好的例子）

內容交付網絡 (CDN)

想像一下，您正試圖給鄰居寫一封信。 你很可能會走出家門，把信貼在對方的郵箱裡，這根本不需要你花太多時間或精力。 現在，想像一下你的信是否需要寄給另一個國家的人。 您將不得不經歷一個更長且艱鉅的過程，例如去郵局、購買郵資，然後等待數天以確保收件人收到了。 當您請求某人的網站時，本質上就是這樣。

內容分發網絡 (CDN) 就像來自其他國家/地區的某人正在從您的隔壁訪問您的網站一樣。 世界各地安裝了大量計算機，上面有您的網站資產，可以將它們提供給比您更親近的人。 這大大減少了頁面加載時間，並允許在您的服務器上進行更好的優化。 CDN 還有其他好處，您可以在本文中閱讀。 CDN 有幾項很棒的服務，包括但不限於：

• 雲耀斑
• AWS 雲前線
• CDN77
• 堆棧路徑
• 等等。

那麼，假設您是一名開發人員並且您已經嘗試了所有這些不同的選項——是否可以進行更多微調？ 我想提交一個我在幾個網站上使用過的方法。

用代碼控制所有輸出

注意：如果您不熟悉開發，文章的以下部分可能會導致您網站的前端出現問題。 最好不要在生產服務器上這樣做，直到您對這個想法背後的過程和理論充滿信心。 僅當您確切地知道前端在 Javascript 和 CSS 方面想要什麼時才這樣做。

在開始進一步壓縮和優化代碼之前，您應該確切地知道要加載到頁面中的 CSS 文件和 Javascript 文件。 目前，L OAD自己的壓縮JavaScript文件和CSS文件到頁眉和頁腳，並關閉所有的JavaScript和CSS文件WordPress的輸出。 你可以在以下兩個鉤子中做到這一點：

上面的代碼片段通常位於主題文件夾中的header.php文件中，它輸出所有標題代碼，您可以在其中包含 Javascript、CSS 等。 您可以在 WordPress 的 Codex 中閱讀更多相關信息。 WordPress 注入代碼的另一個地方是在頁腳中。 您可以在主題的footer.php文件中看到這一點。 您也可以在 codex 中閱讀有關此內容的信息。 鉤子將是以下代碼片段：

接下來，您需要控制主題中的所有 Javascript 和所有 CSS。 為此，您必須全面告訴 WordPress 不允許輸出 Javascript 和 CSS 文件。 一個主題通常會在它們各自的functions.php文件中註冊這些文件，但是您需要告訴WordPress 不允許在頁眉或頁腳中的任何一個在您的functions.php 文件中註冊。 每個主題都應該有那個functions.php文件，所以找到你的（或者把它放在你主題的根目錄中）並將以下代碼添加到你的functions.php文件中：

如果您刷新頁面，您應該看到，在大多數情況下，沒有加載任何 javascript 文件。

提示：所有的 Javascript 都應該在頁腳中加載，而 CSS 則在網站的頁眉中加載。 這允許瀏覽器在開始使用 Javascript 之前首先呈現網站的結構。 通常，這會為用戶帶來最佳體驗。

如果您現在刷新頁面，您將看到一個非常混亂的站點，因為沒有輸出任何 CSS 文件。 那就是你想要的。 現在，您將通過將文件放置在所有這些 Javascript 和 CSS 文件的位置來控制一切。

因此，假設您知道要加載哪個樣式表。 它可以是 Gulp 或 Grunt 的壓縮輸出，位於(theme)/assets/build/CSS/main.css或類似文件夾中。 它甚至可以是主題文件夾根目錄中的style.css文件。 無論哪種方式，您都希望輸出主樣式表。 這是代碼（編輯它以匹配文件的位置和名稱）：

所以，現在假設您已經以與壓縮 CSS 相同的方式壓縮了一個 Javascript 文件。 您現在可以將 Javascript 加載到您網站的頁腳中，如下所示：

重新加載頁面，現在您應該能夠在源代碼中找到每個文件。 這可確保您的functions.php 文件中的PHP 代碼正常工作。 您現在可以檢查網絡選項卡，看看您是否在總體負載大小和時間方面有所改進。

結論

要記住的最重要的事情是修復頁面加載問題是絕對有可能的，但這需要創造性的問題解決和一些研究。 請記住仔細查看瀏覽器自帶的工具，以幫助您找到問題。 然後，看看前面提到的插件，以及為公共消費製作整潔、格式良好的網站的策略。 你能行的！

在下面的評論中告訴我我的提示是否幫助您改善網站的加載時間。