En el módulo anterior, aprendiste algunas técnicas de rendimiento relacionadas con las imágenes, que son un tipo de recurso muy usado en la Web y que puede consumir un ancho de banda significativo si no se tienen cuidado para optimizarlas y tener en cuenta el viewport del usuario.
Sin embargo, las imágenes no son el único tipo de medio que se ve con frecuencia en la Web. Los videos son otro tipo de medio popular que se usa con frecuencia en las páginas web. Antes de analizar algunas de las optimizaciones posibles, es importante comprender primero cómo funciona el elemento <video>.
Archivos de 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 contiene una o más transmisiones. En la mayoría de los casos, correspondería a la reproducción de video y audio.
Puedes comprimir cada transmisión con un códec. Por ejemplo, un video.webm podría ser un contenedor de WebM que contiene una transmisión de video comprimida con VP9 y una transmisión de audio comprimida con Vorbis.
Comprender la diferencia entre los contenedores y los códecs es útil, ya que te ayuda a comprimir tus archivos multimedia con un ancho de banda significativamente menor, lo que reduce los tiempos de carga generales de la página y, en última instancia, mejora 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 implica usar FFmpeg:
ffmpeg -i input.mov output.webm
El comando anterior, aunque es tan básico como es 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 el video o las opciones de audio que ofrece FFmpeg puede ayudarte a reducir aún más el tamaño de archivo de un video. Por ejemplo, si utilizas un elemento <video> para reemplazar un GIF, debes quitar la pista de audio:
ffmpeg -i input.mov -an output.webm
Si deseas hacer ajustes un poco más, FFmpeg ofrece la marca -crf cuando se comprimen videos sin usar la codificación de tasa de bits variable. -crf significa factor de tasa constante. Este es un parámetro de configuración que ajusta el nivel de
compresión mediante la aceptación de 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, lee sobre el factor de frecuencia 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, la especificación de varios formatos funciona como resguardo en 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 navegadores heredados. La versión de WebM puede usar el códec AV1 más nuevo, que aún no es tan compatible, o el códec VP9 anterior, que es mejor compatible que AV1, pero generalmente no se 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 sugiere a los usuarios cuál puede 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 el archivo HTTP, el 20% de los videos en la Web incluye el atributo autoplay. autoplay se usa cuando un video se debe reproducir de inmediato, por ejemplo, cuando se usa como fondo de video o como reemplazo de GIF animados.
Los GIF animados pueden ser muy grandes, en especial si tienen muchos fotogramas con detalles complejos. No es inusual que los GIF animados consuman varios megabytes de datos, lo que puede consumir significativamente el ancho de banda para invertir mejor los recursos más importantes. En 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 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 una vez que 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 aparece el video en el viewport, el navegador comienza a descargarlo. Esto podría mejorar los tiempos de carga del contenido dentro del viewport inicial. La desventaja que genera cuando se usa una imagen poster para autoplay, los usuarios reciben una imagen que se muestra solo de forma breve hasta que se carga el video 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 elementos <video> con los que 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 modificar lo que se descarga para los recursos de video mediante el atributo preload del elemento <video>:
- Si estableces
preload="none", se informa al navegador que no se debe precargar ningún contenido del video. - La configuración de
preload="metadata"solo recupera los metadatos del video, como la duración y posiblemente otra información breve.
Es probable que la configuración de preload="none" sea el caso más conveniente si cargas videos para los que los usuarios necesitan iniciar la reproducción.
En este caso, puedes agregar una imagen de poster para mejorar la experiencia del usuario.
Esto le da al usuario algo de 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">
Incorporaciones
Dada toda la complejidad para optimizar y entregar contenido de video de manera eficiente, tiene sentido transferir el problema a servicios de video dedicados, como YouTube o Vimeo. Estos servicios optimizan la entrega de videos por ti, pero la incorporación de un video de un servicio de terceros puede tener su propio efecto en el rendimiento, ya que los reproductores de video incorporados suelen entregar muchos recursos adicionales, como JavaScript.
Dada esta realidad, las incorporaciones de video de terceros pueden tener un impacto significativo en el rendimiento de la página. Según el archivo HTTP, las incorporaciones de YouTube bloquean el subproceso principal durante más de 1.7 segundos para la mediana del sitio web. El bloqueo del subproceso principal durante períodos prolongados es un problema grave de la experiencia del usuario que puede afectar la Interacción con el siguiente procesamiento de imagen (INP) de una página. Sin embargo, puedes llegar a un punto aceptable si no cargas la incorporación inmediatamente durante la carga inicial de la página y, en su lugar, puedes crear un marcador de posición para la incorporación que se reemplace por la incorporación de video real cuando el usuario interactúa con ella.
Demostraciones de video
Pon a prueba tus conocimientos
El orden de los elementos <source> dentro de un elemento <video> superior no determina qué recurso de video se descarga finalmente.
El atributo poster del elemento <video> se considera un candidato de LCP.
A continuación: Optimiza las fuentes web
El siguiente punto de nuestra cobertura sobre la optimización de tipos de recursos específicos son las fuentes. Optimizar las fuentes de tu sitio web es algo que se suele pasar 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 Cambio de diseño acumulado (CLS).