如何在 WordPress 中減少 HTTP 請求（11 個技巧）

為了顯示您的網站，用戶的瀏覽器將向您的服務器發送 HTTP 請求。 但是，如果您有多個未優化的文件，服務器必須處理許多請求。 由於這些會顯著增加您的頁面加載時間，因此您會希望您的網站發出更少的 HTTP 請求。

幸運的是，可以減少它們，這就是這篇文章的全部內容。

HTTP請求簡介

每當用戶訪問您的網站時，他們的瀏覽器都必須從您的服務器下載資源。 為了與之通信，瀏覽器使用 HTTP（超文本傳輸協議）發送請求。

網站包含不同形式的數據，HTML、CSS、圖像和視頻的文件都存儲在服務器上——在瀏覽器上呈現這些內容需要 HTTP 請求。

以下是某人瀏覽互聯網時涉及的步驟：

重要的是要注意呈現網站並不只需要一個 HTTP 請求。 每個單獨的圖像文件、插件樣式表、JavaScript 腳本、網絡字體等通常都有自己的。 因此，如果您的網站未優化，可能會對加載時間產生負面影響。

為什麼您可能希望您的 WordPress 網站發出更少的 HTTP 請求

在構建網站時，盡量減少不必要的文件非常重要。 這樣，訪問者的瀏覽器就不必向服務器請求那麼多的資源。 由於您的網站將發出更少的 HTTP 請求，因此加載速度會快得多。

作為一個粗略的規則，更多的 HTTP 請求會導致頁面速度變慢。 如果在渲染頁面之前有更多的資源需要下載，用戶將不得不等待很長時間才能查看內容。

例如，只有 50 個請求的網站通常會比有 70 個請求的網站加載得更快。 這是因為要處理和下載的資源較少。

真實情況稍微複雜一些，因為並非所有 HTTP 請求都是一樣的。 一個加載速度慢的大型 HTTP 請求可能比五個加載速度快的小型 HTTP 請求產生更大的影響。 但作為一個粗略的規則——更少的 HTTP 請求 = 更快的網站加載。

通過減少您網站上的 HTTP 請求，您將提高您的 Core Web Vitals，尤其是您的 Largest Content Paint (LCP) 分數。 反過來，這可以改善用戶體驗 (UX)，因為訪問者會更快地看到內容。

如何測試您網站的 HTTP 請求

正如我們前面提到的，HTTP 請求是渲染的一部分。 但是，並非每個 HTTP 請求都是相同的。 在您開始在您的網站上減少它們之前，您需要確切地知道要定位哪些目標。

為此，您可以使用 GTmetrix 等性能分析工具。 首先輸入您網站的 URL 並點擊測試您的網站：

您將收到一份性能報告，其中包含有關頁面大小和請求總數的信息。 要查看此數據，請向下滾動到頁面詳細信息：

您還可以通過單擊Waterfall選項卡來查看單個請求。 這將顯示每個文件的下載時間：

使用此瀑布圖，您可以確定站點上的哪些元素導致了不必要的 HTTP 請求。 一旦發現問題，您就可以實施正確的解決方案並加快您的網站速度。

正如您在上圖中所見，每個 HTTP 請求的大小不同，加載時間也不同。

如果您希望自己的努力獲得最大回報，請嘗試著重消除最大和最慢的 HTTP 請求。

您還應該專注於刪除第三方 HTTP 請求（您的網站從其他人的服務器加載的資源，例如 Google Analytics 腳本）。 這些第三方請求需要額外的 DNS 查找並具有其他性能缺點。

如何在 WordPress 中發出更少的 HTTP 請求並加快您的網站速度（11 個技巧）

一旦您測試了您的網站，就該減少其 HTTP 請求了。

下面，我們通過 11 種不同的方式來減少 HTTP 請求並優化剩餘的 HTTP 請求。 其中一些技巧不一定會消除HTTP 請求，但它們會優化請求以使其加載速度更快，這對於加快網站速度仍然很重要。

1. 刪除不需要的插件
2. 延遲渲染阻止 JavaScript 和/或延遲 JavaScript 執行
3. 有條件地加載腳本
4. 最小化第三方請求
5. 優化您的圖像
6. 實施延遲加載
7. 使用系統字體堆棧
8. 結合 CSS 和 JavaScript
9. 使用 CSS SPRITES 組合圖像
10. 精簡網站代碼
11. 禁用表情符號

