如何在WordPress中減少HTTP請求的數量(輕鬆提高網站速度)

您的網站擁有的HTTP請求越多,載入速度就越慢。因此,如果您可以減少HTTP請求的數量並優化它們的載入方式,則可以提高網站的性能。

在本文中,我們將帶您了解所有有關如何在WordPress上減少HTTP請求的知識。

我們將從HTTP請求的基本介紹,它們為什麼重要以及如何分析WordPress網站的請求開始。

然後,我們將分享一些技巧和策略,您可以實施這些技巧和策略來減少網站的請求。這些策略除了可以幫助您處理GTmetrix中的「減少HTTP請求」消息外,還可以幫助解決Google PageSpeed Insights中的「避免鏈接關鍵請求」消息。
緩慢的網站?太多的HTTP請求可能是罪魁禍首。在此處查看該指南以減少請求數量?單擊鳴叫
什麼是HTTP請求?

建立網站時,它包含許多不同的部分。您擁有在頁面上使用的不同圖像文件,控制內容外觀的CSS樣式表,添加了所有出色功能的JavaScript文件,等等。

當某人訪問您的網站時,其瀏覽器需要一種從您的伺服器下載該頁面所需的所有資源的方法。為此,它將向伺服器發出針對每個單獨資源的HTTP請求。

例如,它可能會說:「嘿,伺服器,我需要那個coolimage.png文件」和「嘿,伺服器,我還需要該聯繫表單插件的CSS樣式表」。然後,伺服器使用相關文件響應這些請求。

網路瀏覽器獲取這些文件後,便可以為您的訪客組裝網頁。當然,這要複雜得多,但這是基本思想。

這些計算機(訪問者的瀏覽器和您的Web伺服器)之間的通信是HTTP(超文本傳輸​​協議的縮寫)。

要了解的一件事是,每個單獨的元素都是一個單獨的HTTP請求。例如,如果一個網頁上有五個圖像文件,則瀏覽器需要發出五個單獨的HTTP請求,每個圖像請求一個。

同樣,如果您使用四個WordPress插件,並且每個插件都添加了自己的CSS樣式表,則訪問者的瀏覽器將需要發出四個單獨的HTTP請求,每個插件樣式表都請求一個。

為什麼減少HTTP請求很重要?

通常,您的網站收到的HTTP請求越多,載入速度就越慢。因此,如果要加快網站載入速度,則需要優化並減少網站所需的HTTP請求數量。

儘管這有點過分簡化,但基本思想是,Web瀏覽器僅在完成所有HTTP請求的下載後才會向訪問者顯示該網站(儘管有些策略可以告訴瀏覽器可以等待某些時間文件)。

因此,如果網站必須先發出70個HTTP請求才能顯示該頁面,那麼它將花費比必須發出40個HTTP請求更長的時間。

另外,某些HTTP請求將「阻止」其他HTTP請求,這意味著瀏覽器在完成之前的HTTP請求下載之前,無法開始下載某些HTTP請求。

底線是:當您發出較少的HTTP請求時,可以使您的網站載入速度更快。

如何查看和分析站點的HTTP請求

上面,您了解到所有事物都是平等的,減少HTTP請求的數量將加速您的站點。但是,所有HTTP請求並不總是「相等」的。一些HTTP請求大於其他HTTP請求。有些比其他的慢。

例如,對3 MB巨大圖像文件的請求將比對20 KB很小圖像的請求花費更長的時間。

如果您想對網站進行最大的改進,那麼首先關注大型的,緩慢載入的HTTP請求將獲得最大的投資回報。

要分析站點的HTTP請求,可以使用稱為瀑布分析的方法。

大多數速度測試工具都提供此功能,但是GTMetrix和Pingdom的介面非常方便。您還可以使用瀏覽器的開發人員工具。但是,我們將使用GTmetrix作為我們的屏幕截圖。

插入網址後,您會在頂部看到一個基本的摘要框。這顯示您的站點有多少個HTTP請求,但不會分解單個請求:

要分析您的個人請求,請轉到下面的「瀑布」選項卡。

在這裡,您會看到網站上每個HTTP請求的列表,以及有關HTTP請求下載所需時間的信息:

您可以看到並非所有HTTP請求都相等。例如,839.3 KB的圖像耗時1.12s,而57.6 KB的圖像僅耗時87.5 ms:

您還可以通過在伺服器上搜索該插件文件夾的名稱來查找來自所使用的不同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請求。

使用WordPress,我們的流量增長了1,187%。
我們將向您展示如何。

加入20,000多個其他人,他們每周都會收到有關WordPress內部技巧的新聞!

現在訂閱

成功!感謝您的訂閱

