你如何推迟在WordPress网站上为YouTube视频解析JavaScript？

Question

我刚刚意识到我的1.2 MB网站（每个GTMetrix），其中550k是YouTube视频。

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

我希望我的网站加载更快......而且不确定如何继续。如果我可以在点击之前不加载YouTube视频，而只是在那里有缩略图，那么这似乎是正确的游戏？

Answer 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/

Answer 2

你可以通过两个简单的步骤实现这一目标

1. 更新您的嵌入代码，如流动.... <iframe width =“560”height =“315”src =“”data-src =“generic_youtube_url”frameborder =“0”allowfullscreen> </ iframe>
2. 这是java脚本部分.... function init（）{var vidDefer = document.getElementsByTagName（'iframe'）; for（var i = 0; i

参考更多详情：

https://scottdeluzio.com/defer-parsing-javascript-youtube-videos/

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

附：我个人使用它，它的工作原理。

谢谢Sabbir H.

Answer 3

最好和最快的事情是用链接或图像替换视频iframe，并在点击或其他事件上加载iframe。

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

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