如何減少WordPress中的HTTP / S請求

[ad_1]

如果您願意,這是一個您會喜歡的故事 加快您的WordPress網站

前幾天,我建立了一個閃亮的網站。我全力以赴,並添加了WooCommerce,Google跟蹤代碼管理器,OneSignal,幫助中心,Yoast,直播廣播(哦,是的,我這樣做了),Cookie Notice,社交媒體和許多其他插件。

就像您一樣,我一直想給訪客留下深刻的印象,或者我想。但是,事情變得如此緩慢。痛苦過後,我開除了 GTMetrix 清除問題。

令我沮喪的是,我看到了:

gtmetrix速度測試結果

我印象深刻嗎?地獄到NAW!我想獲得一個完美的A,並將頁面載入時間減少到兩秒以內。

因此,我按下了「重新測試」按鈕,但是您猜怎麼著?還是一樣令人噁心的結果。我感到震驚,甚至生氣。但是我不會輕易放棄,因為這種事情是不可接受的。

你知道我接下來要做什麼嗎?我在上測試了該網站 平度 因為GTMetrix可以吸吮它。但是,下面再次是慘淡的結果:

pingdom工具速度測試結果

我很生氣。我肉體上的棘手問題是錯誤的HTTP請求,因為我可以快速解決許多其他問題。

更糟的是,我正在使用 電子商務WordPress主題 載入了十億個元素來構建首頁。在我的辯護中,它看起來令人難以置信。一些用戶也同意設計是正確的,所以,是的,我並不是一個人trick花一現?

但是出色的視覺設計和緩慢的速度並不能並存。我需要一個解決方案並且快速。

如何減少WordPress網站上的HTTP請求?

每次您訪問WordPress網站時,瀏覽器和網站伺服器之間都會傳輸大量數據。換句話說,WordPress向各種伺服器發出HTTP請求,以構建用戶在載入您的網站時看到的內容。

如果您的WordPress網站需要載入很多元素,那麼您將有更多的HTTP請求,反之亦然。更多的HTTP請求意味著網站速度慢,用戶體驗(UX)差,SEO分數差和轉換率低。

WordPress網站通常是動態的,這意味著需要很多不同的部分才能在瀏覽器中呈現您的網站。好消息是您可以減少HTTP請求並顯著加快站點速度。

在今天的帖子中,您將確切地學習如何做!

GTMetrix和Pingdom的報告通常會向您顯示問題所在。因此,使用這兩種工具測試您的站點,以找出您必須改進的地方。準備好報告後,以下是減少HTTP / S請求並加快WordPress網站速度的方法。

步驟1:整理

夥計們,如果您的WordPress網站上有很多東西,您將有太多的HTTP請求。沒關係。減少HTTP請求的第一步是整理。

意思是說,擺脫所有不需要的插件。 WordPress插件附帶了大量文件,可以是PHP,CSS或JavaScript(JS)。每個插件觸發的每個文件都會創建一個HTTP請求。

如果您有大量的插件,則肯定會有更多的HTTP請求。插件越少,請求越少。很簡單。

該怎麼辦?

對您的插件進行審核。您必須運行哪個插件?是否有不需要的插件?您是否有可利用第三方伺服器的插件?您可以不用這些插件嗎?

為了減少HTTP請求,請卸載所有不需要的插件。如果偶爾需要插件,請僅在需要時安裝。之後,卸載插件。

不用的WordPress主題和內容也是如此。清理所有東西。刪除所有不需要的內容;這對您的網站速度和安全性很有幫助。

您可以加倍努力並有選擇地載入插件。例如,如果您只需要聯繫表7即可在您的聯繫頁面上載入,則可以阻止其他插件在該特定頁面上載入。

那太棒了,您不同意嗎?並且認為您只需要Asset CleanUp WordPress插件即可。

WP Asset CleanUp WordPress插件

查看演示了解更多並下載

該插件易於使用,效率很高。或如開發人員所說:

「資產清理」將掃描您的頁面並檢測所有已載入的資產。編輯頁面/帖子時,您要做的只是選擇不需要載入的CSS / JS,這樣可以減少膨脹。

清理您已經安裝的文件;擺脫垃圾-包括垃圾評論。哦耶, 消除斷開的鏈接優化資料庫 同時也是如此。這些是可以提高網站速度的重要方面,但我離題。

讓我們回到減少HTTP請求的角度。

步驟2:優化圖片

沒有圖像的網站很單調。他們說一張圖片說出一千個單詞,這很酷。但是每個圖像都佔一個HTTP請求。要加重鹽分,圖像是載入時間較長的元素中的最重要部分。

儘管如此,我們仍然不能忽略大多數WordPress主題(閱讀網站)都依賴圖像這一事實,並且很多圖像都與此有關。因此,鑒於此,如何通過優化圖像來減少HTTP請求?

對於初學者,請清除所有不使用的圖像。無情;擺脫所有腫-您不需要它。之後, 壓縮和優化圖像 刪除不必要的文件數據。

