网站页面速度（Youtube 非 cookie）问题 - 使用 <iframe> 实现 Youtube 视频播放时答案

【问题标题】：Site page speed (Youtube non cookie )issue - when implementing Youtube video play using <iframe>网站页面速度（Youtube 非 cookie）问题 - 使用 <iframe> 实现 Youtube 视频播放时
【发布时间】：2021-07-06 11:24:26
【问题描述】：

我们使用craft cms 开发了一个CMS。我们的网站上有几个公司的 youtube 视频可供播放。

现在我们的实现是这样的

<iframe loading="lazy" id="clickVideo" height="635" width="100%" src="https://www.youtube.com/embed/<code>?rel=0"> </iframe>

当我们使用谷歌和其他几个网站检查页面速度时。他们正在显示错误，如下面的屏幕截图所示：-

他们显示错误的网址是

https://www.youtube-nocookie.com/s/player/7acefd5d/player_ias.vflset/en_US/base.js
https://www.youtube.com/s/player/7acefd5d/player_ias.vflset/en_US/base.js

我们需要如何解决这个问题？还有其他实现方式吗？请帮忙。

【问题讨论】：

我不认为它们是错误 - 它们只是性能警告。
它们还会影响页面速度并增加加载时间。这就是为什么

标签： javascript video iframe youtube craftcms

【解决方案1】：

首先，警告表明您在一页上有来自youtube-nocookie.com 和youtube.com 的iframe。这些本质上是相同的（前者在保护隐私方面略胜一筹），但由于它们的来源不同，浏览器不能在它们之间重用任何资产。您可以在屏幕截图中看到这一点 - 浏览器正在从两个来源加载 base.js，这意味着性能影响加倍。因此，第一步是决定您是要使用youtube-nocookie.com 还是youtube.com，然后将该域用于页面上的所有 iframe。这会将性能影响减半。

除此之外，嵌入的 YouTube 视频会加载 Google 想要的任何资源，因此您无法真正优化播放器本身。您已经在延迟加载 iframe。除此之外：

请考虑您是否真的需要 iframe，或者视频链接是否就足够了。如果您不嵌入任何视频，它们不会影响性能。
您还可以推迟加载 iframe，直到用户明确单击按钮加载它。这将有助于初始加载性能，并具有保护隐私的良好副作用，如果您在欧盟有用户，这将是相关的。有几种工具可以实现这一点，例如Contextual Consent feature of klaro。

【讨论】：