嵌入 youtube 视频 + 对正确的网站进行反向工程时性能下降

Posted 2023-03-22

【中文标题】嵌入 youtube 视频 + 对正确的网站进行反向工程时性能下降

【英文标题】：Performance drop when embedding youtube videos + reverse engineering a site that does it right

【发布时间】：2021-06-04 01:00:42

【问题描述】：

在 html + vanilla JS 页面中嵌入 youtube 视频时，由于所有视频都是预加载的，因此性能会大幅下降。 （videoplayback?expire=..... 请求）

我发现 vodafone 的工作登陆页面有两个视频，它们会延迟加载它们。我真的很喜欢这个结果：

您可以直接与视频互动（例如，稍后分享按钮） 加载期间有 0 个请求 点击后视频播放流畅

您可以在这里查看：https://careers.vodafone.com/

我看到了很多使用 css、插件进行延迟加载的方法……但我没有看到像 vodafone 的解决方案那样干净的解决方案。

页面加载时所有视频都没有迹象：

有人知道他们是怎么做到的吗？是插件吗？

【参考方案1】：

据我所知，Vondafone 在这里没有做任何特别的事情，只是一个普通的iframe 指向嵌入页面。

<iframe src="//www.youtube.com/embed/9cC0CZiVpsA?rel=0&amp;autoplay=0" allowfullscreen="true"></iframe>

对 YouTube 的第一个请求发生在 DOMContentLoaded 事件之前（图中的蓝色条）和页面完全加载之前（红色条）。预览图像在两个栏之间加载。

但是，只有在您点击其中一个视频后，才能开始向 videoplayback 发出请求。是不是您在视频网址中添加了;autoplay=1 或iframe 的autoplay 属性？

【讨论】：

你是对的。只是一个iframe。即使使用 loading="lazy" 属性，它也很好用......我正在尝试在旧的 jquery 页面中修复它，它正在消耗我的大脑！