Degradación Elegante: Estrategia WebM/MP4 para Core Web Vitals

Optimizar el peso de los assets multimedia es uno de los mayores desafíos para superar con nota las auditorías de rendimiento y mantener un SEO saludable. En la web moderna, no basta con comprimir un vídeo; hay que servir el formato correcto al dispositivo adecuado, manteniendo un plan de respaldo para ecosistemas restrictivos.

A esta estrategia se la conoce como Degradación Elegante (Graceful Degradation) o patrón Fallback.

El Conflicto: Google vs Apple

El desarrollo web a menudo se encuentra atrapado en el fuego cruzado entre los estándares abiertos y los ecosistemas cerrados:

El Formato WebM (.webm):
Naturaleza: Formato de código abierto impulsado fuertemente por Google (usualmente basado en los códecs VP8 o VP9).
Superpoder: Compresión brutal. Puede reducir el peso de un vídeo entre un 20% y un 40% respecto a MP4 manteniendo una calidad visual idéntica. Además, soporta canal alfa (transparencias).
Kryptonita: Apple se resistió durante años a darle soporte. Navegadores Safari antiguos y dispositivos iOS de generaciones previas simplemente arrojarán un error o una pantalla negra si intentas servirles este formato.
El Formato MP4 (.mp4):
Naturaleza: El estándar rey de la industria tradicional (basado en el códec H.264 o H.265).
Superpoder: Compatibilidad absoluta y universal. Funciona en el 100% de los navegadores, smartphones, smart TVs y consolas. El hardware de Apple está diseñado para acelerar y decodificar este formato de forma nativa e hipereficiente.
Kryptonita: El algoritmo es propietario y suele generar archivos notablemente más pesados que WebM para la misma calidad.

Implementación del Patrón Fallback en HTML5

Para resolver este conflicto sin romper la experiencia de ningún usuario ni penalizar la cuota de datos de los navegadores modernos, la etiqueta <video> de HTML5 nos permite inyectar múltiples fuentes en cascada.

El navegador leerá las etiquetas de arriba hacia abajo y descargará únicamente la primera que sea capaz de interpretar.

<video controls preload="none" poster="/assets/images/poster-video.webp">
    <!-- 1. La opción óptima (Menor peso, solo ecosistemas modernos) -->
    <source src="/assets/videos/demo.webm" type="video/webm">

    <!-- 2. La red de seguridad (Mayor peso, compatibilidad 100%) -->
    <source src="/assets/videos/demo.mp4" type="video/mp4">

    <!-- 3. Último recurso (Navegadores obsoletos o sin soporte de vídeo) -->
    <p>Tu navegador no soporta vídeo HTML5. <a href="/assets/videos/demo.mp4">Descargar MP4</a>.</p>
</video>

¿Cómo funciona en la práctica?

Un usuario en Google Chrome (Android o PC): El motor lee la primera línea, reconoce el tipo video/webm, ignora el resto del bloque HTML y comienza a descargar el vídeo ligero. Has ahorrado decenas de megabytes de transferencia.
Un usuario en Safari antiguo (iPhone): El motor lee la primera línea, no reconoce el códec VP9/WebM, descarta la primera etiqueta de forma limpia, y pasa a la segunda línea. Al encontrar video/mp4, lo descarga y lo reproduce de forma nativa.

Blindaje de Core Web Vitals (Performance)

Tener el formato correcto es solo la mitad de la batalla. Un vídeo insertado incorrectamente puede destruir tu puntuación de Largest Contentful Paint (LCP) o causar Cumulative Layout Shift (CLS).

Para un rendimiento impecable en Lighthouse, aplica siempre este escudo:

preload="none": Nunca dejes que el vídeo empiece a precargar metadatos o fragmentos de vídeo de forma silenciosa en la carga inicial de la página. El atributo none bloquea la descarga hasta que el usuario hace clic activo en Play. Impacto de red CERO en el renderizado inicial.
poster="...": Al usar preload="none", el reproductor se verá como un rectángulo negro estático. Usa el atributo poster apuntando a una imagen .webp minúscula y ultra-optimizada que servirá como carátula temporal.
Control de Aspect Ratio (CSS): Al igual que con las imágenes, envuelve el vídeo en un contenedor o dale una directiva matemática estricta (aspect-ratio: 16/9;) para que el navegador reserve el espacio vertical perfecto antes de que el usuario interactúe, erradicando el CLS.

Estrategia implementada y validada exitosamente en el proyecto base de merci.