Différer le chargement d'une vidéo Youtube sur Shopify (et autres CMS)

Sommaire

Dans un précédent article, nous avons vu en quoi il était préférable d'héberger ses vidéos directement sur son site.

Si vous préférez tout de même intégrer directement une vidéo Youtube, il faut prendre conscience que celle-ci va ralentir votre site et faire baisser votre score de vitesse sur Shopify, PageSpeed ou encore GTmetrix.

La solution pour palier à ce problème est d'ajouter la fonction lazy loading à votre vidéo.

Qu'est-ce que le lazy loading ?

Le lazy loading, c'est le principe de ne charger que ce que l'on voit à l'écran. Tout ce qu'il y a en dehors, reste en attente, et se chargera lorsqu'on arrivera dessus.

Lazy loading exemple

Intégrer le lazy loading à une vidéo Youtube

Pour cette intégration, nous utiliserons le script vanilla LazyLoad. C'est un script très léger (moins de 2,4 Ko) qui permet d'ajouter la fonction lazy loading à votre site web et donc de permettre de différer le chargement de vos images, vidéos et iframes (ce qui nous intéresse ici) sous la ligne de flottaison jusqu'au moment où ils entreront en action.

Ligne de flotaison

Pour ce faire, on ajoute le script suivant avant la balise </head> dans le theme.liquid de notre thème Shopify :

<script async="" src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@latest/dist/lazyload.min.js"></script>

Note : N'oubliez pas de sauvegarder votre thème avant de le modifier. Ou utilisez notre application GoBack pour sauvegarder votre thème automatiquement.

Ensuite, il ne reste plus qu'à modifier l'iframe de notre vidéo Youtube.

Lorsque vous cherchez à intégrer une vidéo Youtube, depuis Youtube, vous recevez l'élément HTML suivant :

<iframe width="560" height="315" src="https://www.youtube.com/embed/XXXXXXX" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Pour appliquer notre script Vanilla, il suffit de,

Changer src= par data-src= : 

<iframe width="560" height="315" data-src="https://www.youtube.com/embed/XXXXXXX" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Intégrer un script avant la balise </head> de theme.liquid :

<script>
window.lazyLoadOptions = {
};
window.addEventListener("LazyLoad::Initialized", function (event) {
    window.lazyLoadInstance = event.detail.instance;
}, false);
</script> 

Et c'est terminé !

Laissez un commentaire

Veuillez noter que les commentaires doivent être approvés avant d'être affichés