您將在一周內收到下一期的Kinsta新聞通訊。

訂閱Kinsta新聞通訊

訂閱

我同意條款和條件以及隱私政策

如果將滑鼠懸停在文件名上,則可以看到它來自哪個插件。例如,在這裡您可以看到您可能正在使用的滑塊插件的請求。

進一步挖掘可能會發現,即使此測試頁不包含任何滑塊,Slider Revolution也會添加三個自己的HTTP請求:

減少http請求

如何查看HTTP請求的來源

如果將「 Slider Revolution」用於關鍵滑塊,則可能需要保留它。但是,如果您安裝了它進行測試,然後又刪除了滑塊,那麼現在您並沒有真正使用它……那麼您應該刪除它以擺脫那些HTTP請求。

基本上,您想瀏覽整個列表,並詢問自己每個插件是否真的為您的網站增加了價值。如果不是(但正在添加HTTP請求)插件,那麼最好將其刪除。

2.用更多輕量級的插件替換沉重的插件

修剪完所有不必要的插件後,下一步就是看是否可以用更輕巧的替代品替換正在使用的任何插件。

例如,假設您要向站點添加社交共享按鈕。這是一個很好的功能,但是某些社交共享插件可以添加許多HTTP請求。

例如,流行的AddThis插件會添加六個自己的HTTP請求(包括一些外部請求-一秒鐘內就會增加):

您可以使用更優化的替代方法(例如NovaShare或MediaVine的Grow)來減少很多脂肪。

3.有條件地載入站點範圍內不需要的腳本

此時,您應該已經刪除了網站上任何地方都不需要的所有插件。但是,還有另一類可能會引起問題的插件–這些插件僅在網站的特定部分才需要,但它們的腳本會隨處載入。

例如,使用流行的Contact Form 7插件。您可能只需要在幾個頁面上使用此插件(例如,「聯繫我們」頁面)。但是,Contact Form 7會在網站的每個頁面上載入其腳本。因此,例如,即使您的博客文章沒有任何聯繫表格,聯繫表格7仍會向您的博客文章添加一些HTTP請求。

如果僅將WooCommerce用作付款處理程序,則可能是另一個示例。WooCommerce仍將在任何地方載入其腳本,即使您實際上僅在購物車和結帳頁面上需要此腳本。

這裡的一種高級策略是僅在需要的地方有條件地載入插件。例如,您可以讓Contact Form 7載入到「 Contact Us」頁面上,而在其他任何地方都將其禁用。

如果您不是開發人員,則可以使用Asset CleanUp或Perfmatters之類的插件來執行此操作,而無需編寫代碼。使用Perfmatters,首先需要啟用腳本管理器。然後,您可以打開腳本管理器以查看頁面上載入的所有腳本,並禁用所有不需要的腳本:

在Perfmatters插件中管理的腳本-減少http請求

Perfmatters插件中的腳本管理器

如果不小心禁用了確實需要的腳本,可能會引起問題,請務必小心。儘管這是一種有用的策略,但它也是一種高級策略。

如果您沒有信心,則可能要跳過此步驟或僱用開發人員來幫助您。

4.刪除不必要的圖像(並優化其餘圖像)

使用得當的圖像可以使您的網站更加人性化和更具吸引力。它們為您的網站增值。

但是,您站點上的每個圖像都是一個單獨的HTTP請求。因此,如果您的圖片沒有增加價值,那麼最好刪除它們以消除這些HTTP請求。

例如,有趣的GIF值得嗎?可能是……但也可能不是-每當您向內容中添加更多圖像時,都需要考慮取捨。

最後,請確保調整大小並壓縮剩餘的圖像。雖然這不會單獨減少HTTP請求的數量,但是會減少這些HTTP請求的大小,從而使它們的載入速度更快。

5.對圖像和視頻使用延遲載入

延遲載入後,您的網站將等待載入首屏圖像,視頻和iframe,直到用戶開始向下滾動為止。

由於這些資源不會立即載入,因此無需為初始頁面載入發出HTTP請求。

從WordPress 5.5開始,WordPress現在使用HTML載入屬性包括圖像的本機延遲載入。有關實現延遲載入(包括視頻文件)的其他一些方法,您可以查看我們有關WordPress延遲載入的完整指南。

6.限制自定義字體的使用和/或使用系統字體(與圖標字體相同)

自定義字體非常適合改善網站的設計和用戶體驗。但是,您需要謹慎使用它們,因為您使用的每種自定義字體類型都會添加另一個HTTP請求。

如果要使用自定義字體,請確保使用少量字體。您的帖子標題和帖子正文是否真的需要其他字體?還是可以使用相同的字體?您真的需要全部五個字體粗細嗎?還是可以選擇兩個?

