分类： WordPress优化

数字图像是网络的固有部分，没有媒体就很难创建任何内容。不起眼的静止图像是为您的写作提供额外背景的绝佳方式。

但是，如果没有优化，图像的文件大小可能会很大。有损与无损压缩是一个常见的考虑因素，因为每个都可以减小图像的大小，尽管也需要考虑质量权衡。

您几乎总是需要对图像应用一些压缩。这样可以将质量保持在您指定的可接受的水平，同时减小文件大小。选择正确的压缩级别将取决于您的最终目标和要求。

在这篇文章中，我们将研究有损与无损压缩。在整个过程中，我们将讨论图像“成型”的过程、压缩是什么，以及优化图像的许多其他方面。

1. 有损与无损之间的差异
2. 数字图像的元素
3. 网络图像优化的工作原理
4. 有损压缩的优缺点
5. 无损压缩的优缺点
6. 如何在有损与无损之间进行选择
7. 使用在线压缩服务来优化您的图像

有损与无损之间的差异

当涉及到任何数字图像压缩时，有几种不同的格式可供选择。有时这些会根据许多因素而有其他名称。但是，在核心级别，您会发现两种类型：

• 有损压缩：这里的目的是为图像提供尽可能小的文件大小。因此，图像质量通常在优先级列表中处于低位。
• 无损压缩：您仍然会发现使用这种压缩格式可以显着减小文件大小，但图像不会受到伪影和其他问题的影响。

在大多数情况下，您决定使用哪种格式将归结为您的最终目标：您想要小文件，还是专注于保持质量？

有损压缩将从图像中永久删除它认为不必要的数据。它使用许多不同的技术来实现这一点，从而产生更小的文件大小。

无损压缩也会删除数据，但如果需要，它可以恢复原始数据。目标是保持高质量，同时减小文件大小。

有几种方法可以实现这一点，但结果通常是相同的。要找到适合您需求的正确选项，让我们先退后一步，回顾一下图像和压缩的基本知识。

数字图像的元素

与软件和Web开发一样，通常有一个“堆栈”将图像从相机拍摄到Web。

图像以“原始”数据开始（因此名称为RAW）。这类似于应用程序的代码：片段、行和值转换为带有颜色、图像占位符、动态元素等的背景。

对于图像，RAW文件根据相机制造商、编辑软件、色彩空间算法等呈现略有不同的图像表示。从那里，您编辑图像并将其导出为多种文件格式之一（稍后将详细介绍）：

在Capture One中编辑RAW文件的示例

构成标准数字图像的几个不同元素：

• 文件类型：不同类型将提供可能适合或不适合您的最终图像的质量。关键是为应用程序选择最合适的文件类型。
• 分辨率：您经常会看到这表示为百万像素 (MP)，但您也将使用每英寸像素 (PPI) 或每英寸点数 (DPI)。更高的分辨率提供更高的质量，但它们也会增加初始文件大小
• 位深度：这个方面决定了图像中的颜色信息。低位深度只会渲染几种颜色，而高位深度可能会一次渲染数百万种颜色。一般来说，越高越好。
• 尺寸：这是图像占用的物理空间。例如，1,000像素x500像素可以定义图像的总大小。
• 颜色空间：这是一种确定颜色显示方式的算法。每个色彩空间的设置都不同，这通常取决于摄影师的偏好。

这些元素结合起来提供不同质量的最终图像。例如，一张高分辨率、高位深度的大型JPEG照片将提供最高的质量和清晰度：

高质量的图像

相比之下，即使是大尺寸且能够显示多种颜色的图像，在低分辨率下也会显得很差：

低质量的图像

这种平衡是您在应用压缩之前开发核心图像的方式。但是，您用于图像的格式对最终质量有很大影响。

网络图像优化的工作原理

因为图像压缩在一般意义上是相同的，所以您可以将标准规则应用于优化网络图像的方式。

我们在其他地方介绍了很多这些概念，但值得快速总结以供参考：

• 使用72PPI分辨率，因为这是网络的标准。出于存档原因，您可以使用更高的PPI/DPI，但我们假设您正在发布到网络。
• 将图像的“长边”设置为2048像素，因为这对于许多不同的应用程序来说是最佳的。
• 如果可以选择，请使用8位颜色深度。
• 在发布之前通过压缩和优化工具运行图像。

