Le code suivant permet de différer le chargement du média renseigné via le champs ACF oEmbed.
C'est donc valable avec YouTube, mais aussi un tas d'autres médias tels que Viméo, Spotify, Twitter, Reddit, SoundCloud, Instagram...
Voir la liste de tous les services concernés par Embed sur le Codex WordPress.
Différer le chargement d'un média qui n'est pas visible dans le premier écran du site internet (au dessus de la ligne de flottaison) vous permet de gagner en temps de chargement mais surtout en temps d'affichage.
C'est un critère clé pour Google et que l'on retrouve lors de simulation PageSpeed sous le nom de First Contentful Paint (FCP). Ainsi le média est chargé ultérieurement, et laisse la priorité au contenu à afficher sur le premier écran du site. On évite ainsi d'attendre le chargement des scripts Embed pour proposer à l'internaute une interface chargée et complète.
Comment différer le chargement des médias dans WordPress avec le champs ACF oEmbed ?
La fonction PHP
1/ Ajouter le code PHP suivant dans le fichier functions.php du thème.
Cette fonction enlève la valeur de l'attribut src et ajoute à la place data-src-defer
// defer loading of videos
function defer_video_src_to_data($data, $url, $args) {
$data = preg_replace('/(src="([^\"\']+)")/', 'src="" data-src-defer="$2"', $data);
return $data;
} // end function defer_video_src_to_data
add_filter('oembed_result', 'defer_video_src_to_data', 99, 3);
add_filter('embed_oembed_html', 'defer_video_src_to_data', 99, 3);La fonction JavaScript, ou plutôt jQuery
2/ Ajouter le code JavaScript suivant dans le fichier utilisé pour les fonctions JavaScript du thème, tel que functions.js par exemple. Veillez à bien utiliser jQuery.
Cette fonction ré-initialise la valeur src une fois la page chargée.
// load defered videos
(function($){
$(window).load(function(e) {
$('[data-src-defer]').each(function(index, element) {
$(element).attr('src', $(element).attr('data-src-defer'));
});
});
})(jQuery);C'est tout !
Une fois ces 2 fonctions en place rechargez la page sur laquelle est présent le champs ACF oEmbed, puis grâce à la console développeur de votre navigateur vous constatez que l'attribut src a bien été remplacé par data-src-defer et que le média se charge maintenant en différé !
Si cet article vous a aidé, lâchez votre plus bel applaudissement en remerciement ! 🤗