Rendimiento de videos

En el módulo anterior, aprendiste algunas técnicas de rendimiento relacionadas con las imágenes, que son un tipo de recurso muy utilizado en la Web y que puede consumir un ancho de banda significativo si no se toman medidas para optimizarlas y tener en cuenta la ventana gráfica del usuario.

Sin embargo, las imágenes no son el único tipo de contenido multimedia que se ve comúnmente en la Web. Los videos son otro tipo de contenido multimedia popular que se usa con frecuencia en las páginas web. Antes de analizar algunas de las posibles optimizaciones, es importante comprender primero cómo funciona el <video> elemento.

Archivos fuente de video

Cuando trabajas con archivos multimedia, el archivo que reconoces en tu sistema operativo (.mp4, .webm y otros) se denomina contenedor. Un contenedor tiene uno o más flujos. En la mayoría de los casos, serían el flujo de video y el de audio.

Puedes comprimir cada flujo con un códec. Por ejemplo, un video.webm podría ser un WebM que contiene un flujo de video comprimido con VP9 y un flujo de audio comprimido con Vorbis.

Comprender la diferencia entre contenedores y códecs es útil, ya que te ayuda a comprimir tus archivos multimedia con un ancho de banda significativamente menor, lo que genera tiempos de carga de página generales más bajos, además de mejorar potencialmente el Largest Contentful Paint (LCP) de una página, que es una métrica centrada en el usuario y una de las tres Métricas web esenciales.

Una forma de comprimir archivos de video es usar FFmpeg:

ffmpeg -i input.mov output.webm

El comando anterior, aunque es lo más básico que se puede obtener cuando se usa FFmpeg, toma el archivo input.mov y genera un archivo output.webm con las opciones predeterminadas de FFmpeg. El comando anterior genera un archivo de video más pequeño que funciona en todos los navegadores modernos. Ajustar las opciones de video o audio que ofrece FFmpeg podría ayudarte a reducir aún más el tamaño del archivo de video. Por ejemplo, si estás usando un <video> elemento para reemplazar un GIF, debes quitar la pista de audio:

ffmpeg -i input.mov -an output.webm

Si deseas ajustar las cosas un poco más, FFmpeg ofrece la marca -crf cuando comprimes videos sin usar la codificación de tasa de bits variable. -crf significa Constant Rate Factor. Es un parámetro de configuración que ajusta el nivel de compresión y lo hace aceptando un número entero dentro de un rango determinado.

Los códecs como H.264 y VP9 admiten la marca -crf, pero su uso depende del códec que uses. Para obtener más información, consulta el factor de tasa constante para codificar videos en H.264, así como la calidad constante cuando se codifican videos en VP9.

Varios formatos

Cuando trabajas con archivos de video, especificar varios formatos funciona como un resguardo para los navegadores que no admiten todos los formatos modernos.

<video>
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
</video>

Dado que todos los navegadores modernos admiten el códec H.264, se puede usar MP4 como resguardo para los navegadores heredados. La versión WebM puede usar el códec AV1 más reciente, que aún no es tan compatible, o el códec VP9 anterior, que es más compatible que AV1, pero que, por lo general, no comprime tan bien como AV1.

El atributo poster

La imagen de póster de un video se agrega con el posteratributo en el <video> elemento, que les indica a los usuarios cuál podría ser el contenido del video antes de que se inicie la reproducción:

<video poster="poster.jpg">
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
</video>

Reproducción automática

Según HTTP Archive, el 20% de los videos en la Web incluyen el autoplay atributo. autoplay se usa cuando un video debe reproducirse de inmediato, por ejemplo, cuando se usa como fondo de video o como reemplazo de GIFs animados.

Los GIFs animados pueden ser muy grandes, en especial si tienen muchos fotogramas con detalles complejos. No es raro que los GIFs animados consuman varios megabytes de datos, lo que puede ser un drenaje significativo en el ancho de banda que se usa mejor para recursos más importantes. Por lo general, debes evitar los formatos de imagen animada, ya que los equivalentes de <video> son mucho más eficientes para este tipo de contenido multimedia.