1.刪除不需要的插件

您的網站上可能安裝了多個插件。 即使您沒有主動使用它們，不必要的插件也會增加 HTTP 請求並降低您的網頁速度。

要分析您的插件請求，請在 GTmetrix 瀑布報告中搜索“插件”。 這將僅顯示源自您的wp-content/plugins文件夾的 HTTP 請求：

通過將鼠標懸停在結果上，您會看到哪個插件創建了請求。 要優化您的網站，請瀏覽列表，尋找不必要的插件。 如果某個工具沒有積極地為您的網站做出貢獻，請考慮將其刪除。

2. 延遲渲染阻塞 JavaScript 和/或延遲 JavaScript 執行

如果你想減少 HTTP 請求並優化你的 HTTP 請求，專注於 JavaScript 是另一個很好的策略。

有兩種主要方法可以優化您網站的 JavaScript 加載方式：

1. 延遲渲染阻塞 JavaScript
2. 延遲 JavaScript 執行

延遲渲染阻塞 JavaScript

延遲渲染阻止 JavaScript 本身不會刪除 HTTP 請求，但它會確保您網站的 JavaScript 加載不會阻止更重要的 HTTP 請求。

在加載過程中，瀏覽器可能會遇到渲染阻塞資源。 這些 CSS 或 JavaScript 文件會暫停呈現，直到資源被處理。 如果您有這些不必要的文件，它們可能會延長顯示您的內容的時間。

向這些文件添加延遲或異步屬性將通知瀏覽器稍後執行它們。 使用 defer 屬性，腳本在 HTML 解析期間下載，然後執行。 異步屬性將在可用時立即運行腳本。

要實現這一點，您可以使用特定功能的插件，例如免費的 Async JavaScript 插件。

或者，許多通用性能/緩存插件也提供此功能，包括 WP Rocket 和 FlyingPress。

如果您願意的話，您也可以在站點的代碼中手動設置它。

要實現延遲屬性，您只需打開functions.php文件並找到資源的<script>標記。 在這裡，插入一個 defer 屬性：

 <script src="resource.js" defer></script>

這是異步屬性的樣子：

 <script src="resource.js" async></script>

通常，最好使用異步屬性。 但是，當腳本依賴於另一個腳本時，您將需要使用 defer 屬性。

延遲 JavaScript 執行

如果您想減少初始頁面加載的 HTTP 請求，另一種流行的策略是延遲您網站的部分/全部 JavaScript 執行，直到用戶交互。

當您設置它時，您的站點將等待加載文件，直到用戶進行一些交互，例如單擊、滾動等。

通過將這些 HTTP 請求移到訪問的後期，您可以減少初始加載的 HTTP 請求，並大大加快以用戶體驗為中心的指標，如 Largest Contentful Paint。

要進行設置，您可以使用以下性能插件之一：

• 可濕性火箭
• 飛行壓力機
• 性能問題

這是它在 FlyingPress 中的樣子——您可以延遲除選定腳本之外的所有腳本，也可以僅延遲選定腳本：

3.有條件地加載腳本

某些插件會在您的整個站點中不必要地加載腳本。 例如，插件可能只處理“聯繫我們”頁面上的表單，但將腳本添加到另一個區域。 在這種情況下，我們建議有條件地加載插件的腳本。

要有條件地加載您的插件，請考慮安裝一個像 Perfmatters 這樣的工具。 它帶有一個內置的腳本管理器，用於禁用特定頁面或帖子上的插件或單個腳本：

對於免費選項，您還可以考慮使用 Asset CleanUp 插件。

有條件地加載您的插件，然後再次通過 GTmetrix 運行您的網站。 如果您仍然注意到 HTTP 請求過多，則該繼續下一個方法了。

4. 盡量減少第三方請求

當您的網站加載時，訪問者的瀏覽器可能需要從第三方平台提取數據，這需要額外的 HTTP 請求。 另外，由於您依賴第三方服務器，這些請求會顯著降低您的網站速度。

以下是第三方腳本的一些示例：

