您網站的HTTP請求越多，載入速度就越慢。因此，如果您可以減少HTTP請求的數量並優化它們的載入方式，您就可以提高網站的效能。
在這篇文章中，我們將帶您瞭解有關如何減少WordPress上的HTTP請求的所有資訊。
我們將從HTTP請求的基本介紹、它們的重要性以及如何分析WordPress站點的請求開始。
然後，我們將分享一些技巧和策略，您可以實施這些技巧和策略來減少站點的請求。除了幫助您處理GTmetrix中的“減少HTTP請求”訊息外，這些策略還有助於處理Google PageSpeed Insights中的“避免連結關鍵請求”訊息。
什麼是HTTP請求？
當你建立一個網站時，它有很多不同的部分。您有在頁面上使用的不同影象檔案、控制內容外觀的CSS樣式表、新增所有酷功能的JavaScript檔案，等等。
當有人訪問您的網站時，他們的瀏覽器需要一種方法來從您的伺服器下載該頁面所需的所有資源。為此，它為每個單獨的資源向伺服器發出HTTP請求。
例如，它可能會說，“嘿伺服器，我需要那個coolimage.png檔案”和“嘿伺服器，我還需要該聯絡表單外掛的CSS樣式表”。然後伺服器用相關檔案響應這些請求。
一旦網路瀏覽器獲得這些檔案，它就可以為您的訪問者組裝網頁。當然，它比那要複雜一些，但這是基本思想。
HTTP是超文字傳輸協議的縮寫，是這些計算機（訪問者的瀏覽器和您的網路伺服器）進行通訊的方式。
需要理解的一件重要事情是每個單獨的元素都是一個單獨的HTTP請求。例如，如果網頁上有五個影象檔案，瀏覽器需要發出五個單獨的HTTP請求，每個影象一個。
同樣，如果您使用四個WordPress外掛並且每個外掛都新增了自己的CSS樣式表，那麼訪問者的瀏覽器將需要發出四個單獨的HTTP請求，每個外掛的樣式表一個。
為什麼減少HTTP請求很重要？
一般來說，您網站的HTTP請求越多，載入速度就越慢。因此，如果您想讓您的網站載入速度更快，您需要優化並減少您的網站所需的HTTP請求數量。
雖然這有點過於簡單化，但基本思想是，Web瀏覽器只會在完成所有HTTP請求下載後才向您的訪問者顯示該網站（儘管有一些策略告訴瀏覽器可以等待某些檔案）。
因此，如果一個網站在顯示頁面之前必須發出70個HTTP請求，這將比它必須發出40個HTTP請求需要更長的時間。
此外，某些HTTP請求會“阻塞”其他HTTP請求，這意味著瀏覽器在下載完之前的HTTP請求之前無法開始下載某些HTTP請求。
底線是：當您發出更少的HTTP請求時，您的網站載入速度會更快。
如何檢視和分析您網站的HTTP請求
上面，您瞭解到在所有條件相同的情況下，減少HTTP請求的數量將加快您的網站速度。然而，所有HTTP請求並不總是“相等”的。一些HTTP請求比其他請求大。有些比其他的慢。
例如，請求一個巨大的3MB影象檔案將比請求一個微小的20KB影象花費更長的時間。
如果您想對您的網站進行最大的改進，首先關注大的、載入緩慢的HTTP請求將獲得最大的投資回報。
要分析您站點的HTTP請求，您可以使用稱為Waterfall analysis的東西。
大多數速度測試工具都提供了這一點，但GTMetrix和Pingdom的介面非常方便。您還可以使用瀏覽器的開發人員工具。但是，我們將使用GTmetrix作為本次測試的示範。
插入URL後，您將在頂部看到一個基本摘要框。這會顯示您的站點有多少HTTP請求，但它不會分解單個請求：
要分析您的個人請求，請轉到下面的Waterfall選項卡。
在這裡，您將看到站點上每個單獨的HTTP請求的列表以及有關該HTTP請求下載所需時間的資訊：
您可以看到並非所有HTTP請求都是相同的。例如，839.3 KB的影象需要1.12秒，而57.6 KB的影象僅需要87.5毫秒：
您還可以通過在伺服器上搜尋該外掛資料夾的名稱來查詢來自您正在使用的不同WordPress外掛的HTTP請求。例如，您可以看到WooCommerce新增了七個自己的HTTP請求：
通過這種方式，您可以檢視您使用的任何外掛是否新增了大量HTTP請求（尤其是載入緩慢的請求）。
如何在WordPress中優化和減少HTTP請求
概括地說，有兩種廣泛的策略可以減少HTTP請求：
- 刪除HTTP請求。如果可能，您應該完全刪除所有不必要的HTTP請求。例如，如果您有一個外掛沒有為您的網站增加任何價值，並且正在載入自己的CSS和JavaScript，只需完全刪除該外掛即可擺脫其所有HTTP請求。
- 合併HTTP請求。如果您有絕對必須載入的HTTP請求，您可以將它們合併到一個檔案中。例如，代替六個小的CSS檔案，您可以將它們組合成一個更大的CSS檔案，它仍然會載入得更快，因為瀏覽器需要發出更少的請求（HTTP/2並不總是如此，我們將下面討論）。
我們將從專注於刪除HTTP請求的策略開始，然後我們將討論如何組合剩餘的HTTP請求。基本思想是去除你能去除的東西，然後組合剩下的東西。
1. 刪除不必要的WordPress外掛
首先，您需要使用瀑布分析從外掛中提取所有請求。您可以通過搜尋“外掛”來實現這一點，這將提取來自wp-content/plugins資料夾的每個HTTP請求。
如果您將滑鼠懸停在檔名上，您可以看到它來自哪個外掛。例如，在這裡您可以看到來自您可能正在使用的滑塊外掛的請求。
進一步挖掘會發現Slider Revolution新增了三個自己的HTTP請求，即使這個測試頁面不包含任何滑塊：
如何檢視HTTP請求來自哪裡
如果您將 Slider Revolution 用於關鍵滑塊，那麼您可能需要保留它。但是，如果您安裝它來測試它，然後刪除了滑塊，而您現在並沒有真正使用它……那麼您應該刪除它以擺脫那些HTTP請求。
基本上，您想瀏覽整個列表並問問自己每個外掛是否真的為您的網站增加了價值。如果外掛不是（但正在新增HTTP請求），那麼最好將其刪除。
2. 用更輕量級的外掛替換重型外掛
修剪掉任何不必要的外掛後，下一步是檢視是否可以用更輕量級的替代品替換您正在使用的任何外掛。
例如，假設您想向您的網站新增社交分享按鈕。這是一個很好的功能，但一些社交分享外掛可以新增很多HTTP請求。
例如，流行的AddThis外掛新增了六個自己的HTTP請求（包括一些外部請求——稍後會詳細介紹）：
您可以通過使用更優化的替代方案（例如NovaShare或Grow by MediaVine ）來減少大量請求。
3. 有條件地載入全站不需要的指令碼
此時，您應該已經刪除了站點上任何地方不需要的所有外掛。然而，還有一類外掛可能會導致問題——僅在您網站的特定部分需要的外掛，但在任何地方都載入了它們的指令碼。
例如，以流行的Contact Form 7 外掛為例。您可能只需要在幾個頁面上使用此外掛（例如您的“聯絡我們”頁面）。但是，Contact Form 7會在您網站的每個頁面上載入其指令碼。因此，例如，即使您的部落格文章沒有任何聯絡表單，Contact Form 7仍在向您的部落格文章新增一些HTTP請求。
另一個例子可能是WooCommerce，如果您僅將其用作支付處理器。WooCommerce仍然會在任何地方載入它的指令碼，即使你真的只需要在這個用例的購物車和結賬頁面上使用它們。
這裡的高階策略是僅在需要時有條件地載入外掛。例如，您可以讓Contact Form 7載入到您的“聯絡我們”頁面，但在其他地方禁用它。
如果您不是開發人員，則可以使用Asset CleanUp或Perfmatters等外掛無需程式碼即可完成此操作。使用Perfmatters，您首先需要啟用指令碼管理器。然後，您可以開啟指令碼管理器以檢視頁面上載入的所有指令碼並禁用任何不需要的指令碼：
Perfmatters外掛中的指令碼管理器
請小心，因為如果您不小心禁用了真正需要的指令碼，可能會導致問題。雖然這是一種有用的策略，但它也是一種高階策略。
如果您沒有信心，您可能只想跳過此步驟或聘請開發人員來幫助您。
4. 刪除不必要的影象（並優化其餘影象）
使用得當，影象使您的網站更加使用者友好和吸引人。它們為您的網站增加了價值。
但是，您站點上的每個影象都是一個單獨的HTTP請求。因此，如果您的影象沒有增加價值，最好將其刪除以消除這些HTTP請求。
例如，那個有趣的GIF值得嗎？可能是……但也可能不是——每當您向內容新增更多影象時，您都需要考慮權衡。
最後，確保調整大小並壓縮剩餘的影象。雖然這本身不會減少HTTP請求的數量，但會減少這些HTTP請求的大小，從而使它們載入得更快。
5. 對圖片和視訊使用延遲載入
使用延遲載入，您的站點將等待載入首屏影象、視訊和iframe，直到使用者開始向下滾動。
由於這些資源不會立即載入，因此無需為初始頁面載入發出HTTP請求。
從WordPress 5.5開始，WordPress現在包含使用HTML載入屬性的影象原生延遲載入。對於其他一些實現延遲載入的方法（包括視訊檔案），您可以檢視我們的WordPress延遲載入完整指南。
6. 限制自定義字型的使用和/或使用系統字型（圖示字型相同）
自定義字型非常適合改善您網站的設計和使用者體驗。但是，您需要注意如何使用它們，因為您使用的每個自定義字型型別都會新增另一個HTTP請求。
如果您打算使用自定義字型，請確保使用少量字型。您真的需要為帖子標題和帖子正文使用不同的字型嗎？或者你可以使用相同的字型嗎？你真的需要所有五種字型權重嗎？或者你可以只選擇兩個？
這同樣適用於Font Awesome和IcoMoon等圖示字型。圖示字型可能很有用，但您可能不需要載入多個圖示字型庫。最好只選擇一個圖示字型庫並堅持下去。
最後，如果您想更進一步，完全消除與您站點字型相關的HTTP請求，您可以考慮使用系統字型堆疊。雖然這會降低您在設計方面的靈活性，但這也意味著您的訪問者不必載入任何字型檔案來呈現您的網站。
7. 禁用WordPress表情符號
預設情況下，WordPress新增自己的表情符號HTTP請求。雖然它只是一個5.1KB的HTTP請求，但這個檔案長期以來一直是WordPress效能愛好者的眼中釘。檢視如何禁用WordPress表情符號的教程。
最簡單的選擇是安裝並啟用free Disable Emojis（GDPR友好）外掛。但是，您可以閱讀我們的完整指南以瞭解其他一些選項。
執行此操作後，您的HTTP請求數將減少1，您仍然可以使用表情符號 。
8. 減少/消除第三方HTTP請求
到目前為止，我們主要關注減少對WordPress站點伺服器上檔案的HTTP請求。但是，訪問者的瀏覽器可能還需要從第三方伺服器請求檔案。
這些請求可能會更加麻煩，因為您的站點受這些第三方伺服器速度的支配。
一些例子：
- Google Analytics – 跟蹤指令碼託管在 Google 的伺服器上，但訪問者的瀏覽器仍需要下載該檔案。
- 嵌入的YouTube視訊– 您會看到很多對YouTube伺服器的HTTP請求。
- 第三方廣告服務– 您會看到大量與投放您的廣告相關的第三方請求。
- Google Fonts（在 Google 的 CDN 上）——您會看到第三方請求Google伺服器載入您的字型檔案。
您可以將上面的許多相同策略應用於這些第三方HTTP請求。
例如，如果一個外掛新增了它自己的第三方請求（就像上面的AddThis外掛那樣），你可以刪除它並使用更優化的東西。
對於YouTube視訊，您可以延遲載入它們並用影象縮圖替換初始頁面載入。這將延遲新增這些HTTP請求，直到訪問者想要播放視訊。
對於必要的第三方指令碼，例如Google Analytics或Facebook Pixel，您可以嘗試在本地託管這些指令碼。
WP Rocket具有內建的附加元件來在本地託管Google Analytics和Facebook Pixel，或者您可以使用像CAOS（完整分析優化套件）這樣的外掛。
我們還有一些指南可能會有所幫助：
9. 將影象與CSS Sprite結合
此時，您應該希望能夠從您的站點發出更少的HTTP請求。現在，是時候研究如何組合剩餘的HTTP請求了，從影象開始。
優化站點上影象的另一種方法是將單獨的影象合併為一個影象檔案。然後，您可以使用CSS在需要的地方僅顯示該影象檔案的一部分。這是一種稱為CSS sprites的策略。
CSS sprites最適合裝飾影象，例如徽標變體或圖示。您不應該將CSS sprites用於資訊影象（如部落格文章正文中的影象），因為有兩個大缺點：
- SEO – 因為您將影象組合成一個影象檔案，所以您無法在Google搜尋中對單個影象進行排名。
- 可訪問性——因為你不能給影象新增替代文字，使用螢幕閱讀器的人將無法理解載入了CSS sprites的影象（儘管有一些策略可以解決這個問題）。
如果您仍然對這個主題感到困惑，這裡有一個Amazon的CSS sprite檔案示例——您可以看到它是如何包含一堆徽標變體以及一些圖示的。亞馬遜使用CSS來確保在每個位置只顯示該影象檔案的相關“部分”：
來自亞馬遜的CSS sprites示例。您可以使用 CSS 來“定位”組合影象的特定部分。
不幸的是，沒有用於CSS sprites的“設定並忘記它”的WordPress外掛。但是，您可以找到提供幫助的工具，例如CSS Sprite Tool：
- 將要合併的影象上傳到該工具。
- 然後，該工具將為您提供一個組合影象檔案，以及您上傳的每個影象的一些CSS程式碼。
- 將合併的影象檔案上傳到您的WordPress網站。
- 使用CSS程式碼在您的內容中顯示影象。提供的CSS將自動僅選擇組合影象檔案的適當部分。
10. 合併CSS和JavaScript檔案
在您的WordPress主題和外掛之間，您的站點可能會載入多個CSS樣式表和JavaScript檔案，這意味著多個HTTP請求僅用於瀏覽器下載呈現頁面所需的CSS和JavaScript。
為了減少所有這些單獨的請求，您可以將這些單獨的檔案/樣式表合併到一個檔案/樣式表中。這稱為檔案組合或檔案串聯，具體取決於您使用的工具。
許多WordPress快取外掛包括合併CSS和JavaScript檔案的功能。
轉到WP Rocket設定中的File Optimization選項卡。然後，啟用縮小，然後合併檔案：
如何在WP Rocket中結合CSS和JavaScript
如需更詳細的外觀，請檢視我們完整的WP Rocket教程。
您還可以使用Autooptimize合併CSS和JavaScript檔案。要合併檔案，請轉至Settings → Autoptimize並選擇以下選項：
- Aggregate JS-files
- Aggregate CSS-files
如需更詳細的外觀，請檢視我們完整的Autoptimize教程。
檔案合併並不適合於HTTP/2伺服器，HTTP/2旨在更有效地傳輸多個小檔案，這意味著一個大的CSS/JS檔案和多個小檔案之間的差異較小。
基本上，如果是HTTP/2伺服器您可能不需要執行此步驟來改進頁面載入時間。我們建議您仍然對其進行測試，因為它仍然對某些網站有益，但您也可能不會注意到實際頁面載入時間的任何差異。
但是，許多效能測試工具如GTmetrix仍然無法識別HTTP/2，因此GTmetrix可能仍會顯示“減少HTTP請求”訊息並降低您的分數。但請記住，分數並不像實際頁面載入時間那樣重要。
11. 延遲渲染阻止JavaScript
推遲渲染阻止JavaScript本身並不能消除HTTP請求。但是，它正在優化它們的載入方式，這會對您網站的感知載入時間產生相同的影響。
它還可以幫助處理Google PageSpeed Insights/Lighthouse中的“避免連結關鍵請求”訊息。
通過推遲對某些檔案的請求或非同步載入它們，您可以防止某些不重要的資源“阻塞”快速載入站點可見部分所需的資源。
有關為什麼會發生這種情況的更多資訊，您可以閱讀我們關於理解網頁關鍵渲染路徑的指南。
然後，您可以按照我們的詳細指南來消除WordPress上的渲染阻塞資源。
減少HTTP請求的最佳WordPress外掛
如果您正在尋找一些“一體式”WordPress外掛來減少HTTP請求，我們推薦上面教程中的兩個外掛：
雖然您仍然需要手動評估您的主題和外掛以檢視它們是否發出了過多的HTTP請求，但這兩個外掛都可以幫助您在完成清理後優化網站上剩餘的所有內容。
小結
您站點上的每個單獨資源都會新增一個HTTP請求。一張圖片是一個HTTP請求，一個CSS樣式表是一個HTTP請求，一個字型檔案是一個HTTP請求，依此類推。
如果您使用WordPress，您的主題肯定會新增自己的HTTP請求，許多外掛也會新增自己的HTTP請求。您還將收到來自您使用的任何影象和您新增的第三方指令碼（例如分析工具）的HTTP請求。
更多和/或更大的HTTP請求將導致網站速度變慢。這就是為什麼當您使用GTmetrix或PageSpeed Insights等速度測試工具時，您通常會看到“減少HTTP請求”或“優化HTTP請求”或“避免連結關鍵請求”之類的訊息。
要減少您網站上的HTTP請求數量，您可以按照我們上面詳述的步驟進行操作。
評論留言