如何在预算内提高媒体性能

本文得到了 Cloudinary 亲爱的朋友的大力支持，他们帮助社区快速轻松地创建、管理和交付他们在任何浏览器、设备和带宽上的数字体验。 谢谢！

美国学者梅森·库利 (Mason Cooley) 巧妙地描述了一个艰难的生活事实：“预算让金钱失去乐趣。” 毫无疑问，媒体使网站活跃起来，增加了吸引力、兴奋和阴谋，更不用说吸引留在页面上并经常重新访问它了。 然而，从长远来看，正如失控的支出预示着不祥之兆一样，预算外的数字媒体也会对网站性能造成影响。

一个恰当的例子：页面加载速度下降一秒钟就可能使亚马逊损失 16 亿美元的年销售额。 在影响页面加载速度的众多因素中，媒体是一个重要因素。 因此，迫切需要优先优化媒体。 通过把钱花在这项任务上并对媒体进行预算，从长远来看，您将获得可观的节省和收益。

绩效预算

“性能预算是'......就像它听起来的那样：您在页面上设置了一个'预算'并且不允许页面超过它。 这可能是一个特定的加载时间，但当您将预算分解为请求数量或页面大小时，通常会更容易进行对话。”

— 蒂姆·卡德莱克

作为规划 Web 体验和防止性能下降的机制的性能预算可能包含以下标准：

• 总页重，
• HTTP 请求总数，
• 特定移动网络上的页面加载时间，
• 首次输入延迟 (FID)
• 第一个内容涂料（FCP），
• 累积布局移位 (CLS),
• 最大的内容涂料（LCP）。

Vitaly Friedman 有一个很好的清单，其中描述了影响 Web 性能的组件以及优化技术的有用提示。 熟悉这些组件将使您能够设定性能目标。

通过明确记录的绩效目标，各个团队可以就内容的最佳交付进行有意义的对话。 例如，预算可以帮助他们决定一个页面是否应该包含五张图片 - 或者三张图片和一个视频 - 并且仍然保持在计划的限制范围内。

但是，将性能预算作为一个独立的指标可能没有多大帮助。 这就是为什么我们必须将绩效与组织目标联系起来。

经营业绩

如果您在非最佳视频和图像上花费大量字节，富媒体体验将不再那么丰富。 组织的存在是为了实现成果，例如诱使人们购买、教​​育他们、激励他们或寻求帮助和志愿者。 任何拥有网络存在的人都会欣赏各种绩效衡量标准对业务指标的影响之间的关系。

WPOStats 重点介绍了数百个案例研究，展示了性能下降（从几百毫秒到几秒）如何导致年销售额大幅下降。 绘制这种关系极大地有助于跟踪绩效对业务的影响，并最终为组织建立绩效文化。

同样，慢速网站会对转化产生巨大影响。 在线企业面临的一项艰巨挑战是在吸引观众和保持性能预算之间找到适当的平衡。

因此，观众参与的一个关键组成部分是优化的视觉媒体也就不足为奇了，例如，一段引人入胜的视频，它将关于您的产品或服务的故事与相关、有趣和吸引人的视觉效果结合在一起。

根据麻省理工学院的神经科学家的说法，我们的大脑可以在不到 13 毫秒的时间内吸收和理解视觉媒体，而文本可以让普通读者花费 3.3 分钟以上的时间来理解，通常是在重新阅读并交叉引用其他地方之后。 难怪微视频内容（通常只有 10-20 秒长）通常会带来巨大的参与度和转化率收益。

视频的吸引力

在线购物时，我们希望看到详细的产品图片。 多年来，我更喜欢浏览辅以视频的产品，这些视频展示了产品的使用方法或组装方法，或者展示了现实生活中的用例。

除了我个人的经验，很多研究证明了视频内容的重要性：

• 96% 的消费者在做出在线购买决定时发现视频很有帮助。
• 79% 的在线购物者更喜欢观看视频以获取产品信息，而不是阅读网页上的文字。
• 正确的产品视频可以将转化率提高 80% 以上。

谈到网络上的视频交付，

“平均视频权重每年都在急剧增加，移动端比桌面端更甚。 在某些情况下，这可能是有保证的，因为移动设备通常具有高分辨率屏幕，但这也可能是由于缺乏仅使用 HTML 提供不同视频大小的能力。 网络上的许多大型视频都是手动放置在营销页面中的，并且没有复杂的媒体服务器来提供适当的尺寸，所以我希望将来我们会看到类似的简单 HTML 功能用于视频交付，就像我们在响应式图像中看到的那样。 ”

— 斯科特·杰尔

Conviva 的 2020 年第四季度流媒体状态（需要注册）传达了同样的观点，该报告指出，与其他设备相比，手机的缓冲问题多 20% ，视频启动失败率高 19%，启动时间长 5%。

除了渲染问题之外，视频交付还会增加带宽成本，尤其是在您无法交付浏览器的最佳格式的情况下。 此外，如果您不使用内容交付网络 (CDN) 或多个 CDN 将用户映射到最近的边缘区域以减少延迟（这种做法称为次优路由），您可能会减慢视频的启动速度。

