如何推迟在Wordpress上嵌入YouTube视频的JavaScript？

Question

我想推迟特定Javascript文件的加载。在GTMetrix上，“延迟加载Java语言”类别下的得分为14。我想推迟此文件的加载：

https://www.youtube.com/yts/jsbin/player_ias-vflRCamp0/en_US/base.js

我尝试将脚本插入到主题标签的脚注中。这是我尝试过的：

`<script type="text/javascript">
function parseJSAtOnload() {
var element = document.createElement("script");
element.src = "https://www.youtube.com/yts/jsbin/player_ias-vflRCamp0/en_US/base.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", parseJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", parseJSAtOnload);
else window.onload = parseJSAtOnload;
</script>

`

我也尝试过：

`<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "https://www.youtube.com/yts/jsbin/player_ias-vflRCamp0/en_US/base.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>`

这些脚本对GTMetrix得分没有任何作用。

我也尝试过：

`<script type="text/javascript">
function parseJSAtOnload() {
var links = ["www.youtube.com/yts/jsbin/player_ias-vflRCamp0/en_US/base.js", "www.youtube.com/yts/jsbin/www-embed-player-vflO7uv3_/www-embed-player.js"],
headElement = document.getElementsByTagName("head")[0],
linkElement, i;
for (i = 0; i < links.length; i++) {
linkElement = document.createElement("script");
linkElement.src = links[i];
headElement.appendChild(linkElement);
}
}
if (window.addEventListener)
window.addEventListener("load", parseJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", parseJSAtOnload);
else window.onload = parseJSAtOnload;
</script>`

此脚本将暂时起作用。我将在GTMetrix上测试该页面，该页面显示Javascript被推迟。在Waterfall（瀑布）图表上，它表明那些脚本已被取消（也可以在这里了解？）

当我重新测试以确保它可以正常工作时，我又回到了原来的14分。我还能尝试什么，或者我做错了什么？

此处的网站：https://www.fralinpickups.com/product/vintage-hot/

Answer 1

您应该使用代码创建一个文件，并使用[wp_enqueue_script][1]钩子对其进行排队。

如果文件名为my_script.js，并且位于主题的/ js /文件夹中，则该函数应如下所示：

// You probably already have a function to enqueue scripts in your theme function.php file.
function my_script() {

    wp_enqueue_script( 'my_script', get_template_directory_uri() . '/js/my_script.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_script' );

在其他脚本之后加载该脚本的键位于函数的第五个参数中，如果设置为true，则将脚本加载到页脚中body标记之前。如果您的脚本需要jQuery和/或其他依赖项，则可以使用相应的句柄将它们添加到数组中，如文档（here）中所述。

如果您希望推迟使用脚本标签，可以使用以下命令：

function add_defer_attribute($tag, $handle) {
    if ( 'my_script' !== $handle )
        return $tag;
    return str_replace( ' src', 'defer="defer" src', $tag );
}
add_filter('script_loader_tag', 'add_defer_attribute', 10, 2);

有关script_loader_tag的更多信息。

更新：

这是一个有效的答案，可以帮助您推迟youtube javascript：How do you Defer Parsing of JavaScript for YouTube video on a WordPress site?