圖標字體(例如Font Awesome和IcoMoon)也是如此。圖標字體可能很有用,但是您可能不需要載入多個圖標字體庫。最好只選擇一個圖標字體庫並堅持使用。

最後,如果您想更進一步,完全消除與站點字體相關的HTTP請求,則可以考慮使用系統字體堆棧。儘管這會給您帶來較少的設計靈活性,但這也意味著您的訪問者不必為了呈現您的網站而載入任何字體文件。

(建議閱讀:如何在WordPress中更改字體)。

7.禁用WordPress表情符號

默認情況下,WordPress添加自己的表情符號HTTP請求。儘管它只是一個5.1 KB HTTP請求,但長期以來,此文件一直是WordPress性能支持者的棘手問題。在Kinsta,我們喜歡WordPress的性能,這就是為什麼我們擁有如何禁用WordPress表情符號的完整指南的原因。

最簡單的選擇是只安裝並激活免費的禁用表情符號(對GDPR友好)插件。但是,您可以閱讀我們的完整指南以了解其他一些選項。

完成此操作後,您的HTTP請求計數將減少1,並且您仍然可以使用表情符號 ?

8.減少/消除第三方HTTP請求

到目前為止,我們主要致力於減少WordPress網站伺服器上文件的HTTP請求。但是,訪問者的瀏覽器可能還需要從第三方伺服器請求文件。

這些請求可能會更加麻煩,因為您的站點受這些第三方伺服器速度的影響。

一些例子:

  • Google Analytics-跟蹤腳本託管在Google的伺服器上,但是訪問者的瀏覽器仍然需要下載該文件。
  • 嵌入式YouTube視頻–您會看到對YouTube伺服器的大量HTTP請求。
  • 第三方廣告服務–您會看到大量與廣告投放相關的第三方請求。
  • Google字體(在Google的CDN上)–您會看到對Google伺服器的第三方請求,以載入您的字體文件。

您可以從上面將許多相同的策略應用於這些第三方HTTP請求。

例如,如果一個插件添加了自己的第三方請求(如上面的AddThis插件那樣),則可以將其刪除並使用更優化的功能。

需要一個可以為您帶來競爭優勢的託管解決方案?Kinsta為您提供了令人難以置信的速度,最先進的安全性和自動縮放功能。查看我們的計劃

對於YouTube視頻,您可以延遲載入它們並將初始頁面載入替換為圖像縮略圖。這將延遲添加這些HTTP請求,直到訪問者想要播放視頻為止。

對於必要的第三方腳本,例如Google Analytics(分析)或Facebook Pixel,您可以嘗試在本地託管這些腳本。

WP Rocket具有內置的載入項,可在本地託管Google Analytics(分析)和Facebook Pixel,也可以使用諸如CAOS(完整的Analytics Optimization Suite)之類的插件。

我們還有一些指南可能會有所幫助:

  • 如何在本地託管字體
  • 如何在本地託管Google Analytics(分析)

9.結合圖像和CSS Sprites

至此,您應該希望能夠從您的站點發出更少的HTTP請求。現在,是時候開始研究如何結合從圖像開始的剩餘HTTP請求。

優化您站點上圖像的另一種方法是將單獨的圖像合併為一個圖像文件。然後,您可以使用CSS在需要的地方僅顯示該圖像文件的一部分。這是一種稱為CSS Sprite的策略。

CSS精靈最適合裝飾徽標或圖標之類的裝飾圖像。您不應該將CSS Sprites用於信息圖像(例如博客文章正文中的圖像),因為存在兩個主要缺點:

  • SEO –因為您要將圖像合併為一個圖像文件,所以無法在Google搜索中對單個圖像進行排名。
  • 可訪問性–由於您無法在圖片中添加替代文字,因此使用屏幕閱讀器的人將無法理解載入有CSS精靈的圖片(儘管有一些策略可以解決此問題)。

如果您對此主題仍然感到困惑,那麼這裡是Amazon CSS sprite文件的示例–您可以看到它如何包含大量徽標變體以及一些圖標。Amazon使用CSS來確保在每個位置僅顯示該圖像文件的相關「部分」:

來自Amazon的CSS精靈的示例。 您使用CSS來

來自Amazon的CSS精靈的示例。您可以使用CSS「定位」合併圖像的特定部分。

不幸的是,沒有用於CSS sprites的「設置並忘記它」 WordPress插件。但是,您可以找到可以提供幫助的工具,例如CSS Sprite Tool:

  1. 將要合併的圖像上傳到工具。
  2. 然後,該工具將為您提供一個組合的圖像文件,以及您上傳的每個圖像的一些CSS代碼。
  3. 將合併的圖像文件上傳到您的WordPress網站。
  4. 使用CSS代碼在您的內容中顯示圖像。提供的CSS將僅自動選擇組合圖像文件的適當部分。

