YouTube Core Web Vitals Parfaits

Comment intégrer une vidéo YouTube (la méthode lente)

YouTube a rendu l'intégration d'une vidéo sur votre page assez simple. Tout d'abord, naviguez vers la page de la vidéo et cliquez sur partager sous la vidéo

Ensuite, sélectionnez intégrer et copiez le code d'intégration :

Copiez le code et collez-le dans le HTML de votre site. Lorsque vous lancez ensuite un audit Lighthouse, vous remarquerez que toutes les métriques importantes comme First Contentful Paint, Speed index, Largest Contentful Paint et le Time to interactive ont augmenté d'environ 1 à 1,5 seconde. Corrigeons cela :

Intégration YouTube par défaut

Intégration YouTube intelligente

Corrigez les Core Web Vitals de YouTube !

Nous allons corriger les Core Web Vitals en créant un espace réservé pour l'image. Pendant le chargement de la page, l'espace réservé sera chargé. Ce n'est que lorsque nous aurons réellement besoin de la vidéo YouTube que nous remplacerons l'espace réservé par la vidéo réelle.

Étape 1 : Téléchargez l'image de l'espace réservé

Le téléchargement de l'image de l'espace réservé est très simple. Regardez l'url de la vidéo YouTube. Pour cet exemple, nous utiliserons cette url : https://www.youtube.com/watch?v=Oxv6IRcuNaI

Comme vous pouvez le remarquer, il y a une variable dans l'url : 'Oxv6IRcuNaI'. Copiez cette variable et collez-la dans l'emplacement d'image par défaut pour toute vidéo YouTube https://i.ytimg.com/vi_webp/Oxv6IRcuNaI/maxresdefault.webp

Ouvrez cette url, faites un clic droit sur l'image et sélectionnez 'enregistrer l'image sous'. Après avoir téléchargé l'image, redimensionnez-la selon vos besoins.

Étape 2 : créer l'espace réservé

L'étape suivante consiste à créer l'espace réservé. Je vais utiliser un div positionné en relatif, placer une image avec object-fit:cover et une i-frame vide que nous remplirons plus tard.

<div id="ytplaceholder">
   <img class="ytcover"
        loading="lazy"
        src="https://i.ytimg.com/vi_webp/Oxv6IRcuNaI/maxresdefault.webp">
   <iframe 
       id="ytiframe" 
       data-src="https://www.youtube.com/embed/Oxv6IRcuNaI">
   </iframe>
</div>

Jusqu'ici tout va bien, maintenant ajoutons un peu de style. Le padding dans l'espace réservé YouTube est une petite astuce pour s'assurer que la vidéo s'adapte à tous les appareils. L'image est placée en absolu en haut et a une propriété object-fit:absolute. Cela imite une image d'arrière-plan mais permet le chargement différé et les images réactives. Enfin, l'iframe elle-même a une position absolue et couvre tout l'espace réservé une fois qu'elle est visible.

#ytplaceholder {
    position: relative;
    position: relative;
    overflow: hidden;
    padding-top: 56.25%;
}

#ytplaceholder img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    object-fit: cover
}

#ytplaceholder iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    opacity: 0;
    transition: opacity 2.4s ease 0s;
}

Maintenant place à la magie : changeons l'image de l'espace réservé pour une vraie vidéo. J'ajoute un écouteur d'événement à l'espace réservé YouTube. Une fois qu'un visiteur survole l'image, l'i-frame YouTube se charge et devient visible grâce au changement d'opacité.

<script>
// youtube placeholder
var ytplaceholder = document.getElementById ('ytplaceholder'); 

// change the video
var videolistner = function(e) {
   var ytiframe = document.getElementById('ytiframe');
   ytiframe.src = ytiframe.getAttribute('data-src');
   ytiframe.onload = ytiframe.style.opacity = 1;
   ytplaceholder.removeEventListener("mouseover", videolistner);
};

//listen to the mouseover event to change the video
ytplaceholder.addEventListener('mouseover', videolistner);

Toujours afficher la vidéo YouTube

Allons un peu plus loin et mettons la vidéo YouTube en file d'attente pour qu'elle remplace toujours l'image de l'espace réservé même sans aucune interaction. Je ne veux pas faire ça tout de suite, attendons que le navigateur soit inactif. J'utiliserai un time-out pour faire simple mais la méthode requestIdleCallback() serait aussi un excellent choix

<script>
var ytplaceholder = document.getElementById ('ytplaceholder'); 

var videolistner = function (e) { 
   var ytiframe = document.getElementById ('ytiframe'); 
   ytiframe.src = ytiframe.getAttribute ('data-src'); 
   ytiframe.onload = ytiframe.style.opacity=1; 
   ytplaceholder.removeEventListener ("mouseover", videolistner); 
   }; 

ytplaceholder.addEventListener ('mouseover', videolistner);   

// show the YouTube video anyway after 3 seconds
setTimeout(function(){
   videolistner();
},3000);
</script>

Et voilà les gars, un score PageSpeed parfait avec une vidéo YouTube intégrée en seulement quelques lignes de code.

Étendez cette technique.

Bien sûr, ce n'est qu'un exemple simple qui ne fonctionne que pour une seule vidéo YouTube avec un identifiant spécifique. Sur votre site, ce serait une bonne idée d'attacher l'écouteur d'événement à un querySelector et aussi d'attacher l'interaction-observer pour charger automatiquement les vidéos YouTube avant qu'elles ne défilent dans la vue. Peu importe comment vous voulez l'étendre : l'idée reste la même !