如何在 WordPress 上發出更少的 HTTP 請求並加速您的網站

您是否正在經歷一個緩慢的 WordPress 網站？ 太多的 HTTP 請求可能是問題的根源。 通過減少 HTTP 請求來減少您網站的頁面加載時間，可以提高用戶訪問該內容的速度並影響他們的整體 Web 瀏覽體驗。 頁面加載速度很重要，它直接影響用戶使用應用程序或網站的感受。

但是什麼是 HTTP 請求？ 每頁應該做多少？ 您目前正在處理多少個請求？ 留在我們身邊：在本文中，我們將定義 HTTP 請求，解釋它們為何重要，如何衡量它們以及如何保持它們低。

什麼是 HTTP 請求？

HTTP 是一種用於在 Internet 上傳遞內容和數據（HTML 文件、CSS、圖像、視頻等）的通信協議。 萬維網是一個廣闊的地方，大量信息託管在服務器上，對吧？ 如果您想訪問此內容，您的瀏覽器需要發送請求並接收響應。 沒有請求，您和服務器之間就沒有有效的通信。

HTTP 請求也可以看作是用戶和服務器之間的通信層。 客戶端發送的消息稱為 HTTP（超文本傳輸協議），它有助於將請求消息有效地結構化為三個部分：請求行、標頭和正文。

如您所見，每次訪問站點時，都會發出一些 HTTP 請求來顯示內容。 因此，在頁面上發出的 HTTP 請求越多，加載所需的時間就越長。

您可能想知道，有多少 HTTP 請求是“太多”的 HTTP 請求？ 讓我們回顧一些關鍵數據，以便您知道在哪裡放置 WordPress 網站：

• 出色的性能：每頁的 HTTP 請求數低於 25
• 健康的性能：將 HTTP 請求保持在每頁 50 個以下
• Web 上的平均 HTTP 請求： 70 個 HTTP 請求

保持網站健康很重要，因為過多的 HTTP 請求會減慢您的網站速度。 我們將在下一節中解釋原因。

為什麼應該減少 HTTP 請求

您應該減少 HTTP 請求以保持出色的速度和性能。 雅虎表示“80% 的最終用戶響應時間都花在了前端”。 換句話說，您的性能主要受圖像、樣式表和腳本的影響，這些都是通過 HTTP 請求呈現的。

它們是顯示內容的關鍵組件，但在服務器和用戶之間來回聊天需要時間來加載。 這種數據往返稱為往返響應時間 (RTT)：

減少 HTTP 請求的另一個原因是保持 Core Web Vitals 健康，尤其是最大內容繪製 (LCP) KPI。

LCP 確定第一個有意義的內容加載的速度。 這一切都與用戶的速度感知有關。

三個因素會影響您的 WordPress 網站的 LCP 分數：緩慢的服務器響應時間、阻塞渲染的 JavaScript 和 CSS，以及緩慢的資源加載時間。 因此，減少 HTTP 請求的數量是加快頁面速度的關鍵。 您的網站發出的 HTTP 請求越少，它向用戶加載最重要內容 (LCP) 的速度就越快。

總結一下：

請記住，如果用戶可以更快地訪問您的內容，您就會增加讓他們留在頁面上並與您的網站互動的機會。 互動還意味著他們可能會購買您的產品……您不僅可以避免訪問者的挫敗感，而且 Google 也會喜歡您的網站。

這將我們帶到下一個關鍵問題：您的WordPress 網站發出了多少 HTTP 請求？

如何測試和測量您網站的 HTTP 請求

有一些在線工具可以在您的 WordPress 網站上模擬 HTTP 請求，即：

• GTmetrix（您需要有一個免費帳戶才能訪問您的頁面詳細信息）——只需輸入您網站的 URL，運行審核並打開“摘要”選項卡。 向下滾動到最後一個名為“頁面詳細信息”的部分，以了解您的頁面發出了多少請求。

瀑布選項卡是查看單個 HTTP 請求在您的站點上花費多長時間的好方法：

您還可以查看來自特定插件的 HTTP 請求，例如 Elementor：

• Pingdom — 只需將您的 URL 放入框中，即可查看您的頁面需要多少 HTTP 請求：

