AMP

Web Stories 中更佳的视频性能

故事

网页性能对于良好的用户体验至关重要。我们继续看到故事创作者利用以视频为主的叙事来保持观众的参与度,并让他们不断回来观看更多内容。但是,提供视频的服务成本以及在全球范围内快速为用户提供视频服务的复杂性可能很高。为了帮助解决这些挑战:Web Stories 已扩展对视频缓存的支持(即,使用 Google 缓存不是使用 Web Stories 的强制性部分)。

Google 现在为所有 Web Stories 提供视频缓存支持。对于大多数创作者来说,您最喜欢的 创作工具 可能会处理这种额外的性能提升。如果您发布自己的故事,您可以通过以下步骤选择加入 Google 缓存

潜在优势

  • 降低服务成本:如果您选择加入,Google 将尝试从 Google 缓存中提供视频,然后再回退到您网站的托管,这可能会将您的视频托管成本降低高达 99%。
  • 减少等待时间:从 Google 缓存中播放的视频在 Discover、Google 搜索和 Google 图片中平均比未缓存的视频快 35%。
  • 改善阅读体验:Google 的视频缓存速度很快,我们在 Discover、Google 搜索和 Google 图片中看到,包含视频的页面的跳出率平均提高了 75%。

选择加入说明

如果您选择加入,Google 将尝试从 Google 缓存中提供视频,然后再回退到您网站的托管,这可能会将您的视频托管成本降低高达 99%。

要开始使用 Google 缓存 提供视频,您需要访问故事的 HTML。

要选择加入 Google 缓存:

使用属性 cache="google" 标记 amp-video

来源应指定为 source 子组件,而不是通过 amp-videosrc 属性指定。使用 720p 或更高分辨率的视频,以利用所有视频转码和自适应比特率算法。

示例

<!-- Enable caching on this video via the attribute opt-in -->
<amp-video cache="google">
  <source src="source1.mp4">
</amp-video>Code language: HTML, XML (xml)

如果选择加入成功,您将在浏览器网络选项卡中看到对 https://*.cdn.ampproject.org/mbv/s/* 的请求,该请求返回一个包含空源列表的 JSON(因为缓存错过了此视频)。在接下来的几分钟/几小时内,Google 视频缓存将获取并存储视频内容,以便以后对该 URL 的请求可以返回该源视频的已处理视频源列表。

实施故障排除

您的视频托管必须允许抓取视频,并且视频必须是公开的,以便缓存可以获取它。托管服务禁用抓取的典型方法是通过 robots.txt。例如,Vimeo 或 YouTube 会禁用抓取,因此,如果您的视频托管在这些服务上并嵌入到您的故事中,您将无法使用此功能。

保持更新

无论您是喜欢阅读 Web Stories,还是有兴趣自己创建它们,或者正在构建创作工具,请与 Web Stories 工作组分享您的想法和建议。您可以在 GithubSlack 上联系我们,还可以订阅流量较低的 开发者预览电子邮件组

作者:Ryan Warrender,Google Web Stories 产品经理