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