• Query Monitor — 一種免費的調試工具，用於識別減慢頁面加載速度的插件或腳本。 HTTP API 調用面板顯示有關在頁面加載期間執行的 HTTP 請求的信息。

減少對您網站的 HTTP 請求的 10 種方法（手動和使用插件）

更少的 HTTP 請求意味著要下載的字節更少，但啟動此優化可能會令人生畏。 不用擔心。 感謝我們下面的技術列表，您將能夠減少您的 HTTP 請求。 對於每種策略，我們將始終提供兩種解決方案：使用 WordPress 插件和手動解決方案。

1. 結合 CSS 和 JavaScript

影響：高

減少 HTTP 請求的一種簡單方法是組合多個 JS 和 CSS 文件。

使用您的 WordPress 主題和插件，需要加載許多 CSS 樣式表和 JS。 這需要瀏覽器加載所有這些資源來呈現網頁，這意味著多個 HTTP 請求。

使用在線工具結合 CSS 和 JS：

• Minify — 合併多個 CSS 或 JavaScript 文件。
• 結合——PHP 腳本結合 URL 重寫來連接和壓縮 CSS 和 JavaScript 文件。
• csscompressor.net（僅限 CSS）— 在線 CSS 壓縮器，快速且免費使用。
• jscompress.com（僅限 JS）— 這個 JavaScript 壓縮工具允許您將 JavaScript 文件合併到一個文件中。
• SmartOptimizer — 一個 PHP 庫，通過使用串聯技術優化前端來提高您的網站性能。
• CSS-JS-Booster — 連接、縮小和壓縮 CSS 和 JavaScript 文件。
• CSS Crush - 連接和縮小 CSS 文件。
• csscompressor.net（僅限 CSS）— 在線 CSS 壓縮器，快速且免費使用。
• jscompress.com（僅限 JS）— 這個 JavaScript 壓縮工具允許您將 JavaScript 文件合併到一個文件中。

將您的新組合 CSS 和 JS 文件上傳到您的 WordPress 網站：

我們的目標是將所有單獨的請求放在一個文件中。

• 只需將所有 CSS 代碼複製/粘貼到一個主文件中，然後將文件重新上傳到服務器（僅當您對 WordPress 文件感到滿意時才這樣做）
• 如果您使用 C 面板：
  • 登錄到您的 cPanel
  • 轉到您的“文件管理器”
  • 單擊包含您的 WordPress 站點的文件夾
  • 使用新的組合文件在根目錄中創建一個文件夾

使用插件組合 CSS 和 JS 文件（最快和最安全的方式）：

• WP Rocket：將縮小的文件合併為每種文件類型（CSS 或 JavaScript）的一個文件

• 自動優化：幫助您連接腳本（CSS 或 JavaScript）。

2. 將圖像與 CSS Sprite 結合起來

影響：高

CSS sprites 是減少對圖像資源的 HTTP 請求數量的好方法。 您網站上的所有 CSS 文件都是渲染阻塞的，這意味著加載的 CSS 文件越多，這就越有可能降低您的網站速度。

為避免這種情況，您應該優化網站上的圖像並將它們合併到一個文件中。 完成此操作後，是時候使用 CSS sprites 技術了：使用 CSS 僅在需要的位置顯示該圖像文件的一部分。 這種技術提高了使用許多小圖像、徽標或圖標的站點性能。

您可以在我們關於在 WordPress 中使用 CSS sprite 組合圖像的專門文章中了解更多信息。

使用基於 Web 的工具將圖像與 CSS 精靈組合：

• CSS Sprite 生成器、編輯器和代碼
• CSSspritestool
  • 轉到 CSSspritestool 站點，使用拖放構建器將多個圖像組合為一個。
  • 您將獲得一個組合圖像文件，以及您上傳的每個圖像的一些 CSS 代碼。
  • 將合併後的圖像文件上傳到您的 WordPress 網站
  • 使用定制器將 CSS 代碼添加到您的 WordPress 網站
  • 使用 HTML 顯示您想要的每個圖像

3.優化圖像（並刪除不重要的圖像）

影響：高

