许多优化文章都关注如何加快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新生成的代码将具有此属性，但如果您的代码还有几年的历史，我们建议您检查它。
<!– nogluten-top-right-page-300×250 –>
<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>
<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小工具也添加了该框。
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>
<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没有将此属性添加到脚本中，但您可以在下面看到修改后的版本，它将异步加载它。
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>
<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内加载。其中超过三分之一仅由这一资产占用。资产应该稍后加载，或者应该放弃它以支持其他验证方法。
小结
正如你所看到的，仅仅几个外部服务就可以产生巨大的影响。第三方性能不容忽视，它与现场和后端优化齐头并进。值得庆幸的是，有很多事情可以做，特别是如果您涉及开发人员。抛弃服务，调整它们以以不同的方式（例如异步）加载，以另一种方式（例如横幅）提供相同的东西，所有这些都可以大大提高您的网站速度！
