Core Web Vitals de YouTube perfectos

Cómo insertar un vídeo de YouTube (la forma lenta)

YouTube ha hecho que sea bastante sencillo insertar un vídeo en tu página. Primero navega a la página del vídeo y haz clic en compartir debajo del vídeo

A continuación, selecciona insertar y copia el código de inserción:

Copia el código y pégalo en el HTML de tu sitio. Cuando realices una auditoría de Lighthouse, notarás que todas las métricas importantes como First Contentful Paint, Speed index, Largest Contentful Paint y el Time to interactive han aumentado entre 1 y 1,5 segundos. Vamos a arreglar esto:

Inserción predeterminada de YouTube

Inserción inteligente de YouTube

¡Arregla los Core Web Vitals de YouTube!

Vamos a arreglar los Core Web Vitals creando un marcador de posición para la imagen. Durante la carga de la página, se cargará el marcador de posición. Solo cuando realmente necesitemos el vídeo de YouTube cambiaremos el marcador de posición por el vídeo real.

Paso 1: Descarga la imagen del marcador de posición

Descargar la imagen del marcador de posición es realmente fácil. Mira la URL del vídeo de YouTube. Para este ejemplo usaremos esta URL: https://www.youtube.com/watch?v=Oxv6IRcuNaI

Como habrás notado, hay una variable en la URL: 'Oxv6IRcuNaI'. Copia esa variable y pégala en la ubicación de imagen predeterminada para cualquier vídeo de YouTube https://i.ytimg.com/vi_webp/Oxv6IRcuNaI/maxresdefault.webp

Abre esa URL, haz clic derecho en la imagen y selecciona 'guardar imagen como'. Después de haber descargado la imagen, cámbiale el tamaño según tus necesidades.

Paso 2: crea el marcador de posición

El siguiente paso es crear el marcador de posición. Voy a usar un div posicionado de forma relativa, colocar una imagen con object-fit:cover y un iframe vacío que rellenaremos más tarde.

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

Hasta aquí todo bien, ahora añadamos algo de estilo. El padding en el marcador de posición de YouTube es un pequeño truco para asegurar que el vídeo se escale en todos los dispositivos. La imagen se coloca absoluta en la parte superior y tiene una propiedad object-fit:absolute. Esto imita una imagen de fondo pero permite la carga diferida e imágenes responsivas. Finalmente, el propio iframe tiene una posición absoluta y cubre todo el marcador de posición una vez que es 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;
}

Ahora viene la magia: cambiemos la imagen del marcador de posición por un vídeo real. Añado un detector de eventos al marcador de posición de YouTube. Una vez que un visitante pasa el ratón sobre la imagen, el iframe de YouTube se carga y se vuelve visible debido al cambio de opacidad.

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

Mostrar siempre el vídeo de YouTube

Vayamos un paso más allá y pongamos en cola el vídeo de YouTube para que siempre reemplace la imagen del marcador de posición, incluso sin interacción. No quiero hacer eso de inmediato, esperemos hasta que el navegador esté inactivo. Usaré un timeout por simplicidad, pero el método requestIdleCallback() también sería una excelente opción

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

Aquí lo tienen, amigos, una puntuación de velocidad de página perfecta con un vídeo de YouTube insertado en solo unas pocas líneas de código.

Amplía esta técnica.

Por supuesto, este es solo un ejemplo simple que solo funciona para un único vídeo de YouTube con un ID específico. En tu sitio sería una buena idea adjuntar el detector de eventos a un querySelector y también adjuntar el interaction-observer para cargar automáticamente los vídeos de YouTube antes de que aparezcan en pantalla. Independientemente de cómo quieras ampliarlo: ¡la idea sigue siendo la misma!