Un hero de vídeo pot semblar elegant amb fibra i quedar incomplet al mòbil: rectangle buit, pòster tardà o text que no resulta utilitzable fins a transferir diversos megabytes.
No n’hi ha prou a afirmar que «el vídeo pesa». El cost pot ser al fitxer, atributs, descobriment, constructor o competència amb el contingut principal. Mesura cada part abans de canviar el disseny.
Confirmar què carrega abans que la pàgina sigui útil
Prova desconnectat, sense memòria cau i amb limitació mòbil. Filtra mitjans a Network i registra quan comença l’MP4, bytes transferits abans de mostrar el hero, càrrega del pòster, variants d’escriptori i mòbil i element LCP.
Si el vídeo comença aviat però el títol espera CSS o fonts, comprimir l’MP4 no corregirà tota l’espera visible.
Inspeccionar el marcat final
Un fons típic utilitza:
<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 i playsinline augmenten la possibilitat de reproducció mòbil, però el navegador decideix. preload és un suggeriment. El constructor pot sobreescriure atributs o inserir la font després d’executar JavaScript.
Inspecciona allò que rep el visitant, no només el tauler del giny.
Convertir el pòster en una alternativa real
El pòster ha de comunicar la secció abans de reproduir. Prepara’l amb la proporció mostrada, compressió adequada i, quan sigui possible, imatges adaptables. Mantén títol i CTA com a HTML.
No triïs un fotograma borrós. Si autoplay queda bloquejat, l’usuari demana menys moviment o la connexió és dolenta, el pòster pot ser tota l’experiència.
Reserva dimensions perquè el pas a vídeo no desplaci el contingut.
No enviar el vídeo d’escriptori al mòbil
Ocultar-lo amb CSS no garanteix que no es baixi. Comprova peticions a amplada mòbil. En molts webs de serveis, pòster sense autoplay és millor al telèfon.
Pots afegir la font mitjançant JavaScript només quan les condicions ho justifiquin, però les API de connexió no són universals. El contingut renderitzat pel servidor ha de ser útil sense elles.
Evita detecció fràgil per user-agent. Viewport, preferència de moviment i cost mesurat són criteris més mantenibles.
Respectar moviment reduït i controls
Per a vídeo decoratiu:
@media (prefers-reduced-motion: reduce) {
.hero-video { display: none; }
.hero-poster { display: block; }
}Si comunica informació, necessita controls, pausa i subtítols quan corresponguin. Un fons silenciós no ha de contenir instruccions essencials.
Evitar competència amb recursos crítics
No precarreguis l’MP4 complet des de <head>: competeix amb CSS, font, logotip i pòster. Compara preload="metadata" i preload="none".
Si el pòster és LCP, la seva URL ha de ser al marcat inicial i no utilitzar càrrega diferida. Deixa que text i imatge tinguin una ruta clara abans d’iniciar el vídeo.
Revisa també el consentiment: alguns scripts retarden el codi que revela el mitjà i deixen un buit encara que el fitxer sigui petit.
Comprova les capçaleres de la petició i la cascada. El servidor hauria de lliurar video/mp4 i permetre rangs quan la infraestructura els admeti. Si el navegador demana només una part però la CDN respon transferint el fitxer sencer, el problema pertany al lliurament, no a l’atribut preload. Verifica també redireccions, memòria cau i si el constructor afegeix paràmetres diferents en cada visita, perquè poden impedir reutilitzar el mitjà.
Verificar el compromís
Repeteix en escriptori, dades mòbils, Safari d’iPhone quan sigui possible i mode de moviment reduït. La portada s’ha d’entendre quan falla autoplay i no s’ha de baixar una segona versió oculta.
Compara bytes inicials, LCP i temps fins a utilitzar el CTA. Observa el bucle complet, artefactes i CPU en un telèfon modest.
Demana una reparació gestionada si el constructor injecta vídeo, es baixen diverses variants, pòster i MP4 competeixen per LCP o retirar autoplay canvia el disseny. Aporta URL i dispositiu, no credencials inicialment.
L’objectiu és preservar la funció visual i una alternativa fiable sense assumir amplada de banda il·limitada.