Un hero de vídeo puede parecer elegante con fibra y quedar incompleto en móvil: rectángulo vacío, poster tardío o texto que no resulta utilizable hasta transferir varios megabytes.
No basta con afirmar que «el vídeo pesa». El coste puede estar en el archivo, atributos, descubrimiento, constructor o competencia con el contenido principal. Mide cada parte antes de cambiar el diseño.
Confirmar qué carga antes de que la página sea útil
Prueba desconectado, sin caché y con limitación móvil. Filtra medios en Network y registra cuándo comienza el MP4, bytes transferidos antes de mostrar el hero, carga del poster, variantes de escritorio y móvil y elemento LCP.
Si el vídeo empieza pronto pero el título espera CSS o fuentes, comprimir el MP4 no corregirá toda la espera visible.
Inspeccionar el marcado final
Un fondo típico usa:
<video
autoplay
muted
loop
playsinline
poster="/wp-content/uploads/hero-poster.webp"
preload="metadata"
>
<source src="/wp-content/uploads/hero.mp4" type="video/mp4">
</video>muted y playsinline aumentan la posibilidad de reproducción móvil, pero el navegador decide. preload es una sugerencia. El constructor puede sobrescribir atributos o insertar la fuente tras ejecutar JavaScript.
Inspecciona lo que recibe el visitante, no solo el panel del widget.
Convertir el poster en una alternativa real
El poster debe comunicar la sección antes de reproducir. Prepáralo con la proporción mostrada, compresión adecuada y, cuando sea posible, imágenes adaptables. Mantén título y CTA como HTML.
No elijas un fotograma borroso. Si autoplay queda bloqueado, el usuario solicita menos movimiento o la conexión es mala, el poster puede ser toda la experiencia.
Reserva dimensiones para que el paso a vídeo no desplace el contenido.
No enviar el vídeo de escritorio al móvil
Ocultarlo con CSS no garantiza que no se descargue. Comprueba peticiones al ancho móvil. En muchas webs de servicios, poster sin autoplay es mejor en teléfono.
Puedes añadir la fuente mediante JavaScript solo cuando las condiciones lo justifiquen, pero las APIs de conexión no son universales. El contenido renderizado por el servidor debe ser útil sin ellas.
Evita detección frágil por user-agent. Viewport, preferencia de movimiento y coste medido son criterios más mantenibles.
Respetar movimiento reducido y controles
Para vídeo decorativo:
@media (prefers-reduced-motion: reduce) {
.hero-video { display: none; }
.hero-poster { display: block; }
}Si comunica información, necesita controles, pausa y subtítulos cuando correspondan. Un fondo silencioso no debe contener instrucciones esenciales.
Evitar competencia con recursos críticos
No precargues el MP4 completo desde <head>: compite con CSS, fuente, logotipo y poster. Compara preload="metadata" y preload="none".
Si el poster es LCP, su URL debe estar en el marcado inicial y no usar lazy loading. Deja que texto e imagen tengan una ruta clara antes de iniciar el vídeo.
Revisa también el consentimiento: algunos scripts retrasan el código que revela el medio y dejan un hueco aunque el archivo sea pequeño.
Comprueba las cabeceras de la petición y la cascada. El servidor debería entregar video/mp4 y permitir rangos cuando la infraestructura los admita. Si el navegador solicita solo una parte pero la CDN responde transfiriendo el archivo entero, el problema pertenece a la entrega, no al atributo preload. Verifica también redirecciones, caché y si el constructor añade parámetros distintos en cada visita, porque pueden impedir reutilizar el medio.
Verificar el compromiso
Repite en escritorio, datos móviles, Safari de iPhone cuando sea posible y modo de movimiento reducido. La portada debe entenderse cuando falla autoplay y no debe descargarse una segunda versión oculta.
Compara bytes iniciales, LCP y tiempo hasta usar el CTA. Observa el bucle completo, artefactos y CPU en un teléfono modesto.
Solicita reparación gestionada si el constructor inyecta vídeo, se descargan varias variantes, poster y MP4 compiten por LCP o retirar autoplay cambia el diseño. Aporta URL y dispositivo, no credenciales inicialmente.
El objetivo es preservar la función visual y una alternativa fiable sin asumir ancho de banda ilimitado.