Un vídeo de fondo web no es un master cinematográfico. Es una capa visual corta y silenciosa que debe empezar pronto, repetir con limpieza y dejar ancho de banda al contenido. Subir el original suele añadir resolución, bitrate, audio y metadatos innecesarios.
Prepara una copia específica para entrega y conserva la fuente fuera de Medios.
Definir la necesidad visual
Registra mayores dimensiones renderizadas, recorte y duración. Un archivo 4K cuesta justificarlo dentro de un hero de 1400 píxeles con capa oscura.
Recorta fotogramas que nadie ve y crea un bucle corto sin salto perceptible. Si necesita 40 segundos de narración, probablemente es contenido y debe ofrecer controles.
Elimina audio de un fondo decorativo: autoplay suele exigir silencio y la pista sigue sumando datos.
Crear un derivado MP4 controlado
FFmpeg puede generar H.264 compatible:
ffmpeg -i hero-master.mov -vf "scale='trunc(min(1600,iw)/2)*2':-2" -c:v libx264 -preset slow -crf 25 -pix_fmt yuv420p -an -movflags +faststart hero-web.mp4Este ejemplo de una sola línea limita el ancho a 1.600 píxeles sin ampliar fuentes menores, redondea el ancho hacia abajo a un número par y calcula una altura par. Parte de vídeo SDR convencional; HDR o proporciones de píxel especiales requieren otra revisión. La documentación de escala de FFmpeg explica las expresiones.
CRF 25 y el límite de tamaño son puntos de partida: compara después la calidad visible. -pix_fmt yuv420p define el formato de píxel y -an elimina audio. Las opciones de codificación dependen de la compilación instalada. Fast start recoloca metadatos del MP4; no reduce el bitrate del vídeo.
Son valores de prueba, no universales. Texto fino, degradados y movimiento rápido pueden requerir otros ajustes.
Evaluar calidad en el diseño
Mira el derivado en móvil normal y escritorio con el recorte real. Busca bloques en sombras, bandas y movimiento entrecortado. La capa del hero puede ocultar detalle, así que juzga el resultado dentro de la página.
Exporta dos o tres variantes y elige la menor que siga pareciendo intencionada. Conserva el master respaldado: recomprimir la copia web acumula artefactos.
Preparar el poster
Extrae o diseña una imagen representativa con la misma proporción y pásala por el flujo responsive normal. Debe funcionar como presentación permanente si el vídeo no reproduce.
Evita texto promocional dentro del vídeo o poster cuando pueda estar en HTML, donde resulta accesible, indexable, editable y adaptable.
Reserva proporción o altura mínima para que el cambio de poster a reproducción no desplace la página.
Verificar cabeceras y rangos
Una respuesta HEAD orienta, pero no demuestra que funcione una petición real por rangos. Sustituye la dirección de ejemplo por un MP4 que controles y solicita sus primeros 1.024 bytes. El comando guarda cabeceras y muestra en archivos separados; los límites de tamaño y tiempo evitan una descarga sin límite si el servidor ignora Range. curl.
curl --range 0-1023 --max-filesize 1048576 --max-time 15 -D hero-range-headers.txt -o hero-range-sample.bin "https://example.com/wp-content/uploads/hero-web.mp4"Para un archivo suficientemente grande, revisa una respuesta 206, Content-Range: bytes 0-1023/… coincidente y Content-Type: video/mp4. Un 200 puede indicar que se ignoró el rango; 416, que no se puede satisfacer. Ninguno demuestra por sí solo que falte el MP4. Revisa la respuesta del CDN público que usa la página. Consulta los rangos en MDN y la semántica HTTP.
Evitar procesamiento y límites innecesarios
WordPress no genera tamaños de vídeo como hace con imágenes. El archivo subido suele ser el entregado; comprímelo antes en lugar de esperar que un plugin de imágenes lo haga.
No eleves upload_max_filesize o post_max_size solo para aceptar un master inadecuado. Un medio grande también encarece copias, migraciones y disco.
Para mucho tráfico o una biblioteca de vídeos puede convenir almacenamiento de objetos o streaming especializado. Un fondo corto puede servirse localmente si servidor y CDN responden bien.
Integrar sin forzar la descarga
El póster y playsinline ayudan a presentar el vídeo; el autoplay silenciado debe probarse en los navegadores previstos. preload="none" es una indicación, no un bloqueo de descarga: autoplay puede iniciar la transferencia. Si el diseño exige aplazar el vídeo, no asignes su fuente hasta la condición de activación elegida; ocultarlo con CSS no demuestra que no se haya pedido. Comprueba Network. Referencia de atributos de vídeo.
Ofrece una presentación estática útil para la preferencia de movimiento reducido. Si el movimiento empieza automáticamente, supera cinco segundos y acompaña a otro contenido, incorpora una forma de pausarlo, detenerlo u ocultarlo, salvo que sea esencial. Un archivo corto en bucle también puede seguir moviéndose más de cinco segundos. Guía de W3C sobre pausa y movimiento.
Probar la página completa
Haz una visita fría con datos móviles. El poster debe aparecer pronto, el título seguir legible, el vídeo no bloquear el CTA y el bucle no elevar demasiado la CPU.
Compara los bytes del medio con CSS, fuentes e imagen principal. Ahorrar un 50 % no basta si aún se transfieren varios megabytes antes de poder actuar.
Si cabeceras, caché CDN, constructor o fallback no están claros, una evaluación puede acotar el trabajo con la URL pública y especificaciones de la fuente, sin contraseñas inicialmente.
Qué debe resolver una evaluación de rendimiento
Envía la URL, dispositivo, tamaños del póster y MP4, una observación de carga en frío con fecha y qué elemento retrasa el contenido útil. Con esas pruebas, WebSpeed Optimize puede acotar codificación, marcado del reproductor o entrega. Acordad cambios y condiciones de comparación antes de intervenir; un archivo menor no demuestra por sí solo mejores Core Web Vitals.
Solicitar una evaluación del rendimiento del vídeo · Servicio de rendimiento WordPress y Core Web Vitals