Los embeds de YouTube son demasiado pesados, y se puede arreglar

• Los embeds de YouTube pesan alrededor de 1.3 MB y no comparten recursos entre múltiples embeds
• Al usar el componente web <lite-youtube> se reduce a unos 100 kB, se comparten recursos y no se sacrifican funciones

Embed de videos de YouTube

• Se pueden incrustar videos de YouTube en un sitio web
• En el menú Share de YouTube, al elegir la opción < > Embed, se proporciona código HTML que incluye un <iframe>
• Un <iframe> no es bueno para el rendimiento, pero sí es adecuado para contenido protegido de terceros

Sugerencias para mejorar el rendimiento

• Agregar el atributo loading="lazy" para evitar que el video se cargue de inmediato cuando no está visible
• Agregar estilos inline para mantener la proporción original del video y hacerlo fluido

Problemas del embed actual de YouTube

• En una página con un solo embed de YouTube se generan 32 solicitudes, 1.3 MB de transferencia de datos y 2.76 segundos de carga
• Como no se comparten recursos entre múltiples embeds, la transferencia de datos aumenta linealmente a medida que crece la cantidad de embeds

Apariencia y funciones

• El embed de YouTube ofrece la imagen "poster" del video, el título del video y un gran botón de reproducción
• Estas funciones pueden implementarse sin consumir tantos recursos

¿Por qué se hace así?

• Se ha reportado que se probaron embeds ligeros, pero que el nivel de interacción bajó
• Sin embargo, ese resultado va contra la intuición y necesita una revisión más profunda
• Consumir tantos recursos también es problemático desde el punto de vista ambiental

Solución: replicar la experiencia del embed de otra manera

• Existe el componente web lite-youtube-embed, creado por Paul Irish de Google
• Este componente se enfoca en el rendimiento visual y renderiza aproximadamente 224 veces más rápido
• Ofrece las mismas funciones que el embed predeterminado, pero mejora la velocidad, la eficiencia y la privacidad por defecto

Cómo usar Lite YouTube Embed

1. Conectar el JavaScript que inicializa el componente web
2. Usarlo

• Se puede instalar desde npm o copiarlo al proyecto para usarlo
• También se puede usar enlazándolo desde un CDN

Alternativas

• Versión con Shadow DOM (protege estilos, pero dificulta aplicar estilos)
• Implementación propia
  • Raymond Camden: crear un componente web para YouTube Embed (versiones vanilla y WebC)
  • Adrian Roselli: componentes web para YouTube y Vimeo
• Mux: <youtube-video> (alineado con la DOM API)
• Port para React y versión oficial para Next.js

Resumen de GN⁺

• Los embeds de YouTube consumen muchos recursos y afectan negativamente el rendimiento
• Usar componentes web como lite-youtube-embed puede mejorar mucho el rendimiento
• También puede tener un impacto positivo desde el punto de vista ambiental
• Vale la pena considerar otros componentes web que ofrecen funciones similares

[xguru]

lite-youtube-embed - una incrustación de YouTube más rápida

[GN⁺]

Opiniones en Hacker News

• En una plataforma de foros comunitarios, detectan los embeds de YouTube y los reemplazan por miniaturas proxy que no cargan hasta que se hace clic

  • Que una persona comparta un video de YouTube no significa que todos los usuarios deban descargar más de 1 MB de JavaScript de YouTube ni que Google rastree sus IP

• El autor no cree que una versión ligera reduzca la interacción

  • En cambio, yo sí lo creo por completo
  • En la demo de la página del proyecto recomendado, lite-youtube-embed, la versión ligera tarda más en reproducir el video
  • A medida que el tiempo de carga aumenta en milisegundos, la interacción disminuye

• No sorprende que a los usuarios les resulte distinto otro reproductor

  • lite-youtube-embed no permite hacer clic hacia la página real de YouTube
  • Esto puede parecer un intento de impedir que se vaya a la fuente real del contenido
  • Casi nunca reproduzco videos embebidos, pero cuando lo hago prefiero la experiencia normal de YouTube
  • Si parece haber una capa adicional, es menos probable que haga clic

• Este es un ejemplo de la creencia equivocada de que los desarrolladores no pueden saber exactamente cómo usan los usuarios el software

  • Quieren reducir el uso de video y de Google, y recortar megabytes de JavaScript
  • Para una mejor web, deberíamos dejar de embeber videos de YouTube

• Habría que evitar que los blogueros usen embeds de GitHub Gist

  • Los generadores de sitios estáticos como Hugo admiten fragmentos de código con resaltado de sintaxis
  • Los sitios dinámicos pueden usar highlight.js

• Una forma de reducir el peso total de los embeds y mejorar la UX es bloquear los anuncios

  • Se pueden usar Content Security Policies para bloquear anuncios en la página

• Como solución del lado del usuario para quienes usan uBlock, se puede usar click 2 load

  • Puede que no funcione porque Chrome está migrando a Manifest V3

• Hay resultados de pruebas que muestran que los embeds ligeros reducen la interacción

  • Los tiempos de carga más rápidos deberían mejorar la interacción, pero si esta disminuyó con un embed ligero, es posible que se haya sacrificado funcionalidad

• Un video embebido podría ser un elemento <video> que apunte a archivos en los servidores de YouTube

  • Los intereses comerciales se interpusieron

• A medida que aumenta la cantidad de embeds, el peso crece de forma lineal

  • La política del mismo origen debería permitir usar recursos almacenados en caché

• Comparto mi solución como alternativa a lite youtube embed

  • Ofrece una mejor solución de compromiso en términos de personalización total