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

Question

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

现在我们的实现方式是这样的

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

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

他们显示错误的网址是

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

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

Answer 1

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

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

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

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

Site page speed (Youtube non cookie )issue - when implementing Youtube video play using <iframe>

javascript

youtube

video

iframe

craftcms