Impacte dels Vídeos en la Velocitat de Càrrega Web

Ens agrada molt posar videos a una web, per a crear experiències web atractives, però també poden tenir un impacte significatiu en el rendiment del teu lloc. Abans d’aprofundir, és important entendre que tant els vídeos allotjats localment com els embeguts de plataformes externes afecten la velocitat de càrrega, encara que de manera diferent.

Com afecten els vídeos allotjats localment (self-hosted)

Els vídeos allotjats en el teu propi servidor poden suposar una càrrega considerable per al rendiment del teu lloc:

Factors que incrementen el temps de càrrega

• Mida d’arxiu: Un vídeo de 30 segons en 4K pot ocupar aproximadament 67 MB, mentre que en 1080p podria reduir-se a uns 16 MB.
• Amplada de banda del servidor: Els vídeos consumeixen gran quantitat de recursos del servidor, especialment si múltiples usuaris accedeixen simultàniament.
• Temps d’emmagatzematge en búfer: Els vídeos més llargs triguen més a emmagatzemar-se en *búfer, la qual cosa alenteix considerablement la càrrega inicial de la pàgina.
• Resolució i qualitat: A major qualitat, major grandària d’arxiu i més temps de càrrega.
• Àudio: Encara que el seu impacte és menor que el vídeo, l’àudio també contribueix a la mida total de l’arxiu.
• Posició en la pàgina: Els vídeos situats en la part superior (“above the fold”) es carreguen immediatament en accedir a la pàgina, alentint la càrrega inicial.

Com afecten els vídeos embeguts (YouTube/Vimeo)

Encara que molts creuen que embeure vídeos de plataformes externes soluciona els problemes de rendiment, la realitat és més complexa: Impacte en el rendiment

• Càrrega de recursos addicionals: En incrustar un vídeo de YouTube o Vimeo, es carrega un iframe que descàrrega múltiples recursos externs:
  • Un arxiu HTML
  • Un arxiu CSS
  • Entre dos i tres arxius JavaScript que poden superar les 500 KB
• Consultes DNS addicionals: Es realitzen cerques DNS a dominis com www.youtube.com, i.ytimg.com, etc.
• JavaScript de bloqueig: Aquests scripts poden bloquejar el renderitzat de la pàgina
• Impacte en PageSpeed: Alguns tests mostren que embeure vídeos de YouTube pot reduir dràsticament les puntuacions de PageSpeed de Google (de 56 a 22 en mòbils, i de 93 a 70 en escriptori)[12].

Avantatges enfront de l’allotjament local

• Reducció de la càrrega del servidor: Els servidors externs de YouTube o Vimeo gestionen el lliurament del contingut.
• CDN integrat: Aquestes plataformes utilitzen les seves pròpies xarxes de distribució de contingut, que optimitzen el lliurament basant-se en la ubicació de l’usuari.

Comparativa: Allotjament local vs. Embegut

Vídeos embeguts (YouTube/Vimeo)

• ✅ Reducció de la càrrega del servidor propi
• ✅ Aprofitament de CDN globals
• ✅ Fàcil implementació
• ❌ Càrrega de scripts addicionals pesats
• ❌ Menor control sobre l’experiència d’usuari
• ❌ Possible impacte negatiu en PageSpeed

Estratègies d’optimització per a millorar la velocitat

Per a vídeos allotjats localment

1. Compressió eficient: Utilitza eines com FFmpeg o Handbrake per a comprimir vídeos sense perdre qualitat visible.
2. Formats optimitzats:
   • MP4 (H.264 o HEVC): Ofereix un excel·lent equilibri entre compressió i qualitat
   • WebM: Una gran alternativa per a ús web, proporcionant grandàries d’arxiu més petits mentre manté alta qualitat visual
   • Us recomano treballar amb els dos alhora. Podeu convertir els mp4 a WebM amb Handbrake. Captura de mida de dos formats.
3. Ajust de resolució: Per a la majoria de llocs web, 1080p o fins i tot 720p és suficient.
4. Ús de CDN: Descàrrega els arxius de vídeo a una xarxa de distribució de contingut per a millorar dràsticament el temps de càrrega. Per exemple bunny.net.
5. Si podeu, elimineu l’àudio del vídeo, reduireu la mida de l’arxiu.

Per a vídeos embeguts (YouTube/Vimeo)

1. Càrrega mandrosa (lazy loading):
   • Implementa la càrrega mandrosa perquè els vídeos només es carreguin quan l’usuari es desplaça fins ells.
   • Afegeix l’atribut loading="lazy" als iframes.

     <iframe< loading="lazy" 
     src="https://www.youtube.com/embed/VIDEO_ID"></iframe>
     

   • A WordPress configura el teu plugin de caché per que carregui el videos en lazy load. (Captura de pantalla de WpRocket)
2. Implementació de Lite YouTube Embed:
   • Aquesta biblioteca redueix la sobrecàrrega de carregar vídeos de YouTube fins a 224 vegades.
   • Reemplaça l’iframe estàndard amb un element personalitzat més lleuger.

     <iframe loading="lazy" 
     src="https://www.youtube.com/embed/VIDEO_ID"></iframe>
     

3. Tècnica de càrrega sota demanda:
   • Mostra només una miniatura amb un botó de reproducció
   • Càrrega l’iframe únicament quan l’usuari fa clic per a reproduir el vídeo.

     <div class="video-container">
     
       <img src="https://doctorweb.cat/wp-content/uploads/2025/04/hqdefault.jpg" alt="Miniatura">
     
       <button class="play-button">Reprodueix</button>
     
     </div>
     

      

4. Posició estratègica:
   • Col·loca els vídeos més a baix en la pàgina quan sigui possible, no en la secció superior inicial.

Conclusió

Els vídeos, tant allotjats localment com embeguts, tenen un impacte significatiu en la velocitat de càrrega del teu lloc web. L’elecció entre allotjament propi o embegut dependrà de les teves necessitats específiques, recursos disponibles i prioritats de rendiment.

Per a llocs amb alt trànsit i recursos limitats, la millor estratègia sol ser utilitzar vídeos embeguts amb tècniques d’optimització com a càrrega mandrosa o solucions lite. Per a llocs que requereixen major control o personalització, l’allotjament propi amb compressió òptima i CDN pot ser més adequat.

En qualsevol cas, implementar les tècniques d’optimització esmentades anteriorment pot millorar significativament el rendiment del teu lloc mentre continues oferint experiències riques en contingut multimèdia als teus usuaris.