分析WordPress网站上的第三方服务性能

WBOLT_COM 3 月 10, 2022 1.3k+ 0

许多优化文章都关注如何加快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。通常，当您运行速度测试时，您可以将鼠标悬停在每个条上，以查看加载过程的每个部分花费了多长时间。您应该寻找超长的条（与其他条相比）以及仅在特定条完成后才开始加载条的地方——这些是您的瓶颈。一旦您发现某个特定元素的加载时间过长或阻止其他资源加载，您就需要弄清楚它为何存在以及它来自何处。

这可能有点困难，对服务的调用可以在您的主题中编码，也可以来自插件。但是，正如我们之前提到的，还有绝对数量的问题。如果我们查看下面来自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 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后

CDN后（速度测试）

进一步优化

然后，我们对WordPress网站进行了一些额外的优化，使我们的性能等级得分达到100分，加载时间为270毫秒。这些优化包括：

确保从CDN提供商加载所有内容。这意味着在本地托管Google字体并产生一个HTTP/2请求。
删除生成不必要的HTTP请求的附加资产，例如表情符号、嵌入、jQuery迁移等。我们使用了perfmatters插件。

以下是一些优化的更深入的教程：

优化后

优化后（速度测试）

如您所见，我们的加载时间从 1.94 秒缩短到了 270 毫秒！当然，您可能需要一些外部服务，每个企业都需要。但重要的是不要忘记分析每一个。如果您发现加载时间过长，请联系负责它的开发人员或公司并提出问题。

防止停滞加载

更大的问题是脚本在完成自身加载时阻止加载。如果像这样的脚本包含在标题中，它可以使您的网站无限期地保持空白。因此，页眉中并非绝对必要的任何内容都应放在页脚中。这将允许您的网站在有问题的脚本甚至开始加载之前完全加载。如果你使用wp_enqueue_script()函数（你应该），你可以使用第五个参数来指示它应该加载到页脚中。

如果您发现插件无缘无故地在页眉中加载了资产，您可以使用wp_dequeue_script()将其从页眉中删除，然后wp_enqueue_script()以相同的方式注册它，但在页脚中。