10.合併CSS和JavaScript文件

在您的WordPress主題和插件之間,您的站點可能將載入多個CSS樣式表和JavaScript文件,這意味著多個HTTP請求僅用於瀏覽器下載呈現頁面所需的CSS和JavaScript。

要減少所有這些單獨的請求,可以將這些單獨的文件/樣式表組合為一個文件/樣式表。根據所使用的工具,這稱為文件組合或文件串聯。

許多WordPress緩存插件包括將CSS和JavaScript文件組合在一起的功能。例如,您可以在Kinsta上使用WP Rocket,只需單擊幾下即可啟用兩者。

轉到WP Rocket設置中的「文件優化」選項卡。然後,啟用縮小功能,然後合併文件:

如何在WP Rocket中結合CSS和JavaScript-減少HTTP請求

如何在WP Rocket中結合CSS和JavaScript

有關更詳細的信息,請查看我們完整的WP Rocket指南。

您還可以使用「自動優化」來組合CSS和JavaScript文件。要合併文件,請轉到設置→自動優化,然後選擇以下選項:

  • 聚合JS文件
  • 匯總CSS文件

有關更詳細的外觀,請查看我們的完整「自動優化」教程。

使用HTTP / 2不清楚文件組合的好處,如果您在Kinsta託管,這就是您的站點使用的東西。HTTP / 2旨在更有效地傳輸多個小文件,這意味著一個大CSS / JS文件和多個小文件之間的差異較小。

基本上,如果您在Kinsta託管,則可能無需執行此步驟即可縮短頁面載入時間。我們建議仍對其進行測試,因為它可能仍對某些站點有益,但是您也可能不會注意到實際頁面載入時間的任何差異。

但是,許多性能測試工具(例如GTmetrix)仍然無法識別HTTP / 2,因此GTmetrix可能仍會顯示「 Make Fe更少的HTTP請求」消息並降低您的得分。不過請記住,分數與實際頁面載入時間無關緊要。

11.推遲渲染阻止JavaScript

延遲渲染阻止JavaScript本身並不能消除HTTP請求。但是,它正在優化它們的載入方式,這可以對您的站點的感知載入時間產生相同的影響。

它還可以幫助解決Google PageSpeed Insights / Lighthouse中的「避免鏈接關鍵請求」消息。

通過推遲對某些文件的請求或非同步載入它們,可以防止某些不重要的資源「阻塞」快速載入站點的可見部分所需的資源。

有關發生這種情況的更多信息,您可以閱讀我們的指南,以了解網頁的關鍵呈現路徑。

然後,您可以按照我們的詳細指南來消除WordPress上的渲染阻止資源。

最好的WordPress插件以減少HTTP請求

如果您正在尋找一些「多合一」 WordPress插件來減少HTTP請求,我們建議您使用上面教程中的兩個插件:

  • WP火箭
  • 香氣

雖然您仍然需要手動評估主題和插件,以查看它們是否發出過多的HTTP請求,但完成清理後,這兩個插件都可以幫助您優化網站上剩餘的所有內容。

更多的HTTP請求=較慢的網站載入時間。藉助本指南來減少您的請求,打破這一循環?單擊鳴叫
摘要

您網站上每個單獨的資源都會添加一個HTTP請求。一幅圖片是一個HTTP請求,一個CSS樣式表是一個HTTP請求,一個字體文件是一個HTTP請求,依此類推。

如果您使用的是WordPress,則您的主題肯定會添加自己的HTTP請求,並且許多插件也會添加自己的HTTP請求。您還將收到來自所使用的任何圖像的HTTP請求以及所添加的第三方腳本(例如分析工具)。

更多和/或更大的HTTP請求將導致網站變慢。這就是為什麼當您使用諸如GTmetrix或PageSpeed Insights之類的速度測試工具時,通常會看到諸如「減少HTTP請求」或「優化HTTP請求」或「避免鏈接關鍵請求」之類的消息的原因。

為了減少您網站上HTTP請求的數量,您可以按照上面詳細介紹的步驟進行操作。

您仍然對如何在WordPress中減少HTTP請求有任何疑問嗎?讓我們在評論中知道!

如果您喜歡這篇文章,那麼您會喜歡Kinsta的WordPress託管平台。加速您的網站並獲得我們經驗豐富的WordPress團隊的24/7支持。我們基於Google Cloud的基礎架構專註於自動擴展,性能和安全性。讓我們向您展示Kinsta的與眾不同!查看我們的計劃

相關文章