Core Web Vitals YouTube 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. Naviguez d'abord 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 exécuterez ensuite un audit Lighthouse, vous remarquerez que toutes les métriques importantes comme le First Contentful Paint, le Speed Index, le Largest Contentful Paint et le Total Blocking Time ont augmenté d'environ 1 à 1,5 seconde. Une intégration YouTube standard charge entre 1,3 et 2,6 Mo de JavaScript, de CSS, de polices et de scripts de suivi. Elle effectue plus de 20 requêtes HTTP vers 8 à 10 domaines différents. Tout cela se produit avant même que le visiteur n'appuie sur lecture. 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. C'est ce qu'on appelle le pattern façade : affichez d'abord un remplaçant léger, ne chargez la lourde ressource tierce que lors de l'interaction. La même technique fonctionne pour Google Maps et les widgets de chat.

Étape 1 : Télécharger l'image de remplacement

Le téléchargement de l'image de remplacement 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 de l'image par défaut pour n'importe quelle 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 une div positionnée en relatif, y placer une image avec object-fit:cover et une iframe vide que nous remplirons plus tard. Pour la confidentialité, vous pouvez utiliser youtube-nocookie.com au lieu de youtube.com dans l'URL d'intégration. Cela empêche YouTube de définir des cookies de suivi jusqu'à ce que la vidéo soit réellement lue.

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

Jusqu'ici tout va bien, ajoutons maintenant un peu de style. Le padding dans l'espace réservé YouTube est une petite astuce pour s'assurer que la vidéo se met à l'échelle sur tous les appareils. L'image est placée en absolu en haut et possède une propriété object-fit:cover. Cela imite une image d'arrière-plan mais permet le lazy loading et des images responsives. 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;
}

Place à la magie : remplaçons l'image de remplacement par une vraie vidéo. J'ajoute un event listener à l'espace réservé YouTube. Une fois qu'un visiteur survole l'image, l'iframe YouTube se charge et devient visible en raison du 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 toujours remplacer l'image de remplacement même sans aucune interaction. Je ne veux pas faire cela tout de suite, attendons que le navigateur soit inactif (idle). J'utiliserai un setTimeout par souci de simplicité, mais la méthode requestIdleCallback() serait également un excellent choix. Notez que requestIdleCallback n'est pas encore pris en charge par défaut dans Safari. Utilisez un fallback : const idle = window.requestIdleCallback || ((cb) => setTimeout(cb, 1));

<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à, un score de page-speed parfait avec une vidéo YouTube intégrée en seulement quelques lignes de code.

Alternative : la technique srcdoc

Si vous souhaitez éviter entièrement JavaScript, vous pouvez utiliser l'attribut srcdoc sur l'iframe. Cela intègre une mini page HTML (juste la miniature et un bouton de lecture) directement dans la balise iframe. Lorsque le visiteur clique sur lecture, le navigateur la remplace par le véritable lecteur YouTube.

<iframe
   src="https://www.youtube-nocookie.com/embed/VIDEO_ID?autoplay=1"
   srcdoc="<style>*{padding:0;margin:0;overflow:hidden}
   html,body{height:100%}
   img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}
   span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;
   color:white;text-shadow:0 0 0.5em black}</style>
   <a href=https://www.youtube-nocookie.com/embed/VIDEO_ID?autoplay=1>
   <img src=https://i.ytimg.com/vi_webp/VIDEO_ID/maxresdefault.webp
   alt='Video title'><span>&#x25BA;</span></a>"
   width="560"
   height="315"
   loading="lazy"
   allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
   allowfullscreen>
</iframe>

L'approche srcdoc ne charge aucune ressource externe jusqu'à ce que le visiteur interagisse. Le compromis est que sur certains navigateurs mobiles, cela nécessite deux appuis (un pour activer le lien srcdoc, un pour lire la vidéo).

Prêt pour la production : lite-youtube-embed

Si vous préférez une solution prête à l'emploi, le web component lite-youtube-embed de Paul Irish fait tout cela dans un seul élément personnalisé. Il est environ 224 fois plus rapide que l'intégration YouTube par défaut et c'est la solution recommandée par web.dev.

<lite-youtube videoid="Oxv6IRcuNaI"></lite-youtube>

Il gère la miniature, le bouton de lecture, le dimensionnement responsive et l'accessibilité de manière native. Il utilise youtube-nocookie.com par défaut.

É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 id spécifique. Sur votre site, ce serait une bonne idée d'attacher l'event listener à un querySelector et d'attacher également un IntersectionObserver pour charger automatiquement les vidéos YouTube avant qu'elles ne défilent dans la vue. Quelle que soit la manière dont vous souhaitez l'étendre : l'idée reste la même !

Sur les sites surveillés par CoreDash, les pages utilisant un pattern façade YouTube ont un LCP moyen qui est 800 ms plus rapide que les pages chargeant l'intégration directement. Si vous avez implémenté le pattern façade, utilisez le Real User Monitoring pour vérifier l'amélioration avec de vraies données de visiteurs.