Core Web Vitals perfectos en YouTube

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

YouTube permite insertar un vídeo en la página de forma muy sencilla. Primero ve a la página del vídeo y haz clic en Compartir, debajo del vídeo

Después selecciona Insertar y copia el código de inserción:

Copia el código y pégalo en el HTML del sitio. Al pasar una auditoría con Lighthouse, verás que métricas clave como First Contentful Paint, Speed Index, Largest Contentful Paint y Total Blocking Time aumentan entre 1 y 1,5 segundos. Un embed estándar de YouTube carga entre 1,3 y 2,6 MB de JavaScript, CSS, fuentes y scripts de seguimiento. Hace más de 20 peticiones HTTP a entre 8 y 10 dominios distintos. Todo esto ocurre antes de que el visitante pulse reproducir. Vamos a solucionarlo:

Embed predeterminado de YouTube

Embed inteligente de YouTube

¡Corrige los Core Web Vitals de YouTube!

Vamos a corregir los Core Web Vitals creando un placeholder para la imagen. Durante la carga de la página se cargará el placeholder. Solo cuando realmente hace falta el vídeo de YouTube sustituimos el placeholder por el vídeo real. Esto se conoce como el patrón facade: mostrar primero un sustituto ligero y cargar el recurso pesado de terceros solo con la interacción. La misma técnica sirve para Google Maps y widgets de chat.

Paso 1: Descarga la imagen del placeholder

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

Como verás, hay una variable en la URL: 'Oxv6IRcuNaI'. Copia esa variable y pégala en la ruta de imagen predeterminada de 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». Cuando la hayas descargado, ajusta el tamaño según tus necesidades.

Paso 2: Crea el placeholder

El siguiente paso es crear el placeholder. Voy a usar un div con posición relativa, colocar una imagen con object-fit:cover y un iframe vacío que rellenaremos después. Por privacidad, puedes usar youtube-nocookie.com en lugar de youtube.com en la URL del embed. Esto evita que YouTube instale cookies de seguimiento hasta que el vídeo se reproduzca realmente.

<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 los estilos. El padding en el placeholder de YouTube es un pequeño truco para asegurar que el vídeo escale en todos los dispositivos. La imagen tiene posición absoluta arriba y lleva la propiedad object-fit:cover. Esto imita una imagen de fondo, pero permite lazy loading e imágenes adaptables. Por último, el propio iframe tiene posición absoluta y cubre todo el placeholder en cuanto se hace 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 placeholder por el vídeo real. Añado un event listener al placeholder de YouTube. En cuanto el visitante pasa el cursor sobre la imagen, el iframe de YouTube se carga y se hace visible gracias 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

Demos un paso más y programemos el vídeo de YouTube para que sustituya siempre la imagen del placeholder, incluso sin interacción. No quiero hacerlo de inmediato; esperemos a que el navegador esté inactivo. Por simplicidad usaré un setTimeout, aunque el método requestIdleCallback() también sería una gran opción. Ten en cuenta que Safari aún no admite requestIdleCallback 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>

Y listo: una puntuación perfecta de PageSpeed con un vídeo de YouTube insertado 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 inserta 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 la sustituye por 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 con srcdoc no carga ningún recurso externo hasta que el visitante interactúa. El inconveniente es que en algunos navegadores móviles requiere dos toques (uno para activar el enlace de srcdoc y otro para reproducir el vídeo).

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 único custom element. Es aproximadamente 224 veces más rápido que el embed predeterminado de YouTube y es la solución recomendada por web.dev.

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

Gestiona de serie la miniatura, el botón de reproducción, el diseño responsive y la accesibilidad. Usa youtube-nocookie.com por defecto.

Cómo ampliar esta técnica

Por supuesto, este es un ejemplo simple que solo funciona con un único vídeo de YouTube con un ID específico. En tu sitio convendría asociar el event listener a un querySelector y añadir también un IntersectionObserver para cargar automáticamente los vídeos de YouTube antes de que entren en el viewport. Da igual cómo lo amplíes: ¡la idea es la misma!

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