同样，未优化的图像是页面膨胀的主要原因。 根据 Web Almanac，发送到移动设备或桌面设备的图像字节差异非常小，这对于实际上并不需要所有额外字节的设备来说，进一步浪费了带宽。

毫无疑问，过度使用引人入胜但未经优化的内容会损害业务目标，而这正是平衡艺术发挥作用的地方。

平衡性能与媒体内容的艺术

尽管富媒体可以促进用户参与，但我们需要平衡交付它们的成本与您的网站性能和业务目标。 一种替代方法是通过 YouTube 或 Vimeo 等第三方托管和交付视频。

然而，尽管节省了带宽，但这种方法是有代价的。 作为内容所有者，您无法构建完全定制的品牌体验，或提供个性化服务。 当然，您需要托管和交付您的图像。

您不必卸载您的内容。 还有其他可用选项。 考虑通过执行以下操作来改进您的系统以获得最佳媒体交付：

了解您当前的使用情况

研究您的网页的重量及其媒体资产的大小。 网络研究专家 Tammy Everts 建议确保移动页面的大小小于 1 MB，其他所有页面的大小小于 2 MB。 此外，确定关键页面上显示的资源。

例如，您可以用短视频替换一段文字和相关的图像吗？ 该决定将如何影响您的业务目标？ 在这个阶段，您可能需要查看您的真实用户监控 (RUM) 和分析，并确定导致更高转化率和参与率的关键页面。

此外，请务必使用 LightHouse 等工具综合跟踪 Google 的 Core Web Vitals (CWV) 作为工具包的一部分。 您还可以通过像 CrUX 这样的真实用户监控 (RUM) 来测量 CWV。 由于 CWV 也将成为 Google 对爬虫的信号，因此监控和优化这些指标是有意义的：最大内容绘制 (LCP)、首次输入延迟 (FID) 和累积布局偏移 (CLS)。

提供正确的格式

根据查看设备或浏览器的大小和分辨率，以最合适的格式提供图像或视频。 为此，您可能需要一个图像 CDN。 或者，创建 WebM、AVIF、JPEG-XL、HEIC 等变体，并根据请求的 User-Agent 和 Accept 标头选择性地提供正确的内容类型。

对于一次性转换，您可以尝试使用 Squoosh.app 或 avif.io 等工具。 一个相关的做法是将动画 GIF 转换为视频。 有关更多信息，请参阅此 Web.dev 文章。 想尝试设置工作流程来处理视频发布吗？ 请参阅文章优化视频的大小和质量中的重要提示。

提供合适的尺寸

移动设备上超过 41% 的图像尺寸不正确。 因此，与其提供固定宽度，不如使用 Lazysizes 等工具裁剪图像和视频以适应容器大小。 更好的是，可以在裁剪图像的同时检测感兴趣区域的 AI 工具可以为您节省大量时间和精力。 您还可以对首屏以下的图像使用本机延迟加载。

为您的视频添加字幕

几乎 85% 的视频都是无声播放的。 为它们添加字幕不仅可以提供可访问的体验，还可以吸引观众的注意力并提高参与度。 但是，转录视频可能是一项乏味的工作； 您可以使用基于 AI 的转录服务并对其进行改进以自动化工作流程。

通过多个 CDN 交付

CDN 可以缓解最后一英里的延迟，缩短视频的开始时间，并可能减少缓冲问题。 根据 Citrix 的一项研究，多 CDN 策略可以进一步减少延迟，并在 CDN 边缘节点局部中断的情况下提供持续可用性。

您可以探索像 Cloudinary 的媒体优化器这样的产品，而不是利用多个谨慎的工具，它可以有效且高效地优化媒体，通过多 CDN 边缘节点提供正确的格式和质量。 换句话说，Media Optimizer 优化了质量和大小，在小文件中提供高视觉保真度。

渐进式渲染视频

YouTube 上的自动播放预览视频显示，视频观看时间增加了 90% 以上。 视频自动播放几乎没有好处，也有很多缺点，因此在使用和不使用时要小心。 至少可以选择暂停视频，这一点很重要。

平衡页面大小预算的一个好方法是首先只提供 AI 创建的视频预览和海报图像，只有在用户点击视频时才加载完整视频。 这样，您可以消除不必要的下载并加速页面加载。

或者，在开头加载预览视频并让播放器自动播放完整版本。 预览完成后，播放器会使用网络连接 API 检查设备的连接类型，如果用户连接良好，则将源从预览切换到实际视频。

您可以查看示例页面以获取演示。 这里有一个提示：由于 CDN 可以更可靠地检测网络连接类型，因此您的生产质量代码可以利用 CDN 检测网络速度，基于此，您的客户端代码可以逐步加载长格式视频。

包起来

未来，由于视觉媒体以文字无法做到的方式讲述故事的非凡能力，视觉媒体将继续成为网站和移动应用程序的主导元素。 但是，确定要交付的正确内容取决于您的业务战略和站点性能。

“性能预算并不能指导您决定应该显示哪些内容。 相反，它是关于您如何选择显示该内容。 完全删除重要内容以减少页面的重量并不是一种性能策略。”

— 蒂姆·卡德莱克

这是值得牢记的合理建议。