这是一种简单的格式，可以为您提供一致的结果，尽管压缩和优化是我们将在本文其余部分进行扩展的内容。

为此，让我们看看有损压缩与无损压缩的优缺点。

图像压缩如何帮助您的Web图像

一般而言，“压缩”将最小值和最大值压缩在一起。例如，压缩会提高音乐中的最低音量并降低最高音量。这使得平均电平对耳朵更响亮。

对于图像，压缩更像是一个还原过程。这意味着更加强调从图像中删除数据以减小文件大小，同时保持尽可能高的质量。

有许多不同的专有算法可以帮助减少图像文件的大小。在许多情况下，这些都是特定公司专有的。您会发现许多“有损”和“无损”压缩标准，每个都有独特的描述符：

ShortPixel中的压缩选项

综上所述，应用图像压缩有很多好处，这些好处不是特定格式独有的：

• 您可以保持较小的文件大小，从而提高您网站的性能。
• 通过扩展，您站点的服务器将有更少的工作要做，从而影响性能。
• 小文件大小有助于减少服务器排放。因此，您有助于为可持续和合乎道德的未来做出贡献。
• 根据您选择的算法和压缩质量，您可以显示近乎完美和可比的质量。

就像创建可共享的图像一样，使用各种压缩值，使用特定的公司以及选择正确的算法对于找到适合您的结果至关重要。

有损压缩的优缺点

有损压缩减少了图像的文件大小，几乎排除了所有其他方面。该算法的工作方式是永久删除数据。这可能和听起来一样具有破坏性。

虽然我们不会过多地讨论具体细节，但要知道一些数据有损压缩删除在图像中是可见的。这个想法是以更轻的重量提供原始、高质量图像的最佳表示——这意味着一些数据不会被削减。

一般来说，使用有损压缩有几个好处：

行列，他们会通过WordPress内幕技巧获得我们的每周时事通讯！

• 文件大小会很小——在某些情况下，小于10KB。
• 尽管存在伪像，但在许多情况下，质量损失是可以接受的。

这给我们带来了使用有损压缩的负面影响——图像质量会随着任何数量的压缩而降低：

JPEG图像的压缩滑块

你会发现色带——颜色阴影没有以正确的方式呈现——并且在某些情况下会看到边缘清晰度的损失。颜色较少的图像会显示较少的这种情况，但仍然会出现清晰度的降低。

此外，图像质量下降是压缩过程的永久特征。这意味着以后无法扭转这种影响。

尽管有这些缺点，但有损压缩对于Web和您网站的性能来说还是非常出色的。微小的文件大小并不总是会产生颗粒状的图像，尽管您可以（当然）将事情推向极端：

过度压缩图像的示例

然而，有损并不是唯一的选择。无损压缩是注重质量的网站所有者的替代方案。

无损压缩的优缺点

无损压缩就像标签上所说的那样：它在不影响可见质量的情况下尽可能地压缩图像的文件大小。它通过删除图像元数据来做到这一点，这会占用不必要的空间：

图像的元数据

无损压缩算法还寻找重复的像素序列，然后编码一个快捷方式来显示它们。例如，以“命令行界面”为例。您通常会定义其首字母缩写词一次，然后使用“CLI”（或您选择的首字母缩写词）以闪电般的速度引用它

无损压缩的工作方式相同，因为它的破坏性较小。虽然删除元数据是不可逆的，但一些压缩将是可逆的，使其成为适用于多种用途的灵活算法。

使用无损压缩的优点在于保持质量：

• 与所有其他算法相比，无损压缩在图像中保留了最高质量。
• 无损对于存档目的来说非常棒。例如，摄影师可以平衡存储资源与保留最多数据的图像。
• 无损是视觉艺术的首选压缩算法：摄影、平面设计、数字艺术等。将无损算法与适当的深度和分辨率相结合，几乎可以实现“一对一”的复制。

然而，关于无损压缩对特定领域的服务程度，有一点需要注意：应用范围很小。这会降低其整体可用性。

以下是要考虑的无损压缩的其他一些缺点：

