Come inserire video in un sito web senza rallentarlo

I video sono uno degli strumenti più efficaci per rendere un sito web coinvolgente e comunicare rapidamente l’identità di un’azienda, di un prodotto o di un servizio. Possono essere utilizzati come sfondo di una hero, per presentare un’attività, mostrare un prodotto oppure raccontare un’esperienza.

Allo stesso tempo, un video implementato nel modo sbagliato può diventare una delle risorse più pesanti dell’intera pagina, aumentando i tempi di caricamento e peggiorando le prestazioni soprattutto da smartphone.

Inserire un video in un sito web, quindi, non significa semplicemente caricare un file MP4 o incorporare un video YouTube. È importante scegliere la soluzione più adatta e stabilire quando e come il contenuto deve essere caricato.

Video HTML5 o YouTube: quale scegliere?

Esistono principalmente due possibilità: ospitare direttamente il video oppure utilizzare una piattaforma esterna come YouTube o Vimeo.

Un video ospitato sul proprio spazio web permette un maggiore controllo grafico e tecnico. È particolarmente indicato, ad esempio, per brevi video utilizzati come background di una sezione o della hero.

Un semplice video HTML5 può essere inserito in questo modo:

<video autoplay muted loop playsinline>
    <source src="video.webm" type="video/webm">
    <source src="video.mp4" type="video/mp4">
</video>

Gli attributi hanno funzioni precise:

• autoplay avvia automaticamente la riproduzione;
• muted disattiva l’audio ed è normalmente necessario per consentire l’autoplay;
• loop riavvia il video quando termina;
• playsinline evita, soprattutto su dispositivi mobili, che il video venga necessariamente aperto a schermo intero.

YouTube e Vimeo hanno invece il vantaggio di occuparsi dell’hosting, della codifica e della distribuzione del contenuto.

In questo caso, però, bisogna prestare attenzione alle risorse esterne caricate dall’iframe.

Perché un video può rallentare un sito web?

Il problema principale è piuttosto intuitivo: un video pesa molto più di un’immagine.

Un’immagine WebP opportunamente ottimizzata può pesare poche decine di KB, mentre un video può facilmente raggiungere diversi MB.

Il peso, però, non è l’unico fattore.

Un video può comportare richieste HTTP aggiuntive, connessioni verso servizi esterni, esecuzione di JavaScript e trasferimento di una quantità considerevole di dati.

Questo diventa particolarmente importante sui dispositivi mobili, dove connessione e capacità di elaborazione possono essere inferiori rispetto a un computer desktop.

Video nella hero: attenzione alle prestazioni

Una delle soluzioni graficamente più interessanti consiste nell’utilizzare un video come background della prima sezione del sito.

In questo caso il video si trova above the fold, cioè nell’area immediatamente visibile quando viene aperta la pagina.

È quindi necessario prestare particolare attenzione al suo caricamento.

Una buona soluzione consiste nell’utilizzare l’attributo poster:

<video autoplay muted loop playsinline poster="anteprima-video.webp">
    <source src="video.webm" type="video/webm">
    <source src="video.mp4" type="video/mp4">
</video>

Il browser può mostrare immediatamente un’immagine statica mentre il video viene inizializzato.

L’immagine poster dovrebbe essere ottimizzata esattamente come qualsiasi altra immagine importante della pagina, utilizzando dimensioni adeguate e formati moderni come WebP o AVIF.

Non tutti i video devono essere caricati immediatamente

Se un video si trova molto più in basso rispetto alla parte iniziale della pagina, non c’è generalmente motivo di scaricarlo durante il caricamento iniziale.

Una possibile strategia consiste nell’utilizzare:

<video preload="none" controls poster="anteprima.webp">
    <source src="video.mp4" type="video/mp4">
</video>

Con:

preload="none"

indichiamo al browser che non è necessario precaricare il contenuto video.

Esiste anche:

preload="metadata"

che permette di recuperare solamente le informazioni necessarie sul video, anziché iniziare immediatamente il download dell’intero contenuto.

La scelta dipende naturalmente dal ruolo che il video ricopre all’interno della pagina.

Come incorporare YouTube senza rallentare la pagina

Il classico embed di YouTube utilizza un iframe:

<iframe
    src="https://www.youtube.com/embed/ID_VIDEO"
    title="Video YouTube"
    allowfullscreen>
</iframe>

È una soluzione semplice, ma può comportare il caricamento di diverse risorse provenienti dai server di YouTube.

Se in una pagina sono presenti più video, l’impatto può diventare ancora più evidente.

Una soluzione più efficiente consiste nel non creare immediatamente l’iframe.

Inizialmente possiamo mostrare solamente:

• l’immagine di anteprima;
• il titolo del video;
• un pulsante Play.

