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
El orden de los elementos <source> dentro de un
el elemento superior <video> no determina
qué recurso de video se descarga finalmente.
El atributo poster del elemento <video>
se considera candidato para el LCP.
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).