建站
咨詢
售后
建站咨詢
新聞中心
許多優(yōu)化文章都關注如何加快wordpress網(wǎng)站的速度，例如優(yōu)化圖像或遷移到更快的主機。雖然這些都很重要，但今天我們想與您討論第三方性能的影響以及它如何影響您的WordPress網(wǎng)站。基本上，您從站點外部調(diào)用的任何內(nèi)容都會產(chǎn)生加載時間后果。使這個問題更加嚴重的是，其中一些只是間歇性地緩慢，使得問題的識別更加困難。今天我們將探索識別和分析第三方服務和性能問題的方法。
創(chuàng)新互聯(lián)成立于2013年，是專業(yè)互聯(lián)網(wǎng)技術服務公司，擁有項目成都網(wǎng)站設計、做網(wǎng)站網(wǎng)站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元岳塘做網(wǎng)站,已為上家服務,為岳塘各地企業(yè)和個人服務,聯(lián)系電話:13518219792
- 什么是第三方外部服務？
- 識別外部服務
- 分析持續(xù)的第三方性能問題
- 分析間歇性第三方性能問題
什么是第三方外部服務？
第三方外部服務可以被認為是從您自己的服務器外部與您的WordPress站點通信的任何東西。以下是我們經(jīng)常遇到的一些常見示例：
- 社交媒體平臺，如Twitter、Facebook和Instagram（小工具或轉換像素）
- 第三方廣告網(wǎng)絡，如Google Adsense、Media.net、BuySellAds、Amazon Associates
- 網(wǎng)站分析，例如Google Analytics、Crazy Egg、Hotjar
- A/B測試工具，例如Optimizely、VWO、Unbounce
- WordPress評論系統(tǒng)，例如Disqus、Jetpack、Facebook評論
- 備份和安全工具，例如 VaultPress、Sucuri、CodeGuard
- SumoMe、HelloBar等社交分享工具
- CDN網(wǎng)絡，例如KeyCDN、Amazon CloudFront、CDN77和StackPath
- 外部托管的Javascript
外部服務如何導致問題
外部服務通常會帶來兩個問題。一個是由純粹的體積帶來的，另一個是等到它們加載。
- 如果您有很多外部服務，則需要加載所有這些服務，并在每次頁面加載時等待來自它們的信息。您的呼叫越多，等待的時間越長，您自己的服務器上的負載就越高，您遇到第二個問題的機會就越大。
- 在某些情況下，頁面加載將等到您的站點和外部服務之間的數(shù)據(jù)傳輸完成。如果在標頭中調(diào)用服務并且服務中斷，您的頁面將簡單地拒絕加載。
當然，可以做一些事情來加快速度，例如異步加載腳本，但我們稍后會介紹他。在大多數(shù)情況下，龐大的體積是調(diào)試3rd方性能問題時必須處理的最大問題之一。
識別外部服務
識別這些服務并不難。最簡單的方法之一是打開網(wǎng)站速度測試工具，無論是Pingdom、GTmetrix、WebPageTest還是Chrome Devtools，并通過它運行您的網(wǎng)站。您應該會看到已加載的資源列表。將鼠標懸停在資源上，如果它在開頭不包含您的域名，則它是您正在調(diào)用的外部服務或外部資產(chǎn)。
您可以在下面看到縮小版的jQuery是從外部源 (https://ajax.googleapis.com) 加載的。
外部服務——JavaScript
如果您不知道外部服務的用途，您可以隨時嘗試瀏覽主域或在Google中搜索其名稱，因為應該會出現(xiàn)相關的開發(fā)人員或公司。這是確定服務是否合法的好方法。正如您在下面看到的，搜索jQuery文件會導致一些知名公司（如jQuery和Google）描述托管此文件。所以你可能是安全的。
jQuery外部腳本
分析持續(xù)的第三方性能問題
如果您的網(wǎng)站總是很慢，那么您需要弄清楚是什么讓它變慢了。如果您的網(wǎng)站有間歇性問題，那就有點困難了。讓我們從持續(xù)緩慢開始。我們在這里假設您的網(wǎng)站由于外部服務而運行緩慢。雖然許多速度問題可能是由外部服務引起的，但還有大量其他問題，因此這可能無法解決您的問題。
首先，您需要確定是否有任何服務需要很長時間才能加載，以及它如何影響您網(wǎng)站的性能。所以我們建立了一個測試站點，其中包含以下內(nèi)容：
- 2個AdSense廣告
- 臉書點贊框
- Instagram小工具
- Disqus評論
- Facebook轉化跟蹤像素
- 谷歌分析
WordPress測試站點
這將使我們能夠一項一項地刪除每項服務，并向您展示它們對您的整體網(wǎng)站負載的影響程度。我們還將分享一些加載它們的替代方法的策略。然后，您可以將相同的策略應用于您自己的WordPress網(wǎng)站。我們通過Pingdom運行測試站點，您可以看到的第一件事是“按域的內(nèi)容大小”和“按域的請求”。如果您看到請求，而不是來自您的域名，則這些請求很可能是外部服務或外部資產(chǎn)。這是一個很好的起點。正如您在下面看到的，static.xx.fbcdn.net有37個請求，這不好！
Pingdom外部服務——（速度測試）
站點加載時間也是1.94秒，這真的很糟糕，因為正如您在上面看到的，測試站點上沒有任何內(nèi)容。這是一個較小規(guī)模的測試，可幫助您更好地分析第三方性能。WordPress網(wǎng)站越大，問題就越大。但從根本上說，大多數(shù)問題都可以通過類似的方式解決。
處理Google AdSense
我們首先要解決的是Google Adsense。通常，當您運行速度測試時，您可以將鼠標懸停在每個條上，以查看加載過程的每個部分花費了多長時間。您應該尋找超長的條（與其他條相比）以及僅在特定條完成后才開始加載條的地方——這些是您的瓶頸。一旦您發(fā)現(xiàn)某個特定元素的加載時間過長或阻止其他資源加載，您就需要弄清楚它為何存在以及它來自何處。
這可能有點困難，對服務的調(diào)用可以在您的主題中編碼，也可以來自插件。但是，正如我們之前提到的，還有絕對數(shù)量的問題。如果我們查看下面來自pagead2.googlesyndication.com和tpc.googlesyndication.com的請求，我們可以看到這些條相當短，這意味著它們不會造成那么大的延遲。不過，其中一些確實有更長的接收時間（綠色條），這是Web瀏覽器從服務器接收數(shù)據(jù)所需的時間。最大的問題是一旦將所有請求加在一起。
我們喜歡將Google AdSense稱為可變的3rd-party服務。這是因為每次加載頁面時都會加載不同數(shù)量的請求和資產(chǎn)。這使得很難確定是什么導致了性能問題，因為每次運行速度測試都會有所不同。以下只是廣告生成的一些第3方請求的片段。它們還生成重定向，它們有自己的延遲。
Google AdSense外部請求
您可能認為僅僅兩個廣告就產(chǎn)生如此多的請求是很瘋狂的，但這就是它們的工作原理。
選項 1 – 異步加載
您的第一個選擇是確保它們異步加載。async屬性基本上告訴瀏覽器立即開始下載資源，而不會減慢HTML解析速度。一旦資源可用，HTML解析就會暫停，以便可以加載資源。默認情況下，從Google AdSense新生成的代碼將具有此屬性，但如果您的代碼還有幾年的歷史，我們建議您檢查它。
請務必查看我們關于消除渲染阻塞JavaScript和CSS的另一篇文章。這可以幫助您更好地了解腳本如何在您的WordPress網(wǎng)站上加載和運行。
選項 2 – 刪除它們
您的另一個選擇是完全刪除Google AdSense。顯然，對于一些依賴第三方廣告收入的網(wǎng)站來說，這不是一個選擇。但是我們已經(jīng)看到電子商務網(wǎng)站在他們的網(wǎng)站上投放AdSense廣告，只是想快速賺錢。您應該意識到這方面的性能問題。如果您銷售產(chǎn)品或服務，則一個Google AdSense廣告可能弊大于利，并損害您的主要收入來源。對于博客作者，您還可以查看聯(lián)屬網(wǎng)絡廣告與AdSense。很多時候，您可以從CDN加載聯(lián)屬網(wǎng)絡廣告，并且只會有一個請求。
在此示例中，我們將刪除廣告，以向您展示僅兩個小廣告如何影響您的WordPress網(wǎng)站的整體性能。因此，我們在移除它們后進行了另一次速度測試，您可以看到我們的加載時間從1.94秒下降到909毫秒！我們的請求從185減少到138，我們的整體頁面大小從2MB 減少到1.7MB。
刪除Google AdSense后（速度測試）
那就對了！兩個小廣告為我們的整體加載時間增加了大約一秒鐘。這就是為什么除非您的收入模式圍繞第三方廣告，否則不要將它們放在您的WordPress網(wǎng)站上。如果您的廣告網(wǎng)絡有問題，并且您有一個插件可以為您處理廣告網(wǎng)絡，那么禁用該插件很可能會解決該問題。如果它在主題中編碼，則需要修改主題文件。如果您是開發(fā)人員，我們建議您執(zhí)行以下兩項操作。
解決Facebook Like框
接下來要看的是導致所有這些static.xx.fbcdn.net和scontent.xx.fbcdn.net請求的Facebook類似框。我們可以看到這些條相當短，這意味著它們不會造成太多延遲。但是，一旦將它們?nèi)考釉谝黄穑@就是問題所在。同樣，這是一個絕對數(shù)量的問題。
Facebook小部件請求
我們建議每位網(wǎng)站所有者遠離Facebook點贊框！它不僅會向外部JavaScript生成大量請求，還會加載大量圖像。這里有三個建議可以更好地處理這個問題。
選項 1 – 異步加載
要使用Facebook點贊框，您或開發(fā)人員必須將以下代碼添加到您的WordPress站點的標題中。還有一些WordPress小工具也添加了該框。
上面代碼的問題是它沒有異步加載。async屬性基本上告訴瀏覽器立即開始下載資源，而不會減慢HTML解析速度。一旦資源可用，HTML解析就會暫停，以便可以加載資源。我們不確定為什么Facebook沒有將此屬性添加到腳本中，但您可以在下面看到修改后的版本，它將異步加載它。
如果您在Pingdom中檢查它，您可能不會注意到加載時間有太大差異，但您的訪問者肯定會注意到，因為它會影響腳本和資產(chǎn)的加載方式/時間。
選項 2 – 改用圖片橫幅
下一個建議是用一個簡單地鏈接到您的Facebook頁面的橫幅圖像替換Facebook點贊框。這會立即將40多個請求減少到1個，并且您將不再擁有外部依賴項。你可以通過這種方式變得非常有創(chuàng)意，并且在設計和性能之間取得了很好的平衡。
選項 3 – 擺脫它
最后，最后的選擇是完全擺脫它。我們在測試站點上就是這樣做的，如下所示，它將我們的加載時間從909毫秒降低到786毫秒。它將整體頁面重量從1.7MB 降低到1.0MB，將請求總數(shù)從138降低到78。這里要真正指出的一件事是頁面重量降低。Facebook點贊框增加了700 KB！這很糟糕。
刪除Facebook點贊框后（速度測試）
處理Instagram小部件
接下來要看的是Instagram Widget。在我們的示例中，我們使用的是免費的Instagram Feed插件。該插件實際上不是問題，而是生成的來自scontent.cdninstagram.com的請求。我們可以看到這些條相當短，這意味著它們不會造成太多延遲。但是，一旦將它們?nèi)考釉谝黄?，這就是問題所在。同樣，這是一個絕對數(shù)量的問題。您可能會看到這里形成了一種模式。WordPress網(wǎng)站上的許多3rd-party性能問題不是來自單個請求的延遲，而是那些不關心性能的開始。
Instagram外部請求
我們還建議人們遠離Instagram小部件，除非你真的需要它，因為它會產(chǎn)生大量請求。這里有一些建議可以更好地處理這個問題。
選項 1 – 改用圖片橫幅
就像Facebook的點贊框一樣，除非您真的需要動態(tài)Instagram小部件，否則請創(chuàng)建一個橫幅，而不是鏈接到您的Instagram頁面。這會立即將20多個請求減少到1個，并且您將不再擁有外部依賴項。你可以通過這種方式變得非常有創(chuàng)意，并且在設計和性能之間取得了很好的平衡。
選項 2 – 擺脫它
當然，您可以完全擺脫它。我們在測試站點上就是這樣做的，如下所示，它將我們的加載時間從786毫秒降低到690毫秒。它將整體頁面重量從1.0MB 減少到814.3KB，請求總數(shù)從78個減少到57個。
刪除Instagram小部件后（速度測試）
處理Disqus評論
接下來要看的是Disqus評論。在我們的示例中，我們使用免費的Disqus評論系統(tǒng)插件。Disqus的最大問題是它會產(chǎn)生大量請求，并且必須為每個評論的人加載gravatar。我們在有關如何加快WordPress評論速度的文章中對此進行了詳細介紹。
您可能還想完全禁用WordPress上的評論。
如果您是大型商業(yè)網(wǎng)站，您可能還需要付費才能刪除Disqus廣告，如果您不這樣做，最終會在您的網(wǎng)站上生成更多請求。您可以在下面看到它生成的一些請求的一小段。
Disqus外部請求
在處理評論方面，這里有一些建議。
選項 1 – 延遲加載Disqus評論
延遲加載是在用戶向下滾動頁面之前不加載資產(chǎn)和腳本的過程。這確保了首頁加載速度更快。您可以使用Joel James提供的免費Disqus Conditional Load插件輕松延遲加載Disqus評論。我們在測試站點上安裝了該插件，如下所示，它將我們的加載時間從690毫秒降至603毫秒。它將整體頁面重量從814 KB降低到366.1KB，將請求總數(shù)從57降低到24。需要指出的一件事是大幅降低頁面重量！
延遲加載Disqus后（速度測試）
選項 2 – 延遲加載原生WordPress評論
您的另一個最佳選擇是延遲加載原生WordPress評論。延遲加載Disqus插件的開發(fā)者Joel James也有一個名為Lazy Load for Comments的免費插件。這以與上述方式非常相似的方式工作。我們在測試站點上安裝了該插件，如下所示，它減少了幾乎相同的加載時間。
延遲加載原生WordPress評論后（速度測試）
處理Facebook轉化跟蹤像素
最后，我們來看看Facebook轉化跟蹤像素。顯然，大多數(shù)人使用它來收集有關訪問其網(wǎng)站的人的數(shù)據(jù)，或在投放Facebook廣告時跟蹤轉化。因此，刪除它可能并不總是一種選擇，而且您確實無法做任何事情來提高它的性能。正如您在下面看到的，它負責生成5個不同的HTTP請求，不幸的是，它們并不是最快的。
Facebook轉化跟蹤像素外部請求
我們將簡單地刪除它以向您展示它對您網(wǎng)站性能的影響程度。將其從我們的網(wǎng)站上取下后，我們的加載時間從611毫秒降至429毫秒。它將整體頁面重量從367.5 KB減少到343.2KB，請求總數(shù)從27減少到22。
去除FB像素后（速度測試）
以上示例只是您可能在WordPress網(wǎng)站上運行的數(shù)千個外部服務中的一小部分。查看每一項并確定它對您網(wǎng)站性能的影響程度非常重要。如您所見，只有一個壞蘋果會引起巨大的問題！
外部服務可以幫助提高績效
雖然大多數(shù)外部服務會損害您網(wǎng)站的性能，但也有一些可以幫助它。CDN（例如KeyCDN或Cloudflare）可以極大地加快您的網(wǎng)站速度，而只需進行最少的設置工作。在下面的示例中，我們將KeyCDN添加到我們的測試站點。如您所見，它使我們的加載時間又減少了100毫秒。
CDN后（速度測試）
進一步優(yōu)化
然后，我們對WordPress網(wǎng)站進行了一些額外的優(yōu)化，使我們的性能等級得分達到100分，加載時間為270毫秒。這些優(yōu)化包括：
- 確保從CDN提供商加載所有內(nèi)容。這意味著在本地托管Google字體并產(chǎn)生一個HTTP/2請求。
- 刪除生成不必要的HTTP請求的附加資產(chǎn)，例如表情符號、嵌入、jQuery遷移等。我們使用了perfmatters插件。
以下是一些優(yōu)化的更深入的教程：
- 如何禁用表情符號
- 如何禁用嵌入
- 如何修復瀏覽器緩存警告
- 如何從靜態(tài)資源中刪除查詢字符串
- 如何使用New Relic查找WordPress性能瓶頸
- 8個鮮為人知（但有用）的WordPress性能插件
優(yōu)化后（速度測試）
如您所見，我們的加載時間從 1.94 秒縮短到了 270 毫秒！當然，您可能需要一些外部服務，每個企業(yè)都需要。但重要的是不要忘記分析每一個。如果您發(fā)現(xiàn)加載時間過長，請聯(lián)系負責它的開發(fā)人員或公司并提出問題。
防止停滯加載
更大的問題是腳本在完成自身加載時阻止加載。如果像這樣的腳本包含在標題中，它可以使您的網(wǎng)站無限期地保持空白。因此，頁眉中并非絕對必要的任何內(nèi)容都應放在頁腳中。這將允許您的網(wǎng)站在有問題的腳本甚至開始加載之前完全加載。如果你使用wp_enqueue_script()函數(shù)（你應該），你可以使用第五個參數(shù)來指示它應該加載到頁腳中。
如果您發(fā)現(xiàn)插件無緣無故地在頁眉中加載了資產(chǎn)，您可以使用wp_dequeue_script()將其從頁眉中刪除，然后wp_enqueue_script()以相同的方式注冊它，但在頁腳中。
使用谷歌標簽管理器
幫助解決第三方性能問題的另一種方法是使用免費工具，例如Google Tag Manager。這使您可以在一個地方管理所有腳本和標簽。這樣做的一些好處是它們將異步加載，管理變得更容易，并且您可以為加載腳本的頁面設置觸發(fā)觸發(fā)器。
Google跟蹤代碼管理器觸發(fā)觸發(fā)器
但是，這樣做也有一些缺點：
Google跟蹤代碼管理器不會減少您網(wǎng)站或應用程序上的代碼數(shù)量，但它確實簡化了管理它們的任務。對于網(wǎng)站，Google跟蹤代碼管理器異步執(zhí)行，并且可以配置為僅在需要時觸發(fā)代碼，從而幫助您的頁面更快地加載。（來源）
如果您使用Google跟蹤代碼管理器，您還將有另一個HTTP請求和對googletagmanager.com的DNS查找，即使它非常微不足道。
googletagmanager.com請求
我們建議您使用Google跟蹤代碼管理器來查找具有大量第三方服務和集成的大型未優(yōu)化網(wǎng)站。對于擁有開發(fā)人員的小型網(wǎng)站，您很可能不會看到使用GTM帶來的性能提升。
分析間歇性第三方性能問題
解決間歇性問題的方式與解決持續(xù)性問題的方式相同，但找出罪魁禍首更加困難。實施上述解決方案可能已經(jīng)有所幫助，但知道導致問題的原因仍然很高興。我們喜歡使用的工具是New Relic。您可以在下面看到一些 3rd 方廣告網(wǎng)絡的示例以及一段時間內(nèi)與它們相關的大量加載時間。
New Relic Monitoring – 外部廣告網(wǎng)絡
但具有諷刺意味的是，New Relic也可能導致性能問題。在這種情況下，我們建議將其用于故障排除和零星監(jiān)控，而不是持續(xù)使用。您還可以使用GTMetrix之類的工具在您的站點上安排每小時速度檢查。幾天后，您可以查看并在一個漂亮的小圖表中查看結果：
GTmetrix報告時間
這會告訴您您的網(wǎng)站何時比平均速度慢。我們將首先單擊最右側的尖峰以進入該時間點創(chuàng)建的報告。然后，我們將查看瀑布以查看是哪個資源造成了問題。請務必查看我們關于如何使用GTmetrix診斷您網(wǎng)站上的問題的深入文章。
GTmetrix瀑布圖
那里有一個資產(chǎn)似乎會阻止后續(xù)資產(chǎn)，看看中間附近的綠色條。原來這是來自Google Recaptcha。632ms看似一瞬間，但實際上卻是很多。一個頁面真的應該在2 seconds-ish內(nèi)加載。其中超過三分之一僅由這一資產(chǎn)占用。資產(chǎn)應該稍后加載，或者應該放棄它以支持其他驗證方法。
小結
正如你所看到的，僅僅幾個外部服務就可以產(chǎn)生巨大的影響。第三方性能不容忽視，它與現(xiàn)場和后端優(yōu)化齊頭并進。值得慶幸的是，有很多事情可以做，特別是如果您涉及開發(fā)人員。拋棄服務，調(diào)整它們以以不同的方式（例如異步）加載，以另一種方式（例如橫幅）提供相同的東西，所有這些都可以大大提高您的網(wǎng)站速度！
新聞名稱：分析WordPress網(wǎng)站上的第三方服務性能
分享鏈接：http://www.dlmjj.cn/article/coeihoi.html
