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

也想出现在这里？点击联系我~

许多优化文章都关注如何加快WordPress网站的速度，例如速度测试）

站点加载时间也是1.94秒，这真的很糟糕，因为正如您在上面看到的，测试站点上没有任何内容。这是一个较小规模的测试，可帮助您更好地分析第三方性能。WordPress网站越大，问题就越大。但从根本上说，大多数问题都可以通过类似的方式解决。

处理Google AdSense

我们首先要解决的是Google Adsense。通常，当您运行速度测试时，您可以将鼠标悬停在每个条上，以查看加载过程的每个部分花费了多长时间。您应该寻找超长的条（与其他条相比）以及仅在特定条完成后才开始加载条的地方——这些是您的瓶颈。一旦您发现某个特定元素的加载时间过长或阻止其他资源加载，您就需要弄清楚它为何存在以及它来自何处。

这可能有点困难，对服务的调用可以在您的主题中编码，也可以来自插件。但是，正如我们之前提到的，还有绝对数量的问题。如果我们查看下面来自pagead2.googlesyndication.com和tpc.googlesyndication.com的请求，我们可以看到这些条相当短，这意味着它们不会造成那么大的延迟。不过，其中一些确实有更长的速度测试）

那就对了！两个小广告为我们的整体加载时间增加了大约一秒钟。这就是为什么除非您的收入模式围绕第三方广告，否则不要将它们放在您的WordPress网站上。如果您的广告网络有问题，并且您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中检查它，您可能不会注意到加载时间有太大差异，但您的访问者肯定会注意到，因为它会影响脚本和资产的加载方式/时间。

选项 2 – 改用图片横幅

下一个建议是用一个简单地链接到您的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小部件，除非你真的需要它，因为它会产生大量请求。这里有一些建议可以更好地处理这个问题。

选项 1 – 改用图片横幅

就像Facebook的点赞框一样，除非您真的需要动态Instagram小部件，否则请创建一个横幅，而不是链接到您的Instagram页面。这会立即将20多个请求减少到1个，并且您将不再拥有外部依赖项。你可以通过这种方式变得非常有创意，并且在设计和性能之间取得了很好的平衡。

选项 2 – 摆脱它

当然，您可以完全摆脱它。我们在测试站点上就是这样做的，如下所示，它将我们的加载时间从786毫秒降低到690毫秒。它将整体页面重量从1.0MB 减少到814.3KB，请求总数从78个减少到57个。

删除Instagram小部件后（速度测试）

处理Disqus评论

接下来要看的是Disqus评论。在我们的示例中，我们使用免费的Disqus评论系统插件。Disqus的最大问题是它会产生大量请求，并且必须为每个评论的人加载gravatar。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提供商加载所有内容。这意味着在本地托管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内加载。其中超过三分之一仅由这一资产占用。资产应该稍后加载，或者应该放弃它以支持其他验证方法。

  小结

  正如你所看到的，仅仅几个外部服务就可以产生巨大的影响。第三方性能不容忽视，它与现场和后端优化齐头并进。值得庆幸的是，有很多事情可以做，特别是如果您涉及开发人员。抛弃服务，调整它们以以不同的方式（例如异步）加载，以另一种方式（例如横幅）提供相同的东西，所有这些都可以大大提高您的网站速度！