如何在WordPress网站上延迟解析YouTube视频的JavaScript?

rxztt3cl  于 2023-04-05  发布在  WordPress
关注(0)|答案(3)|浏览(213)

我今天才意识到,在我的1.2MB网站(每个GTMetrix)中,有550k是YouTube视频。
我的网站是一个WordPress网站,当前视频加载在iframe中。
我希望我的网站加载速度更快...而且不知道如何进行。如果我能让YouTube视频在点击之前不加载,而只在那里有一个缩略图,看起来这将是正确的做法?

ycggw6v2

ycggw6v21#

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/

wr98u20j

wr98u20j2#

您可以通过两个简单的步骤来实现......
1.更新你的嵌入代码就像流动...

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

1.下面是java script部分。。。

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://scottdeluzio.com/defer-parsing-javascript-youtube-videos/
https://varvy.com/pagespeed/defer-videos.html
我个人正在使用这个,它很有效。
感谢Sabbir H

2w2cym1i

2w2cym1i3#

最好和最快的方法是用链接或图像之类的东西替换视频iframe,并在单击或其他事件时加载iframe。
Ahmed Essam为您提供了一个解决方案,但如果您不想或不知道如何编辑WordPress安装中的文件,则嵌入视频缩略图插件可以完成这项工作:
https://wordpress.org/plugins/embed-video-thumbnail/

相关问题