Rendimiento de videos

En el módulo anterior, aprendiste algunas técnicas de rendimiento relacionadas con lo siguiente: imágenes, un tipo de recurso muy usado en la Web que puede consumir un ancho de banda considerable si no se tiene cuidado para optimizarlas y tomar viewport en la consideración.

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 a menudo en páginas web. Antes de analizar algunas de posibles optimizaciones, es importante comprender primero cómo funciona <video> funciona.

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 tiene uno o más transmisiones. En la mayoría de los casos, se trata de la reproducción de audio y video.

Puedes comprimir cada transmisión mediante un códec. Por ejemplo, un video.webm podría ser un contenedor de WebM que contiene una transmisión de video por Internet comprimida con VP9 y un archivo de transmisión comprimida con Vorbis.

Entender la diferencia entre contenedores y códecs es útil porque ayuda a comprimir archivos multimedia con un ancho de banda mucho menor lo que reduce los tiempos de carga generales de la página y, posiblemente, mejora el el Procesamiento de imagen con contenido más grande (LCP) de la 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 consiste en usar FFmpeg:

ffmpeg -i input.mov output.webm

El comando anterior, aunque es tan básico como el uso de FFmpeg, toma la input.mov y genera un archivo output.webm con el FFmpeg predeterminado opciones de estado. El comando anterior genera un archivo de video más pequeño que funciona en todos navegadores modernos. Ajustar el video o las opciones de audio que ofrece FFmpeg podría reducir aún más el tamaño del archivo. Por ejemplo, si estás Con un elemento <video> para reemplazar un GIF, debes quitar la pista de audio:

ffmpeg -i input.mov -an output.webm

Si quieres hacer algunos ajustes adicionales, FFmpeg ofrece la marca -crf cuando comprimir 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, 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 de el códec que estás usando. Para obtener más información, lee sobre el factor de frecuencia constante de codificación de videos en H.264 y calidad constante al codificar videos en VP9

Varios formatos

Cuando se trabaja con archivos de video, la especificación de varios formatos funciona como 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>

Debido a que todos los navegadores modernos admiten el códec H.264, se puede utilizar MP4 como como resguardo para 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 de VP9 anterior, que es es más compatible que AV1, pero, por lo general, no comprime tan bien como AV1.

El atributo poster

La imagen de póster de un video se agrega mediante el atributo poster en la <video>. , que les sugiere a los usuarios cuál puede ser el contenido del video antes de que se reproduzca iniciada:

<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 atributo autoplay. autoplay se usa cuando debe reproducirse un video. inmediatamente, por ejemplo, cuando se usa como fondo de video o como reemplazo de GIF animados.

Los GIF animados pueden ser muy grandes, especialmente si tienen muchos fotogramas con los detalles intrincados. Es común que los GIF animados consuman varios megabytes de datos, lo que puede implicar una reducción significativa en el ancho de banda que se gasta para obtener recursos más importantes. En general, debe 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 utilizar la 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 hacer lo siguiente: Configura tu página para que solo descargue videos cuando estén en el viewport. La imagen poster podría ser un marcador de posición de imagen de baja calidad, como el primer fotograma. Cuando el video aparece en el viewport, se inicia el navegador. descargar el video. Esto podría mejorar los tiempos de carga del contenido en el viewport inicial. La desventaja es que, cuando se usa una imagen poster para autoplay, ocurre lo siguiente: sus usuarios reciben una imagen que se muestra solo brevemente hasta que el video haya cargado y empieza a reproducirse.

Reproducción iniciada por el usuario

Por lo general, el navegador comienza a descargar un archivo de video en cuanto el código HTML el analizador descubre el elemento <video>. Si tienes elementos <video> en los que el valor 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 usando el <video>. atributo preload del elemento:

• Si estableces preload="none", se informará al navegador que el contenido del video no está incluido debe estar precargado.
• Si estableces preload="metadata", solo se recuperarán los metadatos del video, como los y posiblemente otra información breve.

Es probable que la configuración de preload="none" sea la opción más conveniente si cargas Videos para los que los usuarios deben iniciar la reproducción

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

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

Incorporaciones

Dada la complejidad de optimizar y entregar contenido de video eficazmente tiene sentido derivar el problema a servicios de video dedicados, como como YouTube o Vimeo. Estos servicios optimizan la publicación de videos para ti, pero insertar un video desde un servicio externo puede tener su propio tipo de efecto en rendimiento, ya que los reproductores de video incorporados pueden entregar recursos, como JavaScript.

Debido a esta realidad, las incorporaciones en videos de terceros pueden afectar significativamente rendimiento. Según HTTP Archive, las incorporaciones de YouTube bloquean el subproceso principal. durante más de 1.7 segundos para el sitio web medio. Si bloqueas el subproceso principal largos períodos es un problema grave de experiencia del usuario que puede afectar Interaction to Next Paint (INP) de la página. Sin embargo, puedes llegar a un acuerdo si no carga la incorporación inmediatamente durante la carga inicial de la página y, en su lugar, crea un marcador de posición para la incorporación que se reemplazará por la incorporación del video en sí. cuando el usuario interactúa con él.

Demostraciones de video

Ponga a prueba sus conocimientos

A continuación: Optimiza las fuentes web

A continuación de nuestra cobertura de la optimización de tipos de recursos específicos son las fuentes. Optimizar las fuentes de tu sitio web es algo que suele pasarse por alto, pero tienen un impacto significativo en la velocidad de carga general de tu sitio web y en las métricas, como LCP y Cambio de diseño acumulado (CLS).