Solamente quando l’utente decide di riprodurre il video viene creato l’iframe YouTube.

In questo modo chi visita la pagina senza riprodurre il contenuto non deve necessariamente scaricare tutte le risorse necessarie al player.

È una tecnica particolarmente interessante quando una pagina contiene diversi video.

Quanto dovrebbe pesare un video per il web?

Non esiste un peso ideale valido per qualsiasi situazione.

Un breve background animato e un video di presentazione di alcuni minuti hanno esigenze completamente differenti.

In generale, per i video utilizzati esclusivamente come elemento grafico è consigliabile:

• limitare la durata;
• evitare risoluzioni inutilmente elevate;
• utilizzare un bitrate adeguato;
• eliminare l’audio quando non necessario;
• valutare formati e codec moderni;
• evitare di utilizzare direttamente il file originale prodotto da una videocamera.

Caricare un video 4K come background di una sezione visualizzata a dimensioni molto inferiori significa trasferire una quantità di dati che l’utente non potrà realmente apprezzare.

Ottimizzare significa fornire la qualità necessaria, non la massima qualità disponibile.

MP4 e WebM: quale formato utilizzare?

MP4, generalmente con codec H.264, rimane una soluzione estremamente diffusa grazie alla sua elevata compatibilità.

WebM può offrire un rapporto interessante tra qualità e dimensione del file.

Quando necessario è possibile fornire entrambe le versioni:

<video autoplay muted loop playsinline>
    <source src="video.webm" type="video/webm">
    <source src="video.mp4" type="video/mp4">
</video>

Sarà il browser a utilizzare una delle risorse disponibili in base al supporto offerto.

Non bisogna però concentrarsi esclusivamente sull’estensione: risoluzione, bitrate, codec e caratteristiche del contenuto incidono enormemente sul peso finale.

Video su smartphone: è sempre necessario mostrarli?

Non necessariamente.

Un video che funziona molto bene su un grande monitor potrebbe avere un’importanza molto inferiore su uno smartphone.

In determinati progetti può quindi essere sensato utilizzare il video su desktop e sostituirlo con un’immagine statica ottimizzata sui dispositivi mobili.

Questo può ridurre significativamente il trasferimento di dati e migliorare la velocità percepita della pagina.

In altri casi, invece, il video rappresenta una parte fondamentale dell’esperienza e può essere mantenuto anche su smartphone, lavorando sulla compressione e sulla modalità di caricamento.

Non esiste una regola universale: la scelta dovrebbe dipendere dal contenuto e dall’esperienza che si vuole offrire all’utente.

Video e Core Web Vitals

Quando si lavora sull’ottimizzazione delle prestazioni è importante considerare anche i Core Web Vitals.

Un video inserito nella parte iniziale della pagina può influenzare direttamente o indirettamente il caricamento del contenuto principale e quindi metriche come il Largest Contentful Paint (LCP).

Anche JavaScript aggiuntivo, player esterni e modifiche al layout durante il caricamento possono incidere sulle prestazioni complessive.

Strumenti come Google PageSpeed Insights e Chrome DevTools permettono di individuare quali risorse vengono scaricate, quando vengono richieste e quale impatto hanno sul caricamento della pagina.

Il punteggio PageSpeed, tuttavia, non dovrebbe essere considerato l’unico obiettivo: un sito deve essere veloce per le persone che lo utilizzano, non semplicemente ottenere un determinato numero in un test.

Gli errori più comuni quando si inserisce un video

Tra gli errori che incontro più frequentemente ci sono video eccessivamente pesanti, file caricati immediatamente anche quando si trovano in fondo alla pagina, assenza di un’immagine poster, utilizzo di risoluzioni molto superiori a quelle realmente necessarie e numerosi iframe YouTube caricati contemporaneamente.

Un altro errore è considerare il video separatamente dal resto della pagina.

Un sito può avere un video perfettamente ottimizzato ma risultare comunque lento a causa di JavaScript, CSS, font, immagini, plugin o servizi esterni.

L’ottimizzazione deve quindi essere affrontata considerando l’intero percorso di caricamento della pagina.

Conclusioni

Utilizzare video in un sito web non significa necessariamente comprometterne le prestazioni.

La differenza è data soprattutto da come il video viene implementato.

Un video correttamente compresso, caricato solamente quando necessario e accompagnato da un’immagine di anteprima ottimizzata può offrire un forte impatto visivo mantenendo tempi di caricamento contenuti.

La scelta tra HTML5, YouTube, Vimeo o un’immagine statica dovrebbe essere fatta in funzione del progetto, del dispositivo e dell’importanza effettiva del contenuto.

Quando progetto un sito web, l’obiettivo non è semplicemente ottenere un risultato visivamente efficace, ma trovare il giusto equilibrio tra design, esperienza utente e prestazioni.