• 如果网站使用许多图像，则无损压缩可能不是显示它们的最佳选择。这是因为在大多数情况下，您会希望在这些类型的情况下重视较小的文件大小。
• 尽管压缩减小了文件大小，但无损算法不会像有损那样改变图像数据。正因为如此，您可能只会看到尺寸略有减少，而不是极端的瘦身效果。

接下来，我们将研究最快（并且可能是最好）的方法。

如何在有损与无损之间进行选择

至此，您了解有损压缩与无损压缩之间的区别。但是，您可能仍然不知道在您的网站上使用哪种算法最好。

有两种情况需要考虑：

1. 对于网络上的大多数用例，可以使用有损压缩。
2. 如果您想展示摄影或摄影艺术，无损压缩会更好地为您服务。

这些注意事项依赖于使用标准 Web 图像格式之一，例如JPEG、PNG或GIF。但是，您的压缩需求可能会因HEIC和WebP等更现代的格式而有所不同。

我们甚至会说，除非您在网站上显示照片，否则有损压缩应该是您的默认选择。WordPress默认压缩图像，这足以说明有损压缩几乎适用于所有应用程序。

使用在线压缩服务来优化您的图像

在将图像显示在您的网站上之前，您可以通过多种方式压缩图像。例如，您可以选择在编辑阶段应用压缩。无论如何，这可能是从RAW格式转换的副产品。

然而，一个流行的选择是许多在线服务之一。每一个都将提供一系列算法和示例性用户界面 (UI)。更重要的是，大多数都有一些免费服务，至少在您提交之前试用该应用程序。

我们在关于图像优化的文章中介绍了一些选项，尽管这些是连接到应用程序编程接口 (API) 的特定于WordPress的插件。好消息是这些插件中的许多也提供了在线界面。例如，考虑ShortPixel：

ShortPixel接口

在这里，您将图像拖到上传器上，然后等待应用程序压缩和处理它们。但是，您需要先选择算法，因为该过程将立即开始。

选择很简单：两种形式的有损压缩（“有损”和“光泽”），以及无损选项。ShortPixel的界面很好地解释了每种算法之间的区别，您可以在几秒钟内下载图像。

虽然两者都可以满足您的需求，但Imagify界面看起来比ShortPixel的更流畅、更专业。这里还有三个“压缩级别”——Normal、Aggressive和Ultra：

Imagify界面

这里的细微差别是Imagify从无损压缩开始，然后逐步发展为具有严重伪影的有损算法。但是，您在其他解决方案中找不到其他几个选项。

对于初学者，您可以保持图像的EXIF数据完整，甚至在转换后调整它们的大小。这有时是无价的，特别是如果您想应用可能会删除EXIF数据或限制调整图像大小的方式的压缩级别。

就像它的神话同名一样，Kraken可以处理您的图像并应用各种类型的压缩。大多数用户会选择有损或无损类型。

Kraken界面

但是，还有一个专家模式：

Kraken专家模式选项

这使您可以根据自己的需要调整压缩，以及其他选项。例如，您可以调整JPEG和PNG压缩级别，选择保留图像中的元数据，甚至使用色度子采样来进一步更改颜色。

小结

图片看起来像是您网站的一个简单方面：您获取一个文件，将其上传到 WordPress，然后添加一个图片块来显示它。

但是，在为网络准备图像的过程中还有很多事情可能比您意识到的要多。您选择的压缩格式会影响文件大小、图像质量等。

这篇文章研究了有损与无损压缩，并总结了你应该选择哪一个。尽管在质量与大小之间走钢丝，但有损压缩对于网络上的大多数用例来说都是完美的。摄影师或那些担心篡改图像质量的人会希望使用无损压缩，尽管在文件大小方面的好处较少。

许多优化文章都关注如何加快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中检查它，您可能不会注意到加载时间有太大差异，但您的访问者肯定会注意到，因为它会影响脚本和资产的加载方式/时间。

选项 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。我们在有关如何加快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插件。

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

• 如何禁用表情符号
• 如何禁用嵌入
• 如何修复浏览器缓存警告
• 如何从静态资源中删除查询字符串
• 如何使用New Relic查找WordPress性能瓶颈
• 8个鲜为人知（但有用）的WordPress性能插件

优化后（速度测试）

如您所见，我们的加载时间从 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内加载。其中超过三分之一仅由这一资产占用。资产应该稍后加载，或者应该放弃它以支持其他验证方法。

小结

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