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

2019.08.13 mf_web

82

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

英雄形象

它有什么作用?

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

鼠标点击分析和加载过程开始的屏幕录制

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

衡量整体表现

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

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

报告摘要部分的屏幕截图

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

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

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

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

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

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

诊断特定问题

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

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

单个图像报告的屏幕截图
“C”代表“酷图像,兄弟”。

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

鼠标击打的屏幕截图
细节,细节。

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

截图

第一个面板Current的屏幕截图
每个图像的详细报告,由分析后的工具提供。

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

  • 格式。图像的格式是否与其内容完美匹配?例如,当我们应该使用PNG时,我们是否使用GIF作为我们的徽标?这个JPEG作为WebP会更好地压缩吗?

  • 适合。图像的内在尺寸是否适合布局和屏幕?例如,如果图像在2×屏幕上以100像素的速度显示,我们应该发送接近200像素宽图像的内容。我们呢?

  • 压缩。图像的质量设置是否在视觉质量和文件大小之间取得了良好的平衡?

这三个因素是测试最关心的因素。在它们下方,您将看到其他三个,它们实际上并不考虑图像的等级,但是用于突出可能需要特别注意的常见特定问题:

  • 色彩空间。图像是否在网络的合理色彩空间中编码,例如sRGB?

  • 颜色深浅。我们是否使用每像素正确的位数来编码颜色值?例如,sRGB图像应始终以每像素8位编码。

  • 元数据。我们是否将嵌入式元数据保持在最低水平?读者,我看到20 KB图像背负着100 KB的隐形元数据。闪耀光芒!

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

什么比被告知问题更好?给出如何解决它的方法。还有什么比这更好的?在一个隐喻拼盘上交出完成的解决方案!那么,在我们的下一个面板“优化图像”上。

分析后,该工具会为图像建议优化的尺寸和压缩。您可以立即下载并使用它。

在这里,我们可以看到(并下载!)工具生成和测量的优化良好的图像。我们详细描述了用于对其进行编码的设置以及一些关于图像实际内容的有趣花絮,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结果发送到网站速度测试。WebPagetest是一个成熟,功能强大的工具。它提供了一大堆有用的设置,当您直接从webspeedtest.cloudinary.com启动测试时,这些设置是不可用的。谷歌浏览器,具有1366×784的视口和:例如,当你输入一个网址上webspeedtest.cloudinary.com的大箱子,页面使用一个默认的浏览环境测试device-pixel-ratio的1x。无法全面了解页面的响应式图像性能来自那个单一的环境。如果正在测试的页面没有缩小图像以适应较小的低分辨率显示器,或者在巨大的5K屏幕上将其放大以显得清晰,那么我们就会错过巨大的性能和用户体验机会 - 网站速度测试的机会和它的单一默认浏览环境无法显示。在各种各样的设备上测试我们的页面不是更好吗?

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

WebPagetest浏览器下拉菜单的屏幕截图
您可以选择特定设备上的特定浏览器,并使用WebPageTest对其上的图像运行测试。

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

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

谁是为了?

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

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

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

改善的空间

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

北京做网站


最新案例

寒枫总监

来电咨询

18868949445

微信咨询

寒枫总监

TOP