北京做网站：介绍网站速度测试图像分析工具

Web开发人员花费大量时间编写超文本，但是，逐字节，大多数Web都是由图像组成的。很难夸大图像对平均网页性能的影响; 更快的网站具有更广泛的影响力和更高的影 您可以做的第一件也是最重要的事情是改善网站图像的性能，弄清楚如何衡量它们。进入网站速度测试，这是一个免费且简单易用的工具，利用我们的（Cloudinary）图像智能，让您测量，诊断和（关键）沟通任何网站的图像性能。更好的是，它建立在Pat Meenan的WebPagetest之上并集成在其中。感兴趣吗？继续阅读！北京做网站

它有什么作用？

让我们首先看一下网站速度测试的具体功能。我们首先给它一个URL - 例如，nytimes.photos - 并按“分析”。

测试需要一两分钟才能运行并返回一整页结果。

衡量整体表现

在这些结果的最顶部，您将在整个报告中找到两个最重要的信息：字母等级，它试图捕获所有页面的好的和坏的决策，

并将它们简化为一个简单的度量标准，和图像权重比较，从数量上显示所有这些决策的成本。更多关于一分钟的字母等级。首先，我想解决测试如何计算“成本”。

为了计算成本，该工具必须具有某种最佳基线来衡量。它必须能够说：“这是你可以用你的图像做的，但是 - 哎呀！ - 这就是你所做的，所以这就是你可以节省的。“构建基线是一个难题，因为图像复杂，质量是主观的。幸运的是，Cloudinary花了数年时间构建了一套工具，旨在优化和自动编码图像，以便在网上传送。网站速度测试采用这些工具 - 迄今为止，这些工具用于创建高性能图像 - 并将其内部转换为可以测量图像性能的工具。凉！

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

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

答案是，字母等级反映了多少 错误 页面包含改进的机会，但它并没有那么关心那些错误的严重程度。假设你已经熟练地制作了一个包含数十个经过优化的图像的页面，然后你那个蹩脚的同事Chad出现了，并在标题中点了一个6 MB的股票照片。乍得是最糟糕的，但是在一个充满好的页面上做出错误的决定不会对你的整体成绩产生重大影响 - 即使它确实毁了你的总页面重量。

另一方面，假设你有一个页面正在提供混合的大小不足或过度压缩的图像，以及它的巨大臃肿的图像。它的总页面重量可能不是那么糟糕 - 但它的问题是地方性的。因此，它将获得可怕的等级以及其可观的总重量。

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

诊断特定问题

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

测试页面上的每个图像都有自己的小型报告。

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

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

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

由于房地产和相对重要性有限，最后一块面板隐藏在屏幕外。所以，击中小雪佛龙，看看“格式替代品”。

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

从诊断到治疗

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

如果自动化所有这些听起来像是一项巨大的工作，那就是它！并且有许多图像托管服务，很乐意为您自动完成这项工作。

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

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

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

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

换句话说，网站速度测试站在WebPagetest的肩膀上，没有它就无法运行。所以，至少可以说，当Patrick同意将网站速度测试整合到WebPagetest中时，令人兴奋！

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

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

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

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

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

希望未来网站速度测试的迭代将实现更智能的响应式图像测试，以便在单次测试后捕获并突出显示这些类型的跨设备问题。但是现在，WebPagetest中的集成提供了一个访问点，可以让您通过一些额外的工作来完成同样的事情。

谁是为了？

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

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

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

改善的空间

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

北京做网站