介绍网站速度测试图像分析工具

进入网站速度测试，这是一个免费且非常简单的工具，它利用我们（Cloudinary 的）图像智能让您测量、诊断和（至关重要）交流任何网站的图像性能。 更好的是，它建立在 Pat Meenan 的 WebPagetest 之上并集成在其中。

感兴趣的？ 继续阅读！

它有什么作用？

让我们首先看看网站速度测试具体做了什么。 我们将首先给它一个 URL——比如 nytimes.photos——然后按“分析”。

测试需要一两分钟的时间来运行并返回一个完整的结果页面。

衡量整体表现

在这些结果的最顶部，您会发现整个报告中最重要的两条信息：一个字母等级，它试图捕捉页面的所有好的和坏的决定，并将它们简化为一个简单的指标，以及图像权重比较，可以定量地向您显示所有这些决策的成本。 一分钟了解更多关于字母等级的信息。 首先，我想说明测试如何计算“成本”。

为了计算成本，该工具必须有某种最佳基线来衡量。 它必须能够说，“这就是你可以用你的图像做的，但是——哎呀！ ——这就是你所做的，所以这就是你可以节省的。” 构建基线是一个难题，因为图像很复杂并且质量是主观的。 幸运的是，Cloudinary 花了数年时间构建了一套工具，旨在优化和自动编码图像以在网络上交付。 网站速度测试采用这些工具——迄今为止，这些工具已被用于创建高性能图像——并将它们从里到外转变为可以测量图像性能的工具。 凉爽的！

好的，这就是测试计算成本的方式。 字母等级呢？

当我第一次开始运行测试时，我不明白为什么一些图像比基线大一个数量级（或两个！）的网站仍然得到 B，而其他网站的总图像权重“只有”1.5或比基线重 2 倍可能会得到 C 或 D。

答案是字母等级反映了多少错误页面包含改进的机会，但它并不太关心这些错误的严重程度。 假设您已经熟练地制作了一个页面，其中包含数十张经过优化的图像，然后您的蹩脚同事 Chad 出现并在页眉中丢下了一张 6 MB 的照片。 乍得是最差的，但是在一个满是好的页面上做出一个错误的决定不会对你的整体成绩产生重大影响——即使它确实会破坏你的总页面重量。

另一方面，假设您有一个页面混合了尺寸过小或压缩过大的图像，以配合其巨大的臃肿图像。 它的总页重可能没有那么糟糕——但它的问题是地方性的。 因此，除了外观可观的总重量外，它的成绩也会很差。

该工具提供了两个指标，因为这些指标执行两项不同的工作。 权重比较算字节，等级算问题。 两者都要注意！

诊断特定问题

现在我们已经了解了整个页面的整体性能，是时候深入了解各个图像并诊断具体问题了。

测试页面上的每张图片都有自己的小型迷你报告。

这向您展示了您所做的（图像的大小和编码方式）以及您应该做的（您可以交付的格式、尺寸和最佳压缩文件大小）。 我们再次看到两个大的汇总指标：字母等级和潜在节省百分比。 但要真正了解这些指标，我们必须点击“查看更多”。

报告的扩展部分有很多内容。 它分为三个面板。 让我们从左到右分解它们。

首先，有“当前”面板，它详细介绍了页面上存在的图像。 在这里，我们可以找到报告更高级别分配的所有字母等级的根源。 我之前一般写过关于“错误”的文章； 在“当前”选项卡中，我们可以看到网站速度测试实际检查的具体错误。 前三项计入您的成绩：

• 格式。 图像的格式与其内容是否匹配？ 例如，当我们应该使用 PNG 时，我们是否将 GIF 用于我们的徽标？ 这个 JPEG 作为 WebP 会更好地压缩吗？
• 适合。 图像的固有尺寸是否适合布局和屏幕？ 例如，如果图像在 2 倍屏幕上显示为 100 像素，我们应该发送接近 200 像素宽的图像。 我们是吗？
• 压缩。 图像的质量设置是否在视觉质量和文件大小之间取得了良好的平衡？

这三个因素是测试最关心的。 在它们下方，您会看到另外三个，它们实际上并没有计入图像的等级，但它们用于突出可能需要特别注意的常见、具体问题：

• 色彩空间。 图像是否以适合 Web 的合理色彩空间（例如 sRGB）进行编码？
• 颜色深度。 我们是否使用正确的每像素位数来编码颜色值？ 例如，sRGB 图像应始终以每像素 8 位进行编码。
• 元数据。 我们是否将嵌入的元数据保持在最低限度？ 读者，我已经看到 20 KB 的图像背负着 100 KB 的不可见元数据。 点亮一盏灯！

分发成绩后，测试会解释它们并告诉我们可以做得更好的地方。 例如，上面的 nytimes.photos 图像对于布局来说太大了； JPEG 是一个合理的选择，但我们可以使用 WebP； 我们真的，真的应该调高压缩率。

有什么比被告知一个问题更好的呢？ 获得如何修复它的秘诀。 还有什么比这更好的呢？ 在一个比喻性的盘子上递上一个完成的解决方案！ 因此，进入我们的下一个面板，“优化图像”。

在这里，我们可以看到（并下载！）该工具生成和测量的经过优化的图像。 我们得到了用于对其进行编码的设置的详细描述，以及关于图像实际内容的一些有趣的花絮，这些都是 Cloudinary 在此过程中发现的。

由于有限的空间和相对重要性，最后一个面板被隐藏在屏幕之外。 所以，点击小人字形，看，“格式替代品”。

