Core Web Vitals de YouTube Perfectos

Cómo incrustar un video de YouTube (la forma lenta)

YouTube ha hecho que sea bastante simple incrustar un video en tu página. Primero navega a la página del video y haz clic en compartir debajo del video

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

Copia el código y pégalo en el HTML de tu sitio. Cuando luego ejecutes una auditoría de Lighthouse notarás que todas las métricas importantes como First Contentful Paint, Speed Index, Largest Contentful Paint y el Total Blocking Time han aumentado en aproximadamente 1 a 1.5 segundos. Una inserción estándar de YouTube carga entre 1.3 y 2.6 MB de JavaScript, CSS, fuentes y scripts de seguimiento. Realiza más de 20 solicitudes HTTP a entre 8 y 10 dominios diferentes. Todo eso sucede antes de que el visitante siquiera presione reproducir. Vamos a arreglar esto:

Inserción predeterminada de YouTube

Inserción inteligente de YouTube

¡Arregla las Core Web Vitals de YouTube!

Vamos a arreglar las 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 video de YouTube cambiaremos el marcador de posición por el video real. Esto se llama el patrón facade: mostrar un sustituto ligero primero y cargar el recurso pesado de terceros solo en la interacción. La misma técnica funciona para Google Maps y widgets de chat.

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

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

Como podrás notar hay una variable en la url: 'Oxv6IRcuNaI'. Copia esa variable y pégala en la ubicación de imagen predeterminada para cualquier video 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, redimensiónala según tus necesidades.

Paso 2: Crear el marcador de posición

El siguiente paso es crear el marcador de posición. Voy a usar un div con posición relativa, colocar una imagen con object-fit:cover y un iframe vacío que poblaremos más adelante. Por privacidad, puedes usar youtube-nocookie.com en lugar de youtube.com en la URL de inserción. Esto evita que YouTube establezca cookies de seguimiento hasta que el video realmente se reproduzca.

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

Hasta aquí todo bien, ahora vamos a añadir algo de estilo. El padding en el marcador de posición de YouTube es un pequeño truco para asegurar que el video se escale en todos los dispositivos. La imagen se coloca de forma absoluta en la parte superior y tiene una propiedad object-fit:cover. Esto imita una imagen de fondo pero permite la carga diferida (lazy loading) 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.

Ahora la magia: cambiemos la imagen del marcador de posición por un video real. Añado un event listener 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 video de YouTube

Vamos un paso más allá y pongamos en cola el video de YouTube para que siempre reemplace la imagen del marcador de posición incluso sin ninguna interacción. No quiero hacer eso de inmediato, esperemos hasta que el navegador esté inactivo. Usaré un setTimeout por simplicidad pero el método requestIdleCallback() también sería una gran elección. Ten en cuenta que requestIdleCallback aún no es compatible en Safari por defecto. 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>

Ahí lo tienen chicos, una puntuación perfecta de velocidad de página con un video de YouTube incrustado en solo unas pocas líneas de código.

Alternativa: la técnica srcdoc

Si quieres evitar JavaScript por completo, puedes usar el atributo srcdoc en el iframe. Esto incrusta una mini página HTML (solo la miniatura y un botón de reproducción) directamente en la etiqueta iframe. Cuando el visitante hace clic en reproducir, el navegador lo reemplaza con el reproductor real de 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>

El enfoque srcdoc no carga recursos externos hasta que el visitante interactúa. La desventaja es que en algunos navegadores móviles requiere dos toques (uno para activar el enlace srcdoc, otro para reproducir el video).

Listo para producción: lite-youtube-embed

Si prefieres una solución lista para usar, el web component lite-youtube-embed de Paul Irish hace todo esto en un solo elemento personalizado. Es aproximadamente 224 veces más rápido que la inserción predeterminada de YouTube y es la solución recomendada por web.dev.

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

Maneja la miniatura, el botón de reproducción, el tamaño responsivo y la accesibilidad de forma predeterminada. Usa youtube-nocookie.com por defecto.

Extiende esta técnica

Por supuesto, este es solo un ejemplo simple que solo funciona para un único video de YouTube con un id específico. En tu sitio, sería una buena idea adjuntar el event listener a un querySelector y también adjuntar un IntersectionObserver para cargar automáticamente los videos de YouTube antes de que se desplacen a la vista. Como sea que quieras extenderlo: ¡la idea sigue siendo la misma!

En los sitios monitoreados por CoreDash, las páginas que usan un patrón facade de YouTube tienen un LCP promedio que es 800ms más rápido que las páginas que cargan la inserción directamente. Si has implementado el patrón facade, usa Real User Monitoring para verificar la mejora con datos reales de los visitantes.