首页 > 解决方案 > 网站页面速度（Youtube 非 cookie）问题 - 使用 Youtube 视频播放时</p> </div> <div class="container" id="article"> <div class="page-header"> <h1>javascript - 网站页面速度（Youtube 非 cookie）问题 - 使用 Youtube 视频播放时<iframe></h1> </div> <div class="con"> <h3>问题描述</h3> <p>We developed a CMS using craft cms. We are having several company youtube videos to play in our site.</p>
<p>Now we are implemented like</p>
<pre><code><iframe loading="lazy" id="clickVideo" height="635" width="100%" src="https://www.youtube.com/embed/<code>?rel=0"> </iframe> 
</code></pre>
<p>When we checked the page speed using google and several other sites. They are showing errors as in the screenshot below:-</p>
<p><a href="https://i.stack.imgur.com/3GgED.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3GgED.png" alt="enter image description here" /></a></p>
<p>The urls they are showing errors is</p>
<pre><code>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
</code></pre>
<p>How we need to fix this issue? Any other way for implementing this? Please help.</p>
<p class="author">标签： <span>javascript</span><span>video</span><span>iframe</span><span>youtube</span><span>craftcms</span></div> <h3>解决方案</h3> <hr> <div class="con "> <div class="body"> <p>First of all, the warnings indicate that you have iframes from both <code>youtube-nocookie.com</code> and <code>youtube.com</code> on one page. Those are essentially the same (the former being slightly better at preserving privacy), but since they are a different origin, the browser can't reuse any assets between them. You can see this in your screenshot – the browser is loading <code>base.js</code> from both origins, which means the performance impact is doubled. So the first step would be to decide whether you want to use <code>youtube-nocookie.com</code> or <code>youtube.com</code> and then use that domain for ALL iframes on your page. This will cut the performance impact in half.</p>
<p>Beyond that, embedded YouTube videos will load whatever resources Google wants them to, so you can't really optimize the player itself. You're already lazy-loading the iframes. Beyond that:</p>
<ol>
<li>Consider if you actually need an iframe or if a link to the video would suffice. If you don't embed any videos, they don't impact performance.</li>
<li>You can also defer loading the iframe until a user explicitly clicks a button to load it. This will help with initial loading performance and have the nice side-effect of being privacy-preserving, which is relevant if you have users in the EU. There are several tools to achieve this, for example the <a href="https://heyklaro.com/docs/tutorials/contextual_consent" rel="nofollow noreferrer">Contextual Consent feature of klaro</a>.</li>
</ol>
</div> <div class="clear"></div> </div> <hr> <h3>推荐阅读</h3> <ul> <li><a href="/question/62709621.html">angular - 如何将父标题更改为Angular中子标题的值？</a></li><li><a href="/question/62709623.html">python - 如何在opencv SelectROI函数中更改边界框的颜色</a></li><li><a href="/question/62709624.html">python - 用于智能数据生成的 Python 库</a></li><li><a href="/question/62709625.html">javascript - Antd 在输入时禁用粘贴事件</a></li><li><a href="/question/62709626.html">angular - 无法从“Window”读取“sessionStorage”属性：拒绝访问此文档。子域的 Cookie 错误</a></li><li><a href="/question/62709628.html">python - Python 错误：OSError：[Errno 22] 无效参数</a></li><li><a href="/question/62709630.html">ssrs-2012 - 从当前行减去 SSRS 中的其他先前行</a></li><li><a href="/question/62709632.html">javascript - 等待 API 请求完成，以便它可以为下一次异步迭代传递一个变量以使用它</a></li><li><a href="/question/62709633.html">excel - 第二天自动更新单元格</a></li><li><a href="/question/62709634.html">ethereum - 以太坊与去中心化应用程序的连接</a></li> </ul> </div> <footer> <p><a href="/">时间戳在线转换</a></p> </footer> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-6117966252207595" crossorigin="anonymous"></script> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?7145e10314e5e27e886ad54be2aeb067"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </body></html>