WP壓縮插件

查看演示了解更多並下載

儘管有許多插件可供選擇,但我們確實很喜歡WP Compress。雖然這是一項高級服務,但強大的圖像自動優化功能,無損壓縮,可減少伺服器負載的雲處理,WebP圖像支持,自動調整大小等功能,使您的投資物有所值(請查看我們的 評論 了解更多)。另外,您可以免費獲得100張圖片的聲明-因此您至少可以嘗試一下。

優化圖像本身並不會減少您的HTTP請求,但會減少圖像文件的大小,從而轉化為 更高的頁面速度 下線。

另外,要減少HTTP請求,請利用 CSS圖像精靈。對於初學者來說,子畫面是將圖像合併到單個圖像文件中的集合。

然後,使用CSS技巧,您可以選擇顯示圖像的哪一部分。但是,這如何減少HTTP請求?這是一個比喻。

假設您在首頁上需要五張圖片。要載入您的網站,您的WordPress安裝將五次訪問伺服器以獲取圖像。現在,如果將所有五個圖像都放在一個圖像文件(子畫面)中,則WordPress安裝只會進行一次旅行。

你知道我要去哪裡嗎?行程越少,HTTP請求就越少。最好的部分是您無需費心創建和實現CSS圖像精靈。您可以使用以下工具 CSS Sprite Generator。只要您了解CSS的方式,即可輕鬆實現CSS圖像精靈。

專家提示:如果您的網站使用支持圖像和腳本非同步載入的HTTP / 2,則您可能會忘記所有有關CSS圖像精靈的信息。在評估性能時,GTMetrix並未考慮HTTP / 2,因此不必擔心您的圖像似乎在創建大量的HTTP請求。

但是我要說的是:如果CSS圖像精靈可以顯著減少您網站上的HTTP請求,並且您知道如何實現該請求,那麼就去解決它,並節省頁面載入時間的額外時間。是否有HTTP / 2。

畢竟,單個圖像文件需要單個HTTP請求。十個單獨的圖像需要10個HTTP請求,依此類推。我知道你會漂移。

步驟3:結合併縮小HTML,CSS和JavaScript

我的WordPress網站上許多HTTP請求的主要原因是外部CSS和JavaScript文件。是的,我要處理43個JS腳本和22個CSS文件。那是多達66個HTTP請求。

在大約130個HTTP請求中,外部CSS和JavaScript請求約佔問題的51%!那太荒謬了。謝謝,GTMetrix,bump我的拳頭。

如果我將這44個JS文件和22個CSS文件合併並縮小,則可以大大減少HTTP請求,網站的大小以及載入時間。但是,這種「合併」和「最小化」業務到底是什麼呢?

根據 雷琳·莫雷(Raelene Morey) 在《鳥語集》中(我非常喜歡),縮小是「…刪除HTML,CSS和JavaScript文件中不需要的任何不必要的字元(如注釋,格式,空格和換行符)的過程。要執行的代碼。」

最小化通過消除所有其他字元以僅保留代碼來減小文件大小。但是,如果您有66個以上的外部腳本,則縮小對減少HTTP請求的作用不會很大。為此,您需要組合CSS和JavaScript文件。

雷琳再次說:

同時,合併文件就像聽起來一樣。例如,如果您的網頁載入了5個外部CSS文件和5個外部JavaScript文件,那麼將您的CSS和JavaScript合併為一個單獨的文件,每個文件只會導致2個請求,而不是10個請求。

你明白了嗎?我當然希望如此。合併文件可減少HTTP請求。另一方面,縮小可以減小文件大小。將兩者結合起來,就可以用同一塊石頭殺死兩隻鳥。

有插件嗎?當然是!

WP Rocket WordPress緩存插件

查看演示了解更多並下載

有大量的WordPress插件可以合併和縮小文件。 WP Rocket插件就是一個很好的例子。它基本上是 最好的緩存插件 只需單擊幾下,即可為您提供合併和縮小文件的功能。

另一個流行(免費)的選項是 自動優化 插入。

順便說一句,同時減少外部CSS文件和JS腳本的數量?例如,我們在這裡沒有提及名稱,您是否真的需要第三方評論平台?您需要直播收音機插件嗎?

我說什麼都沒關係,請消除所有不需要的外部腳本和文件。

步驟4:調整渲染阻止CSS和JavaScript文件

在某些情況下,合併文件可能不是一種選擇,尤其是對於頻繁更改的第三方文件和腳本而言。在這種情況下,您可以推遲此類資產的載入。 HTTP / 2支持非同步載入文件,這意味著所有文件同時載入。

如果由於某種原因(例如您未使用HTTP / 2,或者腳本不是非同步的)而沒有進行非同步載入,則這些文件會大大降低您的網站速度。

請記住,您的網頁從上到下載入。如果頁面頂部有阻止渲染的CSS和JS,則瀏覽器將停止載入,直到文件完全載入為止。這樣,在腳本載入之前,用戶將看到空白頁,這需要花費時間。

