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

How do you Defer Parsing of JavaScript for YouTube video on a WordPress site?

本文关键字：视频 YouTube JavaScript 解析 延迟 WordPress 网站      更新时间：2023-09-26

我今天才意识到我的1.2 MB网站(每GTMetrix)，其中550k是YouTube视频。

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

我想让我的网站加载更快…不知道该如何继续。如果我能让YouTube视频在点击之前不加载，而只是在那里有一个缩略图，这似乎是正确的发挥?

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/

您可以通过两个简单的步骤实现此目标......

  1. 像流动一样更新你的嵌入代码....
<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://scottdeluzio.com/defer-parsing-javascript-youtube-videos/

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

注:我个人就在用这个，它很好用。

谢谢Sabbir H

最好和更快的方法是用链接或图像之类的东西替换视频iframe，并在点击或其他事件时加载iframe

Ahmed Essam给你链接了一个解决方案，但是如果你不想或者不知道如何在你的wordpress安装上编辑文件，嵌入视频缩略图插件可以完成这项工作:

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

相关文章：