I have a gltf model that I am loading into my website using the Babylon 3D Viewer for WordPress plugin, and I would like to defer the script so that it isn't affecting my load time. All of the plugins I found for async/deffering Javascript seem to not apply to 3rd party scripts like the one this plugin imports (from this url: https://cdn.babylonjs.com/viewer/babylon.viewer.js).
Is there any other way I can defer the script?
One way you might be able to do this is with the script_loader_tag filter. See below:
function mind_defer_scripts( $tag, $handle, $src ) {
// array of scripts to add defer tag to
$defer = [
'https://cdn.babylonjs.com/viewer/babylon.viewer.js'
];
// check if current script should be deferred
if ( in_array( $src, $defer ) ) {
return '<script src="' . $src . '" defer="defer" type="text/javascript"></script>' . "\n";
}
return $tag;
}
add_filter( 'script_loader_tag', 'mind_defer_scripts', 10, 3 );
Note if you know the "handle" you could use that in-place of src like below:
function mind_defer_scripts( $tag, $handle, $src ) {
// array of scripts to add defer tag to
$defer = [
'babylon'
];
// check if current script should be deferred
if ( in_array( $handle, $defer ) ) {
return '<script src="' . $src . '" defer="defer" type="text/javascript"></script>' . "\n";
}
return $tag;
}
add_filter( 'script_loader_tag', 'mind_defer_scripts', 10, 3 );