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 tiene cuidado de optimizarlas y tener en cuenta la ventana gráfica del usuario.
Sin embargo, las imágenes no son el único tipo de medio que se ve comúnmente en la Web. Los videos son otro tipo de contenido multimedia popular que se suele usar en las páginas web. Antes de analizar algunas de las posibles optimizaciones, es importante comprender primero cómo funciona el elemento <video>.
Archivos de origen de video
Cuando trabajas con archivos multimedia, el archivo que reconoces en tu sistema operativo (.mp4, .webm y otros) se denomina contenedor. Un contenedor contiene uno o más flujos. En la mayoría de los casos, se trataría de la transmisión de audio y video.
Puedes comprimir cada transmisión con un códec. Por ejemplo, un video.webm podría ser un contenedor WebM que contenga una transmisión de video comprimida con VP9 y una transmisión de audio comprimida con Vorbis.
Comprender la diferencia entre contenedores y códecs es útil, ya que te ayuda a comprimir tus archivos multimedia con mucho menos ancho de banda, lo que genera tiempos de carga de la página generales más bajos y, además, puede mejorar 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 usar con 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 un video. Por ejemplo, si usas un elemento <video> para reemplazar un GIF, debes quitar la pista de audio:
ffmpeg -i input.mov -an output.webm
Si quieres ajustar aún más la configuración, FFmpeg ofrece la marca -crf cuando se comprimen videos sin usar la codificación de tasa de bits variable. -crf significa factor de velocidad constante. Este 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 utilices. Para obtener más información, consulta sobre el factor de velocidad constante para codificar videos en H.264 y la calidad constante cuando se codifican videos en VP9.
Varios formatos
Cuando trabajas con archivos de video, especificar varios formatos funciona como alternativa 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 alternativa para los navegadores heredados. La versión de 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 atributo poster en el elemento <video>, que les indica a los usuarios 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 el archivo HTTP, el 20% de los videos en la Web incluyen el atributo autoplay. 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 uso significativo del ancho de banda que se podría utilizar mejor para recursos más importantes. Por lo general, debes evitar los formatos de imágenes animadas, 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 atributo autoplay directamente en el elemento <video>:
<!-- 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 cuando estén dentro del viewport.
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 en el viewport inicial. Por otro lado, cuando se usa una imagen poster para autoplay, los usuarios reciben una imagen que se muestra solo brevemente hasta que se carga el video y comienza a reproducirse.
Reproducción iniciada por el usuario
En general, el navegador comienza a descargar un archivo de video en cuanto el analizador de HTML descubre el elemento <video>. Si tienes elementos <video> en los que el usuario inicia la reproducción, probablemente 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 atributo preload del elemento <video>:
- El parámetro de configuración
preload="none"informa al navegador que no se debe precargar ningún contenido del video. - El parámetro de configuración
preload="metadata"solo recupera los metadatos del video, como su duración y, posiblemente, otra información superficial.
Establecer preload="none" es probablemente 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 de poster.
Esto le brinda al usuario algo de contexto sobre el contenido del video. Además, si la imagen del 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">
Incorporaciones
Dada toda la complejidad que implica optimizar y publicar contenido de video de manera eficiente, es lógico querer delegar el problema a servicios de video dedicados, como YouTube o Vimeo. Estos servicios optimizan la entrega de videos para 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 videos de terceros pueden afectar significativamente el rendimiento de la página. Según HTTP Archive, las inserciones de YouTube bloquean el subproceso principal durante más de 1.7 segundos en el sitio web promedio. Bloquear el subproceso principal durante períodos prolongados es un problema grave de experiencia del usuario que puede afectar la métrica 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
Ponga a prueba sus conocimientos
El orden de los elementos <source> dentro de un elemento <video> principal no determina qué recurso de video se descarga en última instancia.
El atributo poster del elemento <video>
se considera candidato para LCP.
Próximo paso: Optimiza las fuentes web
A continuación, en nuestra cobertura de la optimización de tipos de recursos específicos, se encuentran las fuentes. Optimizar 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 el LCP y el Cumulative Layout Shift (CLS).