PageSpeed Insights是否识别iframe原生lazy loading懒加载属性？

你遇到的这个问题既不是原生懒加载配置完全错误，也不是PageSpeed Insights完全不支持iframe原生懒加载，大多是两类边界情况导致的：

• 没有给iframe设置明确的宽高属性：浏览器在页面渲染初期无法计算出iframe的占位尺寸，会误判该iframe位于首屏范围内，因此提前触发资源加载，也会被PageSpeed Insights判定为初始需要加载的阻塞资源。
• PageSpeed Insights底层依赖的Chrome Headless渲染逻辑的懒加载触发阈值，和普通正式版Chrome存在差异，哪怕iframe实际在页面靠下位置，也可能被提前判定为需要加载。

解决方案 #

1. 先给现有iframe补充明确的宽高属性，配合aspect-ratio样式保证自适应，修改后重新跑PageSpeed Insights测试，大多数情况可以解决识别问题，参考代码如下：

<iframe 
  width="1280" 
  height="720" 
  src="https://www.youtube.com/embed/VIDEO_CODE?rel=0&autohide=1&showinfo=0" 
  loading="lazy"
  style="aspect-ratio: 16/9; width: 100%; height: auto;"
></iframe>

2. 如果修改后评分仍无改善，可以换成点击加载的方案：初始状态仅渲染视频封面图和播放按钮，用户点击后再动态插入iframe加载YouTube资源，这种方案初始状态完全不会请求任何YouTube相关资源，对评分提升效果远好于懒加载iframe。

内容的提问来源于stack exchange，提问作者ahendwh2