该测试以每种可能的格式对您的图像进行编码，以确定哪种格式最好。 如果“最佳”格式恰好是 WebP 或 JPEG-XR，那么对于不支持的浏览器，您可能需要 JPEG 或 PNG 后备资源。 您可以在此面板中查看、下载和阅读有关这些替代版本的详细信息。

从诊断到治疗

对于除了最小和最静态的网站之外的所有网站，使用网站速度测试作为一种精心设计的“保存为网络”，这样的做法并不实用。 您将需要弄清楚如何以更系统的方式解决该工具发现的问题。 根据您的工作流程和您要解决的问题，您将如何做到这一点会有很大的不同。 要解决压缩问题，也许您可​​以开始使用甚至半自动化优秀的压缩 GUI，例如 ImageOptim、ImageAlpha 和 Squash，或者打开您的终端并开始编写 ImageMagick 脚本。 对于适合的问题，您可能需要对网站的响应式图像做一些事情。 如果该工具显示您错过了 WebP 等新格式的巨大潜在收益，那么最好的办法就是开始采用它们——确保使用服务器端或标记内类型切换，所以您不会向不支持的浏览器发送新格式。

如果您自己将所有这些自动化听起来像是一项巨大的工作，那么，确实如此！ 并且有许多图像托管服务很乐意为您自动化这项工作。

好的，既然我们已经浏览了该工具提供的指标、它发现的问题以及它提供的解决方案，我想花一点时间来讨论一个重要（且方便）的方面它确实有效。

网站速度测试建立在 WebPagetest 之上

单击“分析图像”后的一两分钟内，网站速度测试实际上在做什么？ 大多数情况下，什么都没有！ 网站速度测试立即将有问题的 URL 交给另一个工具：Patrick Meenan 不可或缺的 WebPagetest。 网站速度测试然后坐下来等待 WebPagetest 完成加载和测量页面及其内容的所有艰苦工作。

只有在 WebPagetest API 返回一组结果后，网站速度测试才能将这些结果梳理为图像，并开始对它们进行重新压缩、测量和分级。

换句话说，网站速度测试站在 WebPagetest 的肩膀上，没有它就无法运行。 因此，至少可以说，当帕特里克同意将网站速度测试直接集成到 WebPagetest 中时，这令人兴奋！

WebPagetest 在其导航栏中有一个新选项卡：“分析图像”。 单击它，当前的 WebPagetest 结果集将被发送到网站速度测试，以进行进一步的图像分析。 这太棒了，有两个原因。

首先，这意味着，如果您已经在使用 WebPagetest，那么只需单击一下即可进行网站速度测试。 （一旦您使用现有的 WebPagetest 结果，网站速度测试的工作速度会更快。）

其次，您可以将任何 WebPagetest 结果发送到网站速度测试。 WebPagetest 是一个成熟的、功能强大的工具。 它提供了一大堆有用的设置，当您直接从 webspeedtest.cloudinary.com 启动测试时这些设置不可用。 例如，当您在 webspeedtest.cloudinary.com 上的大框中输入 URL 时，页面会使用单一默认浏览环境进行测试：Google Chrome，视口为 1366 × 784， device-pixel-ratio为1x 。 从那个单一的环境中获得页面响应图像性能的完整图片是不可能的。 如果正在测试的页面没有缩小图像以适应较小的低分辨率显示器，或者将它们放大以在巨大的 5K 屏幕上看起来清晰，那么我们就错失了巨大的性能和 UX 机会——网站速度测试和它的单一默认浏览环境无法显示。 在各种设备上测试我们的页面不是更好吗？

通过从webpagetest.org 开始并在不同的环境中运行多个测试，使用（方便的）“浏览器”下拉菜单或（强大的）脚本，我们可以做到这一点。

在不同环境中运行的测试结果的巨大差异表明测试页面没有对响应式图像做任何事情，并且可能应该这样做。

希望网站速度测试的未来迭代能够开箱即用地实施更智能的响应式图像测试，以便在一次测试后发现并突出显示这些类型的跨设备问题。 不过，目前，WebPagetest 中的集成提供了一个访问点，让您可以通过一些额外的工作来完成相同的事情。

它是给谁的？

我写这篇文章的大部分内容是假设你，读者，正在测试你自己的网站，并且正在寻找你将被授权解决的问题。

事实上，这主要是该工具的目的：帮助开发人员构建更好的网站。 它突出了具体问题并提供了具体的解决方案。

我认为该测试也将被证明是与利益相关者沟通和说服利益相关者的工具。 同样，图像优化是任何人都可以为页面性能做的最好的事情之一。 这也很复杂。 网站速度测试擅长将无数的细节简化为易于理解的指标，然后根据需要逐步披露技术细节。 这使得网站速度测试报告能够被各种具有不同技术专业知识水平的读者理解。 因此，无论您是使用它来向客户展示他们的页面加载速度可能快两到三倍，还是您自己使用它来了解 4:2:0 色度二次采样的潜在影响，网站速度测试有没有帮助。

改进空间

网站速度测试正在积极开发中，这只是第一个版本。 我们有一些关于从这里获取它的想法。 我已经提到了对响应式图像进行更好的测试。 “全部下载”按钮也在使用中。 如果您有自己的想法（或者如果您发现任何错误），我们希望了解它们。

最后，如果您在没有亲自尝试网站速度测试的情况下以某种方式阅读了本文，请查看！