Si la reproducción automática de video es un requisito para tu sitio web, puedes usar el autoplay atributo directamente en el <video> elemento:

<!-- This will automatically play a video, but
     it will loop continuously and be muted: -->
<video autoplay muted loop playsinline>
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
</video>

Si combinas el atributo poster con la API de Intersection Observer, puedes configurar tu página para que solo descargue videos una vez que estén dentro de la ventana gráfica. La imagen poster podría ser un marcador de posición de imagen de baja calidad, como el primer fotograma del video. Una vez que el video aparece en la ventana gráfica, el navegador comienza a descargarlo. Esto podría mejorar los tiempos de carga del contenido dentro de la ventana gráfica inicial. Por otro lado, cuando usas una imagen poster para autoplay, tus usuarios reciben una imagen que se muestra solo brevemente hasta que el video se carga y comienza a reproducirse.

Reproducción iniciada por el usuario

Por lo general, el navegador comienza a descargar un archivo de video en cuanto el analizador de HTML descubre el elemento <video>. Si tienes <video> elementos donde el usuario inicia la reproducción, es probable que no quieras que el video comience a descargarse hasta que el usuario haya interactuado con él.

Puedes afectar lo que se descarga para los recursos de video con el <video> atributo preload del elemento:

• Si configuras preload="none", se le informa al navegador que no se debe precargar ninguno de los contenidos del video.
• Si configuras preload="metadata", solo se recuperan los metadatos del video, como la duración del video y, posiblemente, otra información superficial.

Es probable que la configuración preload="none" sea el caso más deseable si cargas videos para los que los usuarios deben iniciar la reproducción.

En este caso, puedes mejorar la experiencia del usuario agregando una imagen poster. Esto le da al usuario un contexto sobre el video. Además, si la imagen de póster es tu elemento LCP, puedes aumentar la prioridad de la imagen poster con la sugerencia <link rel="preload"> junto con fetchpriority="high":

<link rel="preload" as="image" href="poster.jpg" fetchpriority="high">

Carga diferida

Una incorporación relativamente nueva al rendimiento de video es el atributo loading=lazy. Al igual que la carga diferida de imágenes a nivel del navegador y lo mismo para los iframes, este atributo aporta lo mismo a los videos para sus descargas poster y preload.

Si usas un atributo poster junto con preload="none" o preload="metadata" ya puedes evitar la descarga del video de forma predeterminada. El atributo loading=lazy difiere incluso la descarga de la imagen de póster y los metadatos hasta que el video esté en la ventana gráfica o se acerque a ella.

Incorporaciones

Dada toda la complejidad de optimizar y publicar contenido de video de manera eficiente, tiene sentido querer descargar el problema a servicios de video dedicados, como YouTube o Vimeo. Estos servicios optimizan la entrega de videos por ti, pero incorporar un video de un servicio de terceros puede tener su propio efecto en el rendimiento, ya que los reproductores de video incorporados a menudo pueden publicar muchos recursos adicionales, como JavaScript.

Dada esta realidad, las incorporaciones de video de terceros pueden afectar significativamente el rendimiento de la página. Según HTTP Archive, las incorporaciones de YouTube bloquean el subproceso principal durante más de 1.7 segundos para el sitio web promedio. Bloquear el subproceso principal durante períodos prolongados es un problema grave de experiencia del usuario que puede afectar la Interaction to Next Paint (INP) de una página. Sin embargo, puedes llegar a un acuerdo no cargando la incorporación de inmediato durante la carga inicial de la página y, en su lugar, crear un marcador de posición para la incorporación que se reemplaza por la incorporación de video real cuando el usuario interactúa con ella.

Videos de demostración

Pon a prueba tus conocimientos

Próximo paso: Optimiza las fuentes web

A continuación, en nuestra cobertura de optimización de tipos de recursos específicos, se encuentran las fuentes. La optimización de las fuentes de tu sitio web es algo que a menudo se pasa por alto, pero puede tener un impacto significativo en la velocidad de carga general de tu sitio web y en métricas como LCP y Cumulative Layout Shift (CLS).