Core Web Vitals parfaits avec YouTube

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

Intégrer une vidéo YouTube sur une page est très simple. Rendez-vous d'abord sur la page de la vidéo et cliquez sur « Partager » sous la vidéo

Sélectionnez ensuite « Intégrer » et copiez le code d'intégration :

Copiez le code et collez-le dans le HTML du site. En lançant ensuite un audit Lighthouse, vous constaterez que toutes les métriques majeures 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, CSS, polices et scripts de tracking. 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 optimisée

Corriger les Core Web Vitals de YouTube !

Nous allons corriger les Core Web Vitals en créant un placeholder pour l'image. Au chargement de la page, le placeholder est chargé. Nous ne remplaçons le placeholder par la véritable vidéo qu'au moment où elle est réellement nécessaire. C'est ce qu'on appelle le pattern façade : afficher d'abord un élément léger de substitution et ne charger la ressource tierce lourde que lors d'une interaction. La même technique fonctionne pour Google Maps et les widgets de chat.

Étape 1 : télécharger l'image du placeholder

Télécharger l'image du placeholder 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 constater, l'URL contient une variable : « Oxv6IRcuNaI ». Copiez cette variable et collez-la dans l'adresse par défaut des miniatures de 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... ». Une fois l'image téléchargée, redimensionnez-la selon vos besoins.

Étape 2 : créer le placeholder

L'étape suivante consiste à créer le placeholder. Je vais utiliser une div en position relative, y placer une image avec object-fit:cover et une iframe vide que nous remplirons plus tard. Pour des raisons de confidentialité, vous pouvez utiliser youtube-nocookie.com au lieu de youtube.com dans l'URL d'intégration. Cela empêche YouTube de déposer des cookies de suivi tant que la vidéo n'est pas réellement lancée.

<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, rien de compliqué. Ajoutons maintenant un peu de style. Le padding appliqué au placeholder YouTube est une astuce pour que la vidéo s'adapte à tous les écrans. L'image est positionnée en absolu en haut et reçoit la propriété object-fit:cover. Cela imite une image d'arrière-plan, tout en permettant le lazy loading et les images responsives. Enfin, l'iframe est elle aussi positionnée en absolu et recouvre tout le placeholder dès qu'elle devient 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;
}

Passons à l'étape clé : remplacer l'image du placeholder par la véritable vidéo. J'ajoute un écouteur d'événement sur le placeholder YouTube. Dès qu'un visiteur survole l'image, l'iframe 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 cran plus loin : programmons la vidéo YouTube pour remplacer systématiquement l'image du placeholder, même sans interaction. Je ne veux pas le faire immédiatement : attendons que le navigateur soit au repos. J'utilise ici un setTimeout par simplicité, mais la méthode requestIdleCallback() constitue é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>

Voilà comment obtenir un score PageSpeed parfait avec une vidéo YouTube intégrée, en seulement quelques lignes de code.

Alternative : la technique srcdoc

Pour vous passer totalement de JavaScript, vous pouvez utiliser l'attribut srcdoc sur l'iframe. Il permet d'intégrer une mini-page HTML (uniquement la miniature et un bouton de lecture) directement dans la balise iframe. Dès que 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 tant que le visiteur n'interagit pas. En contrepartie, sur certains navigateurs mobiles, deux appuis sont nécessaires (un pour activer le lien du srcdoc, un pour lancer 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 réunit tout cela dans un unique custom element. 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 nativement la miniature, le bouton de lecture, le redimensionnement responsive et l'accessibilité. Il utilise youtube-nocookie.com par défaut.

Étendre cette technique

Ce n'est bien sûr qu'un exemple simple, valable pour une seule vidéo YouTube avec un identifiant précis. Sur votre site, il est judicieux d'attacher l'écouteur d'événement à un querySelector et d'ajouter un IntersectionObserver pour charger automatiquement les vidéos YouTube avant qu'elles n'apparaissent à l'écran. Quelle que soit votre façon de l'adapter : le principe reste le même !

Sur l'ensemble des sites suivis par CoreDash, les pages qui utilisent un pattern façade pour YouTube affichent un LCP plus rapide de 800 ms en moyenne par rapport à celles qui chargent l'intégration directement. Si vous avez mis en place le pattern façade, utilisez le Real User Monitoring pour vérifier ce gain avec les données réelles des visiteurs.