A/B 测试创意:JPG vs. WebP 横幅广告与落地页点击率

发布于 2024年6月12日

假设:更快的图片,更多的点击

我们知道页面速度是影响用户体验和转化率的关键因素。加载缓慢的页面会导致更高的跳出率。由于图片通常是落地页上最大的元素,因此优化图片是首要任务。

像 WebP 这样的现代图片格式,在同等视觉质量下,文件大小比传统的 JPEG 小得多。这能带来更快的加载时间。

我们的假设是: 通过将标准的 JPG 主横幅替换为高度优化的 WebP 版本,我们将减少页面的加载时间,从而带来更好的用户体验,并使页面主要行动号召 (CTA) 的点击率 (CTR) 实现可衡量的增长。

为何这个测试很重要

  • 验证性能优化的效果: 它提供了具体数据,证明图片优化工作对用户行为和业务目标有直接影响。
  • 改善核心 Web 指标: 加载更快的英雄图片将直接改善您页面的最大内容绘制 (LCP) 分数,这是一个关键的 Google 指标。
  • 积少成多: 即使是点击率的微小提升(例如 0.5%),在规模化的情况下也能带来显著的收入增长。

如何设置 A/B 测试

您需要一个 A/B 测试工具,如 Google Optimize(即将停用,但原理适用于其他工具)、VWO 或 Optimizely。

第 1 步:准备您的图片资产

  1. 创建对照组 (JPG): 使用您原始的英雄横幅,并将其另存为高质量的 JPG。这是您的“版本 A”。
  2. 创建变体组 (WebP): 使用相同的原始横幅,并使用我们的图片转换器工具将其转换为 WebP。调整质量设置,使其文件大小至少比 JPG 小 30-40%,同时保持视觉上的清晰度。这是您的“版本 B”。
  3. 托管两张图片: 上传 JPG 和 WebP 图片,确保它们都可以通过 URL 访问。

第 2 步:配置 A/B 测试

  1. 设置您的实验: 在您的 A/B 测试软件中,针对目标落地页创建一个新的 A/B 测试。

  2. 定义您的变体:

    • 原始版本 (对照组): 这是您当前带有 JPG 横幅的页面。无需任何更改。
    • 变体 1 (WebP): 在编辑器中,将英雄横幅 <img> 标签的 src 属性更改为指向您的新 WebP 图片 URL。

    高级选项: 为了进行最稳健的测试,请在您的变体中使用 <picture> 元素来提供 WebP 图片,并以降级方式提供 JPG。这可以确保测试不会因使用非常旧的浏览器的用户而失败。

    <!-- 变体 1 的代码 -->
    <picture>
      <source srcset="your-banner.webp" type="image/webp">
      <img src="your-banner.jpg" alt="...">
    </picture>
  3. 设置您的主要目标: 主要目标是衡量主要行动号召按钮的点击次数。配置测试以跟踪该特定按钮或链接的点击。这将是您的主要转化指标 (CTR)。

  4. 添加次要目标 (可选但推荐):

    • 页面加载时间: 跟踪每个变体的平均页面加载时间或 LCP。
    • 跳出率: 观察加载更快的页面是否减少了立即离开的用户数量。

第 3 步:启动和分析

  1. 流量分配: 开始时采用 50/50 的分配,将一半的访问者导向原始页面,另一半导向变体页面。
  2. 运行测试: 让实验持续运行,直到达到统计显著性(通常置信水平至少为 95%)。这可能需要几天或几周时间,具体取决于您的流量。
  3. 分析结果:
    • WebP 变体的点击率是否有统计上显著的提高?
    • 变体组的页面加载时间是否减少了?
    • 跳出率是否下降了?

解读可能的结果

  • 明确的胜利: WebP 变体显示点击率显著增加,加载时间减少。行动: 将 WebP 作为您网站所有英雄图片的新默认格式全面推广。
  • 无显著差异: 即使页面加载速度更快,点击率也大致相同。分析: 这可能意味着对于您的特定受众或页面,加载时间的差异不足以影响用户行为。然而,性能优势(更好的核心 Web 指标)本身仍然很有价值,因此切换到 WebP 对于 SEO 和用户体验来说可能仍然是一个好主意。
  • 失败: WebP 变体的表现更差。分析: 这极不可能发生,但可能表明图片本身存在问题(例如,您过度压缩导致图片模糊)或测试设置中存在技术故障。

这个简单的 A/B 测试是将网站性能优化的技术工作与可观的业务成果直接联系起来的有效方法。

相关指南