1

在使用 amp-youtube 组件时，我注意到它使用视频的静态封面图像作为占位符，直到用户滚动到视频本身加载视频的位置！

这很棒！但是，在 PageSpeed 洞察力中测试我的页面时，我因“延迟屏幕外图像”而受到惩罚，因为使用的占位符图像本身不是延迟加载的。

页面上的所有其他 amp-img 都会被延迟加载，所以我希望也有办法为 YouTube 代码启用它？

这是一个带有 YouTube 视频的页面示例：https ://nationalguitaracademy.com/acoustic-guitar-tabs/amp/

页面的 PageSpeed 结果：https ://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fnationalguitaracademy.com%2Facoustic-guitar-tabs%2Famp%2F

TLDR：视频本身会被延迟加载，但在视频加载之前使用的静态图像不会被延迟加载。

4

1 回答 1

1

尝试像这样添加自定义占位符：

<amp-youtube
 // attributes here 
>
  <amp-img
    src="// placeholder image "
    placeholder
    layout="fill"
  />
</amp-youtube>

如果这不起作用，那么当涉及到 AMP 时，确实没有办法修复 Lighthouse 或 Speed Insights 错误，因为您无法编辑源代码。您唯一的希望是在 AMP GitHub 项目中提交错误报告。

于 2019-12-28T14:43:22.823 回答