Core Web Vitals perfetti per YouTube

Come incorporare un video di YouTube (nel modo lento)

YouTube ha reso molto semplice incorporare un video nella tua pagina. Per prima cosa vai sulla pagina del video e clicca su condividi sotto al video

Successivamente seleziona incorpora e copia il codice di incorporamento:

Copia il codice e incollalo nell'HTML del tuo sito. Quando eseguirai un audit di Lighthouse noterai che tutte le metriche importanti come First Contentful Paint, Speed Index, Largest Contentful Paint e Time to Interactive sono aumentate di circa 1 - 1,5 secondi. Risolviamo il problema:

Incorporamento predefinito di YouTube

Incorporamento intelligente di YouTube

Migliora i Core Web Vitals di YouTube!

Andremo a migliorare i Core Web Vitals creando un segnaposto (placeholder) per l'immagine. Durante il caricamento della pagina verrà caricato il segnaposto. Solo quando avremo effettivamente bisogno del video di YouTube sostituiremo il segnaposto con il video reale.

Passaggio 1: Scarica l'immagine segnaposto

Scaricare l'immagine segnaposto è davvero semplice. Guarda l'url del video di YouTube. Per questo esempio useremo questo url: https://www.youtube.com/watch?v=Oxv6IRcuNaI

Come potresti notare c'è una variabile nell'url: 'Oxv6IRcuNaI'. Copia quella variabile e incollala nella posizione predefinita dell'immagine per qualsiasi video di YouTube https://i.ytimg.com/vi_webp/Oxv6IRcuNaI/maxresdefault.webp

Apri quell'url, fai clic con il tasto destro sull'immagine e seleziona 'Salva immagine con nome'. Dopo aver scaricato l'immagine ridimensionala in base alle tue esigenze.

Passaggio 2: crea il segnaposto

Il passaggio successivo è creare il segnaposto. Utilizzerò un div con posizione relativa (relative), inserirò un'immagine con object-fit:cover e un i-frame vuoto che popoleremo in seguito.

<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>

Fin qui tutto bene, ora aggiungiamo un po' di stile. Il padding nel segnaposto di YouTube è un piccolo trucco per garantire che il video si ridimensioni su tutti i dispositivi. L'immagine è posizionata in modo assoluto in alto e ha una proprietà object-fit:absolute. Questo simula un'immagine di sfondo ma consente il caricamento lento (lazy loading) e le immagini responsive. Infine l'iframe stesso ha una posizione assoluta (absolute) e copre l'intero segnaposto una volta visibile.

#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;
}

Ed ecco la magia: cambiamo l'immagine segnaposto con un video reale. Aggiungo un event listener al segnaposto di YouTube. Quando un visitatore passa il mouse sull'immagine, l'i-frame di YouTube si carica e diventa visibile grazie alla modifica dell'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);

Mostra sempre il video di YouTube

Andiamo oltre e mettiamo in coda il video di YouTube affinché sostituisca sempre l'immagine segnaposto, anche senza alcuna interazione. Non voglio farlo subito, aspettiamo che il browser sia inattivo. Userò un time-out per semplicità ma anche il metodo requestIdleCallback() sarebbe un'ottima scelta

<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>

Ecco fatto ragazzi, un punteggio perfetto di PageSpeed con un video di YouTube incorporato in pochissime righe di codice.

Estendi questa tecnica.

Naturalmente questo è solo un semplice esempio che funziona per un singolo video di YouTube con un id specifico. Sul tuo sito sarebbe una buona idea attaccare l'event listener a un querySelector e usare anche l'interaction-observer per caricare automaticamente i video di YouTube prima che entrino nella visualizzazione. In qualsiasi modo tu voglia estenderlo: l'idea rimane la stessa!