許多優化文章都關注如何加快WordPress網站的速度，例如優化影象或遷移到更快的主機。雖然這些都很重要，但今天我們想與您討論第三方效能的影響以及它如何影響您的WordPress網站。基本上，您從站點外部呼叫的任何內容都會產生載入時間後果。使這個問題更加嚴重的是，其中一些只是間歇性地緩慢，使得問題的識別更加困難。今天我們將探索識別和分析第三方服務和效能問題的方法。
什麼是第三方外部服務？
第三方外部服務可以被認為是從您自己的伺服器外部與您的WordPress站點通訊的任何東西。以下是我們經常遇到的一些常見示例：
- 社交媒體平臺，如Twitter、Facebook和Instagram（小工具或轉換畫素）
- 第三方廣告網路，如Google Adsense、Media.net、BuySellAds、Amazon Associates
- 網站分析，例如Google Analytics、Crazy Egg、Hotjar
- A/B測試工具，例如Optimizely、VWO、Unbounce
- WordPress評論系統，例如Disqus、Jetpack、Facebook評論
- 備份和安全工具，例如 VaultPress、Sucuri、CodeGuard
- SumoMe、HelloBar等社交分享工具
- CDN網路，例如KeyCDN、Amazon CloudFront、CDN77和StackPath
- 外部託管的Javascript
外部服務如何導致問題
外部服務通常會帶來兩個問題。一個是由純粹的體積帶來的，另一個是等到它們載入。
- 如果您有很多外部服務，則需要載入所有這些服務，並在每次頁面載入時等待來自它們的資訊。您的呼叫越多，等待的時間越長，您自己的伺服器上的負載就越高，您遇到第二個問題的機會就越大。
- 在某些情況下，頁面載入將等到您的站點和外部服務之間的資料傳輸完成。如果在標頭中呼叫服務並且服務中斷，您的頁面將簡單地拒絕載入。
當然，可以做一些事情來加快速度，例如非同步載入指令碼，但我們稍後會介紹他。在大多數情況下，龐大的體積是除錯3rd方效能問題時必須處理的最大問題之一。
識別外部服務
識別這些服務並不難。最簡單的方法之一是開啟網站速度測試工具，無論是Pingdom、GTmetrix、WebPageTest還是Chrome Devtools，並通過它執行您的網站。您應該會看到已載入的資源列表。將滑鼠懸停在資源上，如果它在開頭不包含您的域名，則它是您正在呼叫的外部服務或外部資產。
您可以在下面看到縮小版的jQuery是從外部源 (https://ajax.googleapis.com) 載入的。
外部服務——JavaScript
如果您不知道外部服務的用途，您可以隨時嘗試瀏覽主域或在Google中搜尋其名稱，因為應該會出現相關的開發人員或公司。這是確定服務是否合法的好方法。正如您在下面看到的，搜尋jQuery檔案會導致一些知名公司（如jQuery和Google）描述託管此檔案。所以你可能是安全的。
jQuery外部指令碼
分析持續的第三方效能問題
如果您的網站總是很慢，那麼您需要弄清楚是什麼讓它變慢了。如果您的網站有間歇性問題，那就有點困難了。讓我們從持續緩慢開始。我們在這裡假設您的網站由於外部服務而執行緩慢。雖然許多速度問題可能是由外部服務引起的，但還有大量其他問題，因此這可能無法解決您的問題。
首先，您需要確定是否有任何服務需要很長時間才能載入，以及它如何影響您網站的效能。所以我們建立了一個測試站點，其中包含以下內容：
- 2個AdSense廣告
- 臉書點贊框
- Instagram小工具
- Disqus評論
- Facebook轉化跟蹤畫素
- 谷歌分析
WordPress測試站點
這將使我們能夠一項一項地刪除每項服務，並向您展示它們對您的整體網站負載的影響程度。我們還將分享一些載入它們的替代方法的策略。然後，您可以將相同的策略應用於您自己的WordPress網站。我們通過Pingdom執行測試站點，您可以看到的第一件事是“按域的內容大小”和“按域的請求”。如果您看到請求，而不是來自您的域名，則這些請求很可能是外部服務或外部資產。這是一個很好的起點。正如您在下面看到的，static.xx.fbcdn.net有37個請求，這不好！
Pingdom外部服務——（速度測試）
站點載入時間也是1.94秒，這真的很糟糕，因為正如您在上面看到的，測試站點上沒有任何內容。這是一個較小規模的測試，可幫助您更好地分析第三方效能。WordPress網站越大，問題就越大。但從根本上說，大多數問題都可以通過類似的方式解決。
處理Google AdSense
我們首先要解決的是Google Adsense。通常，當您執行速度測試時，您可以將滑鼠懸停在每個條上，以檢視載入過程的每個部分花費了多長時間。您應該尋找超長的條（與其他條相比）以及僅在特定條完成後才開始載入條的地方——這些是您的瓶頸。一旦您發現某個特定元素的載入時間過長或阻止其他資源載入，您就需要弄清楚它為何存在以及它來自何處。
這可能有點困難，對服務的呼叫可以在您的主題中編碼，也可以來自外掛。但是，正如我們之前提到的，還有絕對數量的問題。如果我們檢視下面來自pagead2.googlesyndication.com和tpc.googlesyndication.com的請求，我們可以看到這些條相當短，這意味著它們不會造成那麼大的延遲。不過，其中一些確實有更長的接收時間（綠色條），這是Web瀏覽器從伺服器接收資料所需的時間。最大的問題是一旦將所有請求加在一起。
我們喜歡將Google AdSense稱為可變的3rd-party服務。這是因為每次載入頁面時都會載入不同數量的請求和資產。這使得很難確定是什麼導致了效能問題，因為每次執行速度測試都會有所不同。以下只是廣告生成的一些第3方請求的片段。它們還生成重定向，它們有自己的延遲。
Google AdSense外部請求
您可能認為僅僅兩個廣告就產生如此多的請求是很瘋狂的，但這就是它們的工作原理。
選項 1 – 非同步載入
您的第一個選擇是確保它們非同步載入。async屬性基本上告訴瀏覽器立即開始下載資源，而不會減慢HTML解析速度。一旦資源可用，HTML解析就會暫停，以便可以載入資源。預設情況下，從Google AdSense新生成的程式碼將具有此屬性，但如果您的程式碼還有幾年的歷史，我們建議您檢查它。
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- nogluten-top-right-page-300x250 -->
<ins class="adsbygoogle" style="display: block;" data-ad-client="ca-pub-xxxxxxxxxxx" data-ad-slot="9805695044" data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
請務必檢視我們關於消除渲染阻塞JavaScript和CSS的另一篇文章。這可以幫助您更好地瞭解指令碼如何在您的WordPress網站上載入和執行。
選項 2 – 刪除它們
您的另一個選擇是完全刪除Google AdSense。顯然，對於一些依賴第三方廣告收入的網站來說，這不是一個選擇。但是我們已經看到電子商務網站在他們的網站上投放AdSense廣告，只是想快速賺錢。您應該意識到這方面的效能問題。如果您銷售產品或服務，則一個Google AdSense廣告可能弊大於利，並損害您的主要收入來源。對於部落格作者，您還可以檢視聯屬網路廣告與AdSense。很多時候，您可以從CDN載入聯屬網路廣告，並且只會有一個請求。
在此示例中，我們將刪除廣告，以向您展示僅兩個小廣告如何影響您的WordPress網站的整體效能。因此，我們在移除它們後進行了另一次速度測試，您可以看到我們的載入時間從1.94秒下降到909毫秒！我們的請求從185減少到138，我們的整體頁面大小從2MB 減少到1.7MB。
刪除Google AdSense後（速度測試）
那就對了！兩個小廣告為我們的整體載入時間增加了大約一秒鐘。這就是為什麼除非您的收入模式圍繞第三方廣告，否則不要將它們放在您的WordPress網站上。如果您的廣告網路有問題，並且您有一個外掛可以為您處理廣告網路，那麼禁用該外掛很可能會解決該問題。如果它在主題中編碼，則需要修改主題檔案。如果您是開發人員，我們建議您執行以下兩項操作。
解決Facebook Like框
接下來要看的是導致所有這些static.xx.fbcdn.net和scontent.xx.fbcdn.net請求的Facebook類似框。我們可以看到這些條相當短，這意味著它們不會造成太多延遲。但是，一旦將它們全部加在一起，這就是問題所在。同樣，這是一個絕對數量的問題。
Facebook小部件請求
我們建議每位網站所有者遠離Facebook點贊框！它不僅會向外部JavaScript生成大量請求，還會載入大量影象。這裡有三個建議可以更好地處理這個問題。
選項 1 – 非同步載入
要使用Facebook點贊框，您或開發人員必須將以下程式碼新增到您的WordPress站點的標題中。還有一些WordPress小工具也新增了該框。
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js. id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.9&appId=1697897870426976";
fjs.parentNode.insertBefore(js, fjs);
}(文件, '指令碼', 'facebook-jssdk'));</script>
上面程式碼的問題是它沒有非同步載入。async屬性基本上告訴瀏覽器立即開始下載資源，而不會減慢HTML解析速度。一旦資源可用，HTML解析就會暫停，以便可以載入資源。我們不確定為什麼Facebook沒有將此屬性新增到指令碼中，但您可以在下面看到修改後的版本，它將非同步載入它。
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js. id = id; js.async=true; js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.9&appId=1697897870426976";
fjs.parentNode.insertBefore(js, fjs) ;
}(document, 'script', 'facebook-jssdk'));</script>
如果您在Pingdom中檢查它，您可能不會注意到載入時間有太大差異，但您的訪問者肯定會注意到，因為它會影響指令碼和資產的載入方式/時間。
下一個建議是用一個簡單地連結到您的Facebook頁面的橫幅影象替換Facebook點贊框。這會立即將40多個請求減少到1個，並且您將不再擁有外部依賴項。你可以通過這種方式變得非常有創意，並且在設計和效能之間取得了很好的平衡。
選項 3 – 擺脫它
最後，最後的選擇是完全擺脫它。我們在測試站點上就是這樣做的，如下所示，它將我們的載入時間從909毫秒降低到786毫秒。它將整體頁面重量從1.7MB 降低到1.0MB，將請求總數從138降低到78。這裡要真正指出的一件事是頁面重量降低。Facebook點贊框增加了700 KB！這很糟糕。
刪除Facebook點贊框後（速度測試）
處理Instagram小部件
接下來要看的是Instagram Widget。在我們的示例中，我們使用的是免費的Instagram Feed外掛。該外掛實際上不是問題，而是生成的來自scontent.cdninstagram.com的請求。我們可以看到這些條相當短，這意味著它們不會造成太多延遲。但是，一旦將它們全部加在一起，這就是問題所在。同樣，這是一個絕對數量的問題。您可能會看到這裡形成了一種模式。WordPress網站上的許多3rd-party效能問題不是來自單個請求的延遲，而是那些不關心效能的開始。
Instagram外部請求
我們還建議人們遠離Instagram小部件，除非你真的需要它，因為它會產生大量請求。這裡有一些建議可以更好地處理這個問題。
就像Facebook的點贊框一樣，除非您真的需要動態Instagram小部件，否則請建立一個橫幅，而不是連結到您的Instagram頁面。這會立即將20多個請求減少到1個，並且您將不再擁有外部依賴項。你可以通過這種方式變得非常有創意，並且在設計和效能之間取得了很好的平衡。
選項 2 – 擺脫它
當然，您可以完全擺脫它。我們在測試站點上就是這樣做的，如下所示，它將我們的載入時間從786毫秒降低到690毫秒。它將整體頁面重量從1.0MB 減少到814.3KB，請求總數從78個減少到57個。
刪除Instagram小部件後（速度測試）
處理Disqus評論
接下來要看的是Disqus評論。在我們的示例中，我們使用免費的Disqus評論系統外掛。Disqus的最大問題是它會產生大量請求，並且必須為每個評論的人載入gravatar。我們在有關如何加快WordPress評論速度的文章中對此進行了詳細介紹。
您可能還想完全禁用WordPress上的評論。
如果您是大型商業網站，您可能還需要付費才能刪除Disqus廣告，如果您不這樣做，最終會在您的網站上生成更多請求。您可以在下面看到它生成的一些請求的一小段。
Disqus外部請求
在處理評論方面，這裡有一些建議。
選項 1 – 延遲載入Disqus評論
延遲載入是在使用者向下滾動頁面之前不載入資產和指令碼的過程。這確保了首頁載入速度更快。您可以使用Joel James提供的免費Disqus Conditional Load外掛輕鬆延遲載入Disqus評論。我們在測試站點上安裝了該外掛，如下所示，它將我們的載入時間從690毫秒降至603毫秒。它將整體頁面重量從814 KB降低到366.1KB，將請求總數從57降低到24。需要指出的一件事是大幅降低頁面重量！
延遲載入Disqus後（速度測試）
選項 2 – 延遲載入原生WordPress評論
您的另一個最佳選擇是延遲載入原生WordPress評論。延遲載入Disqus外掛的開發者Joel James也有一個名為Lazy Load for Comments的免費外掛。這以與上述方式非常相似的方式工作。我們在測試站點上安裝了該外掛，如下所示，它減少了幾乎相同的載入時間。
延遲載入原生WordPress評論後（速度測試）
處理Facebook轉化跟蹤畫素
最後，我們來看看Facebook轉化跟蹤畫素。顯然，大多數人使用它來收集有關訪問其網站的人的資料，或在投放Facebook廣告時跟蹤轉化。因此，刪除它可能並不總是一種選擇，而且您確實無法做任何事情來提高它的效能。正如您在下面看到的，它負責生成5個不同的HTTP請求，不幸的是，它們並不是最快的。
Facebook轉化跟蹤畫素外部請求
我們將簡單地刪除它以向您展示它對您網站效能的影響程度。將其從我們的網站上取下後，我們的載入時間從611毫秒降至429毫秒。它將整體頁面重量從367.5 KB減少到343.2KB，請求總數從27減少到22。
去除FB畫素後（速度測試）
以上示例只是您可能在WordPress網站上執行的數千個外部服務中的一小部分。檢視每一項並確定它對您網站效能的影響程度非常重要。如您所見，只有一個壞蘋果會引起巨大的問題！
外部服務可以幫助提高績效
雖然大多數外部服務會損害您網站的效能，但也有一些可以幫助它。CDN（例如KeyCDN或Cloudflare）可以極大地加快您的網站速度，而只需進行最少的設定工作。在下面的示例中，我們將KeyCDN新增到我們的測試站點。如您所見，它使我們的載入時間又減少了100毫秒。
CDN後（速度測試）
進一步優化
然後，我們對WordPress網站進行了一些額外的優化，使我們的效能等級得分達到100分，載入時間為270毫秒。這些優化包括：
- 確保從CDN提供商載入所有內容。這意味著在本地託管Google字型併產生一個HTTP/2請求。
- 刪除生成不必要的HTTP請求的附加資產，例如表情符號、嵌入、jQuery遷移等。我們使用了perfmatters外掛。
以下是一些優化的更深入的教學：
優化後（速度測試）
如您所見，我們的載入時間從 1.94 秒縮短到了 270 毫秒！當然，您可能需要一些外部服務，每個企業都需要。但重要的是不要忘記分析每一個。如果您發現載入時間過長，請聯絡負責它的開發人員或公司並提出問題。
防止停滯載入
更大的問題是指令碼在完成自身載入時阻止載入。如果像這樣的指令碼包含在標題中，它可以使您的網站無限期地保持空白。因此，頁首中並非絕對必要的任何內容都應放在頁尾中。這將允許您的網站在有問題的指令碼甚至開始載入之前完全載入。如果你使用wp_enqueue_script()函式（你應該），你可以使用第五個引數來指示它應該載入到頁尾中。
如果您發現外掛無緣無故地在頁首中載入了資產，您可以使用wp_dequeue_script()將其從頁首中刪除，然後wp_enqueue_script()以相同的方式註冊它，但在頁尾中。
使用谷歌標籤管理器
幫助解決第三方效能問題的另一種方法是使用免費工具，例如Google Tag Manager。這使您可以在一個地方管理所有指令碼和標籤。這樣做的一些好處是它們將非同步載入，管理變得更容易，並且您可以為載入指令碼的頁面設定觸發觸發器。
Google跟蹤程式碼管理器觸發觸發器
但是，這樣做也有一些缺點：
Google跟蹤程式碼管理器不會減少您網站或應用程式上的程式碼數量，但它確實簡化了管理它們的任務。對於網站，Google跟蹤程式碼管理器非同步執行，並且可以配置為僅在需要時觸發程式碼，從而幫助您的頁面更快地載入。（來源）
如果您使用Google跟蹤程式碼管理器，您還將有另一個HTTP請求和對googletagmanager.com的DNS查詢，即使它非常微不足道。
googletagmanager.com請求
我們建議您使用Google跟蹤程式碼管理器來查詢具有大量第三方服務和整合的大型未優化網站。對於擁有開發人員的小型網站，您很可能不會看到使用GTM帶來的效能提升。
分析間歇性第三方效能問題
解決間歇性問題的方式與解決持續性問題的方式相同，但找出罪魁禍首更加困難。實施上述解決方案可能已經有所幫助，但知道導致問題的原因仍然很高興。我們喜歡使用的工具是New Relic。您可以在下面看到一些 3rd 方廣告網路的示例以及一段時間內與它們相關的大量載入時間。
New Relic Monitoring – 外部廣告網路
但具有諷刺意味的是，New Relic也可能導致效能問題。在這種情況下，我們建議將其用於故障排除和零星監控，而不是持續使用。您還可以使用GTMetrix之類的工具在您的站點上安排每小時速度檢查。幾天後，您可以檢視並在一個漂亮的小圖表中檢視結果：
GTmetrix報告時間
這會告訴您您的網站何時比平均速度慢。我們將首先單擊最右側的尖峰以進入該時間點建立的報告。然後，我們將檢視瀑布以檢視是哪個資源造成了問題。請務必檢視我們關於如何使用GTmetrix診斷您網站上的問題的深入文章。
GTmetrix瀑布圖
那裡有一個資產似乎會阻止後續資產，看看中間附近的綠色條。原來這是來自Google Recaptcha。632ms看似一瞬間，但實際上卻是很多。一個頁面真的應該在2 seconds-ish內載入。其中超過三分之一僅由這一資產佔用。資產應該稍後載入，或者應該放棄它以支援其他驗證方法。
小結
正如你所看到的，僅僅幾個外部服務就可以產生巨大的影響。第三方效能不容忽視，它與現場和後端優化齊頭並進。值得慶幸的是，有很多事情可以做，特別是如果您涉及開發人員。拋棄服務，調整它們以以不同的方式（例如非同步）載入，以另一種方式（例如橫幅）提供相同的東西，所有這些都可以大大提高您的網站速度！
評論留言