Un vídeo de fons web no és un màster cinematogràfic. És una capa visual curta i silenciosa que ha de començar aviat, repetir amb netedat i deixar amplada de banda al contingut. Pujar l’original sol afegir resolució, taxa de bits, àudio i metadades innecessàries.
Prepara una còpia específica per al lliurament i conserva la font fora de Mitjans.
Definir la necessitat visual
Registra les dimensions renderitzades més grans, retall i durada. Un fitxer 4K costa justificar-lo dins d’un hero de 1400 píxels amb capa fosca.
Retalla fotogrames que ningú veu i crea un bucle curt sense salt perceptible. Si necessita 40 segons de narració, probablement és contingut i ha d’oferir controls.
Elimina l’àudio d’un fons decoratiu: autoplay sol exigir silenci i la pista continua sumant dades.
Crear un derivat MP4 controlat
FFmpeg pot 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.mp4Aquest exemple d’una sola línia limita l’amplada a 1.600 píxels sense ampliar fonts més petites, arrodoneix l’amplada a la baixa a un nombre parell i calcula una alçada parella. Parteix de vídeo SDR convencional; HDR o proporcions de píxel especials necessiten una altra revisió. La documentació d’escala de FFmpeg explica les expressions.
CRF 25 i el límit de mida són punts de partida: compara després la qualitat visible. -pix_fmt yuv420p defineix el format de píxel i -an elimina l’àudio. Les opcions de codificació depenen de la compilació instal·lada. Fast start recol·loca metadades de l’MP4; no redueix la taxa de bits del vídeo.
Són valors de prova, no universals. Text fi, degradats i moviment ràpid poden requerir altres ajustos.
Avaluar la qualitat al disseny
Mira el derivat en mòbil normal i escriptori amb el retall real. Busca blocs a les ombres, bandes i moviment entretallat. La capa del hero pot ocultar detall, així que jutja el resultat dins la pàgina.
Exporta dues o tres variants i tria la menor que continuï semblant intencionada. Conserva el màster amb còpia: recomprimir la còpia web acumula artefactes.
Preparar el pòster
Extreu o dissenya una imatge representativa amb la mateixa proporció i passa-la pel flux responsive normal. Ha de funcionar com a presentació permanent si el vídeo no es reprodueix.
Evita text promocional dins del vídeo o pòster quan pugui estar en HTML, on resulta accessible, indexable, editable i adaptable.
Reserva proporció o alçada mínima perquè el canvi de pòster a reproducció no desplaci la pàgina.
Verificar capçaleres i rangs
Una resposta HEAD orienta, però no demostra que funcioni una petició real per rangs. Substitueix l’adreça d’exemple per un MP4 que controlis i demana’n els primers 1.024 bytes. L’ordre desa capçaleres i mostra en fitxers separats; els límits de mida i temps eviten una baixada sense límit 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"Per a un fitxer prou gran, revisa una resposta 206, Content-Range: bytes 0-1023/… coincident i Content-Type: video/mp4. Un 200 pot indicar que s’ha ignorat el rang; 416, que no es pot satisfer. Cap dels dos demostra per si sol que falti l’MP4. Revisa la resposta del CDN públic que usa la pàgina. Consulta els rangs a MDN i la semàntica HTTP.
Evitar processament i límits innecessaris
WordPress no genera mides de vídeo com fa amb imatges. El fitxer pujat sol ser el lliurat; comprimeix-lo abans en lloc d’esperar que un connector d’imatges ho faci.
No elevïs upload_max_filesize o post_max_size només per acceptar un màster inadequat. Un mitjà gran també encareix còpies, migracions i disc.
Per a molt trànsit o una biblioteca de vídeos pot convenir emmagatzematge d’objectes o streaming especialitzat. Un fons curt es pot servir localment si servidor i CDN responen bé.
Integrar sense forçar la baixada
El pòster i playsinline ajuden a presentar el vídeo; l’autoplay silenciat s’ha de provar als navegadors previstos. preload="none" és una indicació, no un bloqueig de baixada: autoplay pot iniciar la transferència. Si el disseny exigeix ajornar el vídeo, no n’assignis la font fins a la condició d’activació triada; ocultar-lo amb CSS no demostra que no s’hagi demanat. Comprova Network. Referència d’atributs de vídeo.
Ofereix una presentació estàtica útil per a la preferència de moviment reduït. Si el moviment comença automàticament, supera cinc segons i acompanya un altre contingut, incorpora una manera de pausar-lo, aturar-lo o ocultar-lo, tret que sigui essencial. Un fitxer curt en bucle també pot continuar movent-se més de cinc segons. Guia de W3C sobre pausa i moviment.
Provar la pàgina completa
Fes una visita freda amb dades mòbils. El pòster ha d’aparèixer aviat, el títol continuar llegible, el vídeo no bloquejar el CTA i el bucle no elevar massa la CPU.
Compara els bytes del mitjà amb CSS, fonts i imatge principal. Estalviar un 50 % no basta si encara es transfereixen diversos megabytes abans de poder actuar.
Si capçaleres, memòria cau CDN, constructor o fallback no són clars, una avaluació pot acotar la feina amb l’URL pública i especificacions de la font, sense contrasenyes inicialment.
Què ha de resoldre una avaluació de rendiment
Envia l’URL, dispositiu, mides del pòster i MP4, una observació de càrrega en fred amb data i quin element retarda el contingut útil. Amb aquestes proves, WebSpeed Optimize pot acotar codificació, marcatge del reproductor o lliurament. Acordeu canvis i condicions de comparació abans d’intervenir; un fitxer menor no demostra per si sol millors Core Web Vitals.
Sol·licitar una avaluació del rendiment del vídeo · Servei de rendiment WordPress i Core Web Vitals