怎麼樣?將所有渲染阻止腳本從網頁的頂部移至底部。但是請注意這裡;您無需將所有腳本移到底部。我之所以這樣說,是因為您的頁面可能需要CSS和JS才能提供完全吸引人的體驗。

如果推遲一些CSS或JavaScript文件,則用戶可能會看到網頁的變形版本,直到頁面完全載入為止,這恰恰與您要實現的目標相反。

因此,僅延遲頁面載入不需要的腳本。這樣一來,您的用戶就不會再等待年齡的載入。為什麼?因為您將需要更少的HTTP請求來傳遞消息。

它本身並不能減少HTTP請求(因為所有腳本和文件最終都將載入),但是可以減少呈現頁面所需的HTTP請求數量。

非常像 延遲載入 用於圖像;僅當圖像在視口中時才載入圖像,而不是頁面的其餘部分(以及最重要的部分)正在載入時才載入圖像。

順便說一句,修復阻止渲染的CSS和JS可能會揭示您不需要構建網頁的文件和腳本。

例如,如果某些外部社交共享JS腳本的載入時間很長,則可以推遲它。最重要的是,您可以消除它,並在主題中建立社交共享。

您將消除HTTP請求,並在保留相同功能的同時加快站點速度。我了解將編碼功能編碼到您的主題中對於大多數初學者來說是一個很高的要求,因此請與高級WP用戶或開發人員聯繫。

或者,您可以使用WP Rocket插件來修復渲染阻止腳本,但要小心。閱讀他們的文檔,因為如果您搞砸了,則可以輕鬆破壞您的網站。

有免費的選擇嗎?當然!我們正在使用WordPress,還記得嗎?您可以使用 非同步JavaScript,以及其他插件。

步驟5:使用緩存和CDN

您知道緩存和CDN可以減少HTTP請求嗎?乍一看似乎不是事實,但是當您考慮幕後發生的事情時,可以利用緩存和CDN發揮自己的優勢。

緩存涉及將靜態文件存儲在瀏覽器中,以便用戶在以後的訪問中不再下載文件。假設您有一個緩存插件,並且用戶在第一次訪問時就下載了緩存的內容。

在隨後的訪問中,您的網站不會向伺服器發出請求。相反,它將通過瀏覽器提供緩存的資源,從而減少HTTP請求並提高網站速度。

CDN(或內容交付網路)是遍布全球的伺服器網路。 CDN也使用緩存,但是為了提高速度,CDN提供程序從離訪問者最近的伺服器提供緩存的內容。

較短的距離意味著更快的內容交付,而緩存則意味著您的網站無需從中央伺服器重新下載相同的內容。這對您有意義嗎?

Cloudflare CDN插件

查看演示了解更多並下載

最好的是, 免費CDN 選項(或至少免費試用版,這樣您就可以從字面上看出它的不同之處)。在WPExplorer中,我們使用並強烈推薦CLoudflare,但是選擇您認為最適合自己的CDN。

獎勵:確保支持HTTP / 2

您可能會盡一切努力減少HTTP請求,但您的Web主機可能是造成麻煩的原因。不要感到驚訝;問和思考,在這個時代,除了HTTP / 2之外,誰還使用其他任何東西?

您甚至可能都不知道 HTTP / 2 關於一切。好吧,對於初學者來說,HTTP / 2除其他外還支持文件的非同步載入。與HTTP 1.0相比,它還有其他好處,但這是另一天的教訓。

如果使用HTTP 1.0或更低版本,您會注意到大量的HTTP請求。

不要快速判斷;我見過仍然使用HTTP 1.0和舊版本PHP的網路託管提供商。是的,即使具有HTTP / 2和PHP 7的明顯好處。我什至沒有虛張聲勢;當他們的某些插件不起作用時,他們的一些客戶來找我,這很煩人!

但是,為什麼呢?不贊成使用PHP 5.6並且具有安全漏洞的事實困擾著某些Web託管提供商,這只是另一回事。如果他們不支持HTTP / 2,那對您來說確實是個大難題。

KeyCDN HTTP / 2測試

聯繫您的房東或使用 KeyCDN的工具 檢查您的伺服器是否支持HTTP / 2。最好的網路主機支持HTTP / 2和最新版本的PHP。如果您的主機在兩種情況下都落後,請要求他們升級或選擇更好的Web主機。

最後的話

減少WordPress網站上的HTTP請求就是消除不需要的東西。如果您的WordPress網站上有很多東西,您將有很多HTTP請求和相對較慢的頁面速度。

為了減少HTTP請求,請整理站點,優化圖像,修復渲染阻止腳本,使用緩存並確保主機支持HTTP / 2。除此之外,請努力創建不需要大量資源即可載入的簡單整潔的網站。

如果您有任何疑問,請在下面的評論部分中告訴我們。為更快的網站加油,並為美好的未來加油!

相關文章