您如何在 WordPress 网站上推迟对 YouTube 视频的 JavaScript 解析？答案

【问题标题】：How do you Defer Parsing of JavaScript for YouTube video on a WordPress site?您如何在 WordPress 网站上推迟对 YouTube 视频的 JavaScript 解析？
【发布时间】：2016-08-10 04:45:32
【问题描述】：

我今天才意识到，在我的 1.2 MB 网站（每个 GTMetrix）中，有 550k 是 YouTube 视频。

我的网站是一个 WordPress 网站，当前视频加载在 iframe 中。

我希望我的网站加载得更快...但不知道如何继续。如果我可以让 YouTube 视频在被点击之前不加载，而只是在那里有一个缩略图，那似乎是正确的播放方式？

【问题讨论】：

What is the best route to take to fix this? 修复什么？你还没有真正说明你想要修复什么，或者什么是坏的 - 你已经说明了一些没有问题的事实
对不起。编辑以反映我的愿望。
研究如何让 youtube 视频不自动播放 - 在这种情况下，它不应该在用户按下播放之前开始下载数据
如果你在 iframe 的 url 中有&autoplay=1，删除它，你会是金色的
看看：labnol.org/internet/light-youtube-embeds/27941

标签： javascript wordpress

【解决方案1】：

1.将“scr”替换为“data-src”

<iframe width="560" height="315" data-src="https://www.youtube.com/embed/123456789" frameborder="0" allowfullscreen></iframe>

2。添加Javascript

function init() {
var vidDefer = document.getElementsByTagName('iframe');
for (var i=0; i<vidDefer.length; i++) {
if(vidDefer[i].getAttribute('data-src')) {
vidDefer[i].setAttribute('src',vidDefer[i].getAttribute('data-src'));
} } }
window.onload = init;

与过去相比，现在您的网站加载速度会更快。

我关注了这个博客，它对我有用：http://www.codecanal.com/defer-parsing-javascript-youtube-videos/

【讨论】：

我的网站主页加载了 4 个 youtube 视频。它在第一个 iframe 中分配了正确的 src 值。其他三个 iframe src 分配为“未知”
@VinothRaja 你能给我你的网站链接吗？这样我就可以检查了。
好吧，我尝试使用您的代码，但 Pagespeed Insight 返回完全相同的结果：“某些第三方嵌入可以延迟加载。考虑用外观替换它们，直到需要它们”。传输大小主线程阻塞时间 - 1,310 毫秒 YouTube 嵌入式播放器（视频）
要让它与 Pagespeed Insight 一起工作，您现在必须在所有 onload 元素完成后加载。将 window.onload = init 更改为 window.setTimeout(init, 3000) 将在 3 秒延迟后执行 - 在页面完全加载后将其调整为一个数字，然后 Pagespeed Insights 会将其排除在计算之外。如果这个数字太低，它包括它！（这些工具变得太聪明了......他们显然希望在这些计算中包含延迟处理）

【解决方案2】：

你可以通过两个简单的步骤来实现这一点......

像流动一样更新您的嵌入代码......

<iframe width="560" height="315" src="" data-src="generic_youtube_url" frameborder="0" allowfullscreen></iframe>

这里是java脚本部分......

function init() { 
var vidDefer = document.getElementsByTagName('iframe');
for (var i=0; i<vidDefer.length; i++) {
 if(vidDefer[i].getAttribute('data-src')) {
 vidDefer[i].setAttribute('src',vidDefer[i].getAttribute('data-src'));
 } } } window.onload = init;

https://varvy.com/pagespeed/defer-videos.html

附：我个人正在使用它并且它有效。

谢谢萨比尔H

【讨论】：

【解决方案3】：

最好和更快的做法是将视频 iframe 替换为链接或图像之类的内容，然后在点击或其他事件时加载 iframe。

Ahmed Essam 为您提供了一个解决方案，但如果您不想或不知道如何在您的 wordpress 安装中编辑文件，嵌入视频缩略图插件可以完成这项工作：

https://wordpress.org/plugins/embed-video-thumbnail/

【讨论】：