• 嵌入式 YouTube 視頻
• 谷歌分析跟踪腳本
• 谷歌字體
• 第三方廣告

與渲染阻塞資源一樣，您可以將異步或延遲屬性應用於第三方腳本。

對於 Google Analytics 和 Google Fonts 等服務，您還可以考慮使用如下插件在本地託管它們：

• OMGF – 在本地託管谷歌字體。
• CAOS – 在本地託管 Google Analytics。

5.優化你的圖片

就像使用插件一樣，從您的網站中刪除不必要的圖像很重要。 由於每張圖片都需要自己的 HTTP 請求，因此您需要盡量減少網站上的照片數量。

然後，您的所有圖像都需要優化。 雖然這不會減少 HTTP 請求的數量，但會減小它們的大小。 這可以有效地改善頁面加載時間。

最好的圖像優化器之一是 Optimole。 這個免費增值插件提供了一套一體化的圖像優化功能，包括：

• 提供為每個用戶的設備優化的自適應圖像。
• 壓縮圖像。
• 調整圖像大小。
• 將圖像轉換為最佳格式。
• 通過其內置的內容分發網絡 (CDN) 提供圖像。

當您上傳新圖像時，Optimole 會壓縮它們並調整它們的大小。 因此，您不必擔心需要過多資源的大型圖像文件。

6.實現懶加載

實現延遲加載也是一個好主意。 這樣可以防止在訪問者向下滾動頁面之前加載任何非首屏圖像和視頻。

這會將這些 HTTP 請求移到用戶訪問的後期，這樣您就可以減少初始加載的 HTTP 請求並加快 Largest Contentful Paint 時間。

WordPress 5.5 使用本機瀏覽器延遲加載為圖像添加了內置延遲加載。

然而，並不是所有的瀏覽器都支持原生延遲加載。 此外，使用專用的延遲加載插件可以讓您更好地控製網站上的延遲加載功能。

例如，您可能希望從延遲加載中排除前幾張圖像，以避免對您的 Largest Contentful Paint 時間產生負面影響。

如果您使用上一節中的 Optimole 插件，它還包含一個內置功能，可以以最佳方式延遲加載您網站的圖像。

您還可以從插件設置中進一步調整延遲加載行為。

7.使用系統字體棧

您可能會使用各種自定義字體來使您的網站獨一無二。 但是，每種新字體都會在您的站點加載時添加另一個 HTTP 請求。

因此，最好限制您使用的自定義字體的數量。

或者，您可以堅持使用系統字體堆棧，它使用來自訪問者操作系統的本機字體。

某些主題，如 Neve、GeneratePress 或 Astra，可讓您恢復為系統字體。 但是，您也可以使用 CSS 更改字體堆棧。

8.結合CSS和JavaScript

另一種減少對 CSS 和 JavaScript 文件的 HTTP 請求的方法是將單獨的 CSS 和 JavaScript 文件合併到一個樣式表或文件中。

使用 Autoptimize 插件，您只需幾步即可輕鬆聚合站點文件：

在Settings > Autoptimize下，啟用插件以優化 JavaScript 和 CSS 代碼。 然後，選中Aggregate JS-files和Aggregate CSS-files旁邊的框：

這會將您的 CSS 編譯成一個文件，將 JavaScript 編譯成另一個文件。 Autoptimize 不是發送對多個文件的許多請求，而是使您的站點發出更少的 HTTP 請求。

注意——雖然組合 CSS 和 JavaScript 是減少 HTTP 請求的可靠方法，但它可能不會對實際性能產生任何影響，具體取決於您的 Web 主機。

如果您的主機使用 HTTP/2 或更高版本（現在大多數主機都這樣做），實際上最好不要合併文件，因為 HTTP/2 支持多路復用（這意味著它可以從服務器下載多個文件而無需多個服務器請求）。

如果您不確定您的主機是否使用 HTTP/2，您可以聯繫支持人員。

9. 使用 CSS sprites 組合圖像

在典型的 WordPress 網站上，每個圖像都是一個單獨的文件。 如果頁面上有多張照片，瀏覽器會發送多個 HTTP 請求。 然而，CSS sprite 會將這些圖像合併到一個文件中。

CSS 精靈工具是用於創建和自定義 CSS 精靈的免費軟件。 首先，將您的圖片放入上傳框中：

