Core Web Vitals perfetti per YouTube

Come incorporare un video di YouTube (il modo lento)

YouTube ha reso piuttosto semplice incorporare un video nella tua pagina. Per prima cosa vai alla pagina del video e clicca su condividi sotto il video

Quindi seleziona incorpora e copia il codice di incorporamento:

Copia il codice e incollalo nell'HTML del tuo sito. Quando poi esegui un audit su Lighthouse noterai che tutte le metriche importanti come il First Contentful Paint, lo Speed Index, il Largest Contentful Paint e il Total Blocking Time sono aumentate di circa 1 o 1,5 secondi. Un incorporamento standard di YouTube carica tra 1,3 e 2,6 MB di JavaScript, CSS, font e script di tracciamento. Effettua oltre 20 richieste HTTP verso 8-10 domini diversi. Tutto questo avviene prima ancora che il visitatore prema play. Risolviamo il problema:

Incorporamento predefinito di YouTube

Incorporamento intelligente di YouTube

Correggi i Core Web Vitals di YouTube!

Correggeremo i Core Web Vitals creando un segnaposto per l'immagine. Durante il caricamento della pagina verrà caricato il segnaposto. Solo quando avremo effettivamente bisogno del video di YouTube cambieremo il segnaposto con il video reale. Questo è chiamato pattern facade: mostra prima un sostituto leggero, carica la risorsa pesante di terze parti solo all'interazione. La stessa tecnica funziona per Google Maps e i widget di chat.

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 nel percorso dell'immagine predefinita 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 consiste nel creare il segnaposto. Userò un div posizionato in modo relativo, inserirò un'immagine con object-fit:cover e un iframe vuoto che popoleremo in seguito. Per la privacy, puoi utilizzare youtube-nocookie.com al posto di youtube.com nell'URL di incorporamento. Questo impedisce a YouTube di impostare cookie di tracciamento finché il video non viene effettivamente riprodotto.

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

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:cover. Questo imita un'immagine di sfondo ma consente il lazy loading e le immagini responsive. Infine l'iframe stesso ha una posizione assoluta 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;
}

Ora arriva la magia: cambiamo l'immagine segnaposto con un video reale. Aggiungo un event listener al segnaposto di YouTube. Una volta che un visitatore passa il mouse sull'immagine, l'iframe di YouTube viene caricato e diventa visibile a causa della 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 accodiamo il video di YouTube per sostituire sempre l'immagine segnaposto anche senza alcuna interazione. Non voglio farlo subito, aspettiamo finché il browser non è inattivo. Userò un setTimeout per semplicità ma anche il metodo requestIdleCallback() sarebbe un'ottima scelta. Nota che requestIdleCallback non è ancora supportato di default in Safari. Usa 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>

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

Alternativa: la tecnica srcdoc

Se vuoi evitare completamente JavaScript, puoi usare l'attributo srcdoc sull'iframe. Questo incorpora una mini pagina HTML (solo la miniatura e un pulsante play) direttamente nel tag iframe. Quando il visitatore preme play, il browser lo sostituisce con il player effettivo di 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'approccio srcdoc non carica nessuna risorsa esterna finché il visitatore non interagisce. Il compromesso è che su alcuni browser mobile richiede due tocchi (uno per attivare il link srcdoc, uno per riprodurre il video).

Pronto per la produzione: lite-youtube-embed

Se preferisci una soluzione pronta all'uso, il web component lite-youtube-embed di Paul Irish fa tutto questo in un singolo custom element. È circa 224 volte più veloce dell'incorporamento predefinito di YouTube ed è la soluzione raccomandata da web.dev.

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

Gestisce la miniatura, il pulsante play, il dimensionamento responsivo e l'accessibilità fin dal primo utilizzo. Usa youtube-nocookie.com di default.

Estendi questa tecnica

Ovviamente questo è solo un semplice esempio che funziona solo per un singolo video di YouTube con un id specifico. Sul tuo sito sarebbe una buona idea collegare l'event listener a un querySelector e collegare anche un IntersectionObserver per caricare automaticamente i video di YouTube prima che scorrano nella vista. Comunque tu voglia estenderlo: l'idea rimane la stessa!

Sui siti monitorati da CoreDash, le pagine che usano un pattern facade per YouTube hanno un LCP medio che è 800 ms più veloce delle pagine che caricano l'incorporamento direttamente. Se hai implementato il pattern facade, usa Real User Monitoring per verificare il miglioramento con i dati reali dei visitatori.