Optimización de Video para la Web: La Pieza que Falta en Lighthouse

Hola, soy Rahul, encantado de estar aquí. Soy uno de los cofundadores de ImageKit. Y cuando compramos este nombre de dominio ImageKit hace 10 años, pensamos que solo íbamos a trabajar con imágenes como producto, ¿verdad? Pero aquí estoy hablando sobre la optimización de video para la web porque ese es como el próximo gran formato de medios que casi todos están usando en sitios web. Y aunque siete minutos es un tiempo realmente corto para hablar sobre la optimización de video, intentaré dejarles algunos principios guía y tal vez algunos métodos en los que puedan optimizar videos para sus sitios web y aplicaciones, ¿verdad? Así que comencemos.

Lighthouse es genial. Si quieres probar el rendimiento de tu sitio web, es genial para imágenes, pero no es genial para videos, ¿verdad? Para imágenes, te da todo tipo de auditorías, como si está en el formato correcto, si está bien comprimido, si está redimensionado, si está con carga diferida. Pero para videos, lo mejor que obtendrás de Lighthouse es que estás cargando una gran cantidad de datos, ¿verdad?, lo cual es tan genérico como se puede. Así que realmente no funciona para la optimización de transmisión de video. Entonces, lo que me lleva al principio uno, si tienes que optimizar tus videos para tu sitio web, si tienes muchos videos cortos, y cuando digo videos cortos, estos son típicamente de menos de 15 segundos, entonces necesitas aplicar el mismo conjunto de auditorías que Lighthouse hace para imágenes a tus videos también. Pero sería el equivalente en video, ¿verdad? Así que cuando decimos que necesitas usar formatos modernos para videos, necesitas usar WebM o VP9 o códecs AV1.

Ahora, esto suena complejo, pero con algo como ImageKit, porque soy de ImageKit, en realidad es tan simple como cargar tus videos a través de ImageKit, ¿verdad? Así que el ejemplo que ves en la pantalla ahora mismo, tengo un archivo de video. ImageKit se encarga automáticamente de convertirlo al formato correcto y comprimirlo según el dispositivo del usuario final. Y puedes agregar este parámetro width 400 a la URL del video, y en tiempo real, redimensionarás el video a esa resolución, ¿verdad?

Ahora, esto funciona muy bien para videos cortos, pero aquí está el truco, ¿verdad? Así que, bueno, me perdí una diapositiva. Al hacer esto, podrías comprimir tus videos en cerca del 90, 95% para los videos más cortos, ¿verdad? Pero cuando se trata de videos más largos, porque los videos se transmiten y cargan durante un período de tiempo, necesitas optimizar para las condiciones cambiantes que cambiarían durante un período de tiempo, ¿verdad? Es, digamos, si estás cargando un episodio de 20 minutos en tu sitio web o en tu aplicación, el tiempo que lleva descargar y transmitir todo ese video, muchas cosas pueden cambiar, ¿verdad?

Entonces, ¿cuál es la primera cosa que puede cambiar? Esto es algo obvio para muchos usuarios, la red del usuario en sí puede cambiar. Habrás visto algo como YouTube adaptarse a la resolución de video que reproduce para ti. Baja a 360p si tu red es pobre, sube a 1080p si tu red es excelente. También necesitas optimizar tus videos para los cambios de red del usuario, ¿verdad? Y la forma de hacerlo, nuevamente, si usas algo como ImageKit, hay otras herramientas también que pueden hacer esto, pero usando ImageKit, solo necesitas añadir algo como ikmaster.m3u8, que es el manifiesto de transmisión HLS para la transmisión de tasa de bits adaptativa. Y luego también estoy agregando las diferentes variantes que quiero, 360, 480, 720 y 1080.

Solo necesito pasarlo a un reproductor de video y ese reproductor automáticamente podrá adaptar los videos a la red. Como ves en mi pantalla ahora mismo, el video comienza en 360p, a medida que la red mejora, sube a 1080p. Y cuando la red empeora, vuelve a 360 o 480p, ¿verdad? Ahora, la red no es lo único que cambiará mientras el usuario reproduce el video, ¿verdad? La otra cosa que cambia es que el usuario podría realmente cambiar el tamaño del reproductor también. Podrían ir a pantalla completa.