生成 CSS 精靈後，將其添加到 WordPress 媒體庫。 然後，您可以使用生成的 HTML 和 CSS 代碼將每個圖像放置在您的網站上。

10. 精簡網站代碼

縮小站點文件不會幫助您減少 HTTP 請求，但它會幫助您優化對站點的 HTML、CSS 和 JavaScript 代碼的不可避免的 HTTP 請求。

在編寫代碼時，您可能會包含提高可讀性的字符和空格。 由於它們不是處理請求所必需的，因此您可以刪除它們。

縮小 WordPress 網站代碼的最簡單方法是使用插件，例如我們之前提到的 Autoptimize 插件。

大多數 WordPress 緩存插件還包括代碼壓縮功能，包括 WP Rocket、FlyingPress、WP Fastest Cache 等。

或者，如果您使用的是 Cloudflare 的 CDN，您還可以讓 Cloudflare 為您縮小代碼。

縮小站點文件後，HTTP 請求的執行時間會更快。 使用更輕的代碼，您將加快網站速度並最大程度地減少大量請求。

11.禁用表情符號

默認情況下，WordPress 表情符號會向您的站點添加一個額外的 HTTP 請求。 要擺脫另一個HTTP 請求，您可以禁用 WordPress 表情符號。

對於最簡單的選項，您可以只安裝輕量級的 Disable Emojis 插件。

或者，您可以將此代碼添加到子主題的functions.php文件或代碼管理器插件（如代碼片段）中：

 /** * Disable the emojis */ function disable_emojis() { remove_action( 'wp_head', 'print_emoji_detection_script', 7 ); remove_action( 'admin_print_scripts', 'print_emoji_detection_script' ); remove_action( 'wp_print_styles', 'print_emoji_styles' ); remove_action( 'admin_print_styles', 'print_emoji_styles' ); remove_filter( 'the_content_feed', 'wp_staticize_emoji' ); remove_filter( 'comment_text_rss', 'wp_staticize_emoji' ); remove_filter( 'wp_mail', 'wp_staticize_emoji_for_email' ); add_filter( 'tiny_mce_plugins', 'disable_emojis_tinymce' ); add_filter( 'wp_resource_hints', 'disable_emojis_remove_dns_prefetch', 10, 2 ); } add_action( 'init', 'disable_emojis' ); /** * Filter function used to remove the tinymce emoji plugin. * * @param array $plugins * @return array Difference betwen the two arrays */ function disable_emojis_tinymce( $plugins ) { if ( is_array( $plugins ) ) { return array_diff( $plugins, array( 'wpemoji' ) ); } else { return array(); } } /** * Remove emoji CDN hostname from DNS prefetching hints. * * @param array $urls URLs to print for resource hints. * @param string $relation_type The relation type the URLs are printed for. * @return array Difference between the two arrays. */ function disable_emojis_remove_dns_prefetch( $urls, $relation_type ) { if ( 'dns-prefetch' == $relation_type ) { /** This filter is documented in wp-includes/formatting.php */ $emoji_svg_url = apply_filters( 'emoji_svg_url', 'https://sworg/images/core/emoji/2/svg/' ); $urls = array_diff( $urls, array( $emoji_svg_url ) ); } return $urls; }

實施所有這些技巧後，您應該擁有一個 HTTP 請求更少的站點！

在您的網站上發出更少的 HTTP 請求 🎯

作為一個粗略的規則，您的網站的 HTTP 請求越多，加載速度就越慢。 這會對您網站的用戶體驗 (UX) 產生負面影響，導致訪問者沒有閱讀您的內容或購買產品就離開了。

為了加速您的網站，您希望消除盡可能多的 HTTP 請求並優化保留的 HTTP 請求，以便它們盡快加載。

使用這篇文章中的提示，您可以完成這兩項工作並為您的訪問者創建一個快速加載的網站。

👉 但是，請記住，優化站點的 HTTP 請求只是性能難題的一部分。 如果您希望您的網站加載速度快，您還需要高質量的 WordPress 託管——查看我們最好的 WordPress 託管綜述以查看最佳選項。

您對減少 WordPress 中的 HTTP 請求數量有任何疑問嗎？ 在下面的評論部分詢問我們！