雖然沒有現有的 WordPress 插件允許您專門將圖像與 CSS sprite 組合，但您仍然可以使用一些令人難以置信的插件來優化您的圖像。 圖片是用戶體驗的必備品，但要注意的是：您網站上的每張圖片都是一個單獨的 HTTP 請求！ 因此，請明智地選擇它們，並考慮只使用為您的內容帶來價值的圖像。

優化圖像意味著在不影響質量的情況下減輕重量。 在無法識別內容的情況下模糊淺色圖像是沒有意義的，對吧？

以下是您可以使用的一些調整大小的工具：

• Photoshop
• GIMP — 免費、Windows 和 Mac
• IrfanView — Windows 版免費
• 適用於 Mac 的預覽版 — 已安裝！

要自動優化您的圖像，我們建議您使用 WordPress 插件：

• 想像一下——由 WP Media 提供，WP Rocket 背後的同一家公司。 每月免費優化多達 20 MB 的圖像。
• Optimole（Optimole 的圖像優化和延遲加載）

閱讀我們的專門文章以發現更多圖像優化插件。

注意：優化圖像不會直接減少 HTTP 請求的數量，但會減小它們的大小並使其加載更快。

4.在圖像上啟用延遲加載

影響：高

實現“延遲加載”意味著推遲在瀏覽器視口之外加載圖像。 簡而言之，如果您的訪問者沒有一直向下滾動，則放置在頁面末尾的圖像甚至都不會被加載。 多虧了延遲加載腳本，您減少了 HTTP 請求的數量，因為您只加載了首屏的圖像。

手動實現延遲加載腳本：

首先，您需要確定如何加載圖像：您使用的是 <img> 標籤還是 CSS？ Web.Dev 很好地解釋瞭如何為這兩種方法實現延遲加載腳本。 您還需要使用 Intersection Observer API 檢查元素是否在視口中。

這就是延遲加載在圖像和 iframe 上的樣子：

<img src=”image.jpg” alt=”...” loading=”lazy”><iframe src=”video-player.html” title=”...” loading=”lazy”></iframe>

​​使用延遲加載插件自動應用腳本：

• WP Rocket 的延遲加載（免費）- 僅在用戶可見時才顯示內容。
• WP Rocket — 帶有延遲加載功能。 這是一個高級插件，具有許多其他優點，例如緩存、清理代碼等）
• 如果您正在尋找更多延遲加載插件，請查看我們的文章。

5. 縮小 HTML、CSS 和 JavaScript

影響：中等

縮小代碼意味著從文件中刪除不必要的空格、註釋和額外字符以使其更輕。 這種技術可以應用於 JavaScript、CSS 和 HTML 文件。 當然，這一切都是為了清理對最終用戶來說並不重要的代碼。

非縮小 JS 示例	縮小的 JS 示例

手動縮小代碼：

在您編輯文件之前，請從您的服務器下載一份副本以將其保存在您的計算機上以便妥善保管。

• 縮小 HTML：打開您的代碼表並刪除註釋 (<!– ... –>)、多餘的空格、換行符和類似內容
• 縮小 CSS：從 CSS 文件中刪除多餘的空格和註釋 (/* … */) 盡可能縮短 ID、類或變量名
• 縮小 JS：從源代碼中刪除 JS 註釋 (//) 和多餘的空格。 盡可能將數組轉換為對象，優化您的條件語句，並找到基本常量表達式的答案。

使用在線工具縮小代碼：

• 使用像 Sublime text 這樣的代碼編輯器來編輯文件
• 將您的代碼粘貼到其中一個在線工具中：Closure Compiler、CSS nano、JS nano、UNCSS。 （我們有完整的免費縮小代碼列表供您查看）。
• 用新的縮小代碼替換舊代碼並將其上傳回您的站點

使用 WordPress 插件來縮小你的代碼：

• WP Rocket——自動縮小你的 CSS 和 JS。 您需要做的就是選中兩個框。 WP Rocket 有一個專門的文件優化部分。

6.用輕量級插件替換重型插件

影響：中等

您的網站加載速度緩慢可能是由於一兩個插件因過多的 HTTP 請求而使您的 WordPress 網站超負荷運行。 要將插件歸類為輕量級插件，您應該查看：代碼質量和專業性、功能、代碼執行它們的效率以及文件大小。

如何標記您的 WordPress 網站的慢速插件？

假設您在兩個聯繫表單插件（A 和 B）之間猶豫不決。 使用我們的 5 個步驟來運行您的診斷：

1. 使用 Pingdom 運行性能測試以檢查您的 HTTP 請求數——記下您的分數
2. 激活插件 A 並再次運行你的測試——寫下你的分數
3. 停用插件 A 並安裝插件 B 以進行相同的審核
4. 比較每個插件添加了多少 HTTP 請求
5. 選擇 HTTP 請求較少的那個，刪除慢的那個！

使用插件來識別哪些插件因過多的 HTTP 請求而減慢了您的網站速度：

• 查詢監視器插件可用於識別哪些插件正在損害您的網站並幫助您刪除它們

7. 僅在需要時加載腳本（並且僅在特定頁面上）

影響：中等

另一種減少 HTTP 請求的方法是選擇性地禁用不需要加載的特定頁面/帖子的腳本和插件。

僅在需要時使用 WordPress 插件加載腳本：

• Perfmatters —允許您禁用頁面或帖子上的腳本。

• Asset Cleanup Pro -用戶友好性稍差，但也能勝任。

8. 減少外部腳本/HTTP 請求

影響：中等

加載每個第三方腳本是瀏覽器發出的額外 HTTP 請求，會降低頁面性能（以下是減少第三方腳本影響的方法）。 跟踪所有第三方集成對於了解哪些外部資產會降低站點速度至關重要。 我們一直在解釋如何減少您的HTTP 請求。 讓我們不要被外部的影響，對吧？

太多的 HTTP 請求通常會強制從網絡中獲取資源，而我們不希望這樣做以提高性能。

外部腳本主要來自 Google Analytics 標籤、Facebook Pixels、YouTube 視頻、社交分享按鈕和 A/B 測試標籤。 強烈建議識別所有正在添加請求的文件。

使用工具識別最重的外部腳本：

• 這些 Chrome DevTools、PageSpeed Insights 和 WebPageTest 等性能工具可以幫助您識別它們。

手動優化第三方請求：

現在您已經確定了哪些外部腳本會影響性能，您可以對它們使用async或defer屬性：

<腳本異步 src= “script.js”> <腳本延遲 src= “script.js”>

如果您想了解有關使用這兩個屬性的更多信息，我們建議您閱讀 Web.Dev，其中列出了有效加載第三方 JS 的所有步驟。

使用插件減少外部腳本對性能的影響：

• WP Rocket 通過多種方式幫助您減少第三方代碼的影響：
  • 在本地託管 Google Analytics 文件和標籤。
  • 預取 DNS 請求，這意味著外部文件將加載得更快。
  • 預加載字體以幫助瀏覽器在您的 CSS 文件中更快地發現 Google 字體。

• ​​推遲你的第三方JS比如廣告和分析，只需要告訴你的瀏覽器他應該先加載什麼。

對於這個故事，Telegraph 最近推遲了他們所有的腳本，並將廣告收費時間平均縮短了 4 秒。

9. 使用 CDN

影響：中等

內容交付網絡 (CDN) 是指從可能的最近位置提供內容的地理分佈式服務器。 無論用戶身在何處，他們都可以快速有效地訪問您網站的內容。 他們發出的每個 HTTP 請求都將從可能的最近位置提供服務。

市場上最好的 CDN：

• 火箭CDN
• Cloudflare CDN

我們還編寫了一份指南來幫助您選擇合適的 CDN。

10. 延遲渲染阻塞 JavaScript 和 CSS

影響：中等

這個資源是不是很有用，還是以後加載也可以？ 使用資源的即時需求將確定資源是否呈現阻塞。 要消除阻塞渲染的 JavaScript 和 CSS，您需要使用 defer 選項或 async 選項。

手動刪除渲染阻塞資源：

首先，對 Google PageSpeed Insights 進行審核並檢查您的機會部分。 如果您有“消除渲染阻塞資源”部分，那麼您可能需要像下面的示例中那樣做一些事情：

要手動消除此問題，您需要使用 defer 和 async 屬性。

下面是延遲 JS 的 defer 屬性示例：

<script defer src="/example-js-script"></script>

按照我們的深入教程解釋如何手動使用這兩個腳本來消除渲染阻塞資源。

如果您想要更直接的東西，只需使用 WordPress 插件。

使用 WordPress 插件來延遲 JS 和 CSS ：

• WP Rocket——它可以幫助你以最簡單的方式延遲你的 JS 文件。   該插件還提供構成渲染阻止資源的“優化 CSS 交付”功能。 如果需要，您還可以將任何 JS 或 CSS 文件排除在延遲之外。

如何使用插件減少 HTTP 請求

像 WP Rocket 這樣的插件有助於減少 HTTP 請求並顯著加快您的網站速度。 讓我們對使用和不使用 WP Rocket 的 WordPress 網站進行性能審計。 比較後你會發現它是 WordPress 最好的緩存插件之一。

我們將使用 GTmetrix 來衡量以下 KPI：

• 綜合性能等級（A到F）
• Core Web Vitals 分數（LCP、CLS 和 FID）+ TTI 和 TBT （注：如果 FID 不可用，我們將測量 FCP）
• HTTP 請求數（總頁面請求）

在內容方面，我的 WordPress 網站包含一些文本、一些社交媒體圖標、8 張圖片、來自 YouTube 的嵌入式視頻、帶有圖釘的地圖（來自谷歌地圖），以及 3 份來自客戶的推薦和他們的照片。

場景 1——測量性能和 HTTP 請求——沒有 WP Rocket

讓我們看看使用 GTmetrix 的性能結果。 他們不是很鼓舞人心，我的整體表現評分為“E”：

我們注意到我的頁面發出了 140 個 HTTP 請求，其中 42.9% 是由 JS 引起的。 我的頁面完全加載需要 10.2 秒，頁面大小為 5.11 MB。

GTmetrix 的主要建議如下：

• 高效加載第三方 JS（延遲 JS，建立與所需源的早期連接，並在嵌入式第三方資源上應用延遲加載）
• 消除渲染阻塞資源（考慮交付關鍵 CSS 和 JS 內聯並推遲所有非關鍵 JS/樣式。在我們的文章中了解更多關於什麼是關鍵 CSS）
• 優化我的代碼（合併和縮小 JS 和 CSS / 優化 CSS 交付）
• 實現頁面緩存

你猜怎麼了？ 這正是WP Rocket 可以為您的 WordPress 網站做的事情（除其他外）。 在場景 2 中，我們將激活 WP Rocket 並再次檢查我們網站的健康狀況。 好事來了。

場景 2 — 測量性能和 HTTP 請求 — 使用 WP Rocket

現在 WP Rocket 已激活，讓我們使用同一頁面運行另一個性能審計。

這一次，結果非常令人鼓舞，關於我的整體表現評分，我們從“E”到“A”：

另一個令人印象深刻的進步是我的 HTTP 請求數量在 WP Rocket 激活後從 140 下降到 18 (-87%)。

在全球範圍內，我所有的 KPI 都更好，使用 WP Rocket 時我的網站更快：

激活 WP Rocket 緩存插件後，我們的性能在全球範圍內得到了提升。

WP Rocket 自動應用了“如何減少對您的網站的 HTTP 請求”一節中列出的幾乎所有技術。

從 WP Rocket 的儀表板中，您可以看到我的 CSS 代碼已被縮小、合併和優化：

相同的優化已自動應用於我的 JS：

包起來

WP Rocket 幫助我的 WordPress 網站的 HTTP 請求減少了 87% 。 在我們的案例研究中，我們看到我們的請求在激活插件後從 140 變為 18。 您確實節省時間和精力！

沒有 WP 火箭	與 WP 火箭
140 個 HTTP 請求	18 個 HTTP 請求 (-87%)

為了保持站點的良好性能，建議將 HTTP 請求保持在 50 以下。WP Rocket 是一個很棒的自動工具，永遠不會超過這個數字！ 它將通過減少和消除不必要的 HTTP 請求來提高性能——您不需要任何技術知識。

感謝今天的 WP Rocket，減少工作並獲得更好的性能結果！ 我們確實有 14 天退款保證：如果您不滿意，我們會退款給您。 來吧，試一試，並在評論中告訴我們您的 HTTP 請求是如何進行的。