I file video sono grandi. Così grandi da rappresentare l’81% del traffico Internet nel 2021. I video caricati su una determinata pagina Web saranno probabilmente la risorsa più grande con cui un browser dovrà fare i conti. A meno che tu non stia facendo qualcosa di estremamente insolito (e probabilmente sconsigliabile) con Images JavaScript.
Ciò può portare alcuni sviluppatori web e SEO non esperti a guardare un grafico a cascata da uno strumento di misurazione della velocità del sito e dichiarare che “il video è dannoso per la velocità del sito”. Anche se questo non è vero nella sua ampia applicazione, ci sono alcune best practice di cui devi essere a conoscenza. La giusta configurazione assicurerà che il file non rallenti il tuo sito e che il tuo sito non rallenti il tuo video.
L’obiettivo è garantire una riproduzione video senza interruzioni, senza buffering e tempi di caricamento incredibilmente rapidi con tutte le risorse del tuo sito web. In questo sforzo, dovresti tenere d’occhio i tuoi elementi vitali web principali: Largest Contentful Paint (LCP), First Input Delay (FID) e Cumulative Layout Shift (CLS).
Un sito internet è senza dubbio un buon investimento per essere al passo con i tempi. Chiedi un preventivo a info@kenedy.it
Suggerimento 1: pubblica i tuoi file tramite una CDN
Il modo più semplice per ottenere video sul tuo sito Web WordPress è semplicemente caricarne uno nella tua libreria multimediale. Dopodiché puoi includerlo all’interno di una pagina o di un post utilizzando il Blocco Gutenberg.
Questo è probabilmente anche il modo peggiore per aggiungere video. È una ricetta per il buffering garantito non appena un utente preme il pulsante di riproduzione. E ciò influisce negativamente sul First Input Delay (FID). Tale configurazione richiede che il browser carichi un file completo (non ottimizzato) direttamente dal tuo server con un clic, senza fallback per problemi del server, posizione dell’utente o scarsa velocità di connessione.
Suggerimento 2: utilizza lo streaming adattivo
Il tag <video> HTML5 è un eccellente ed elegante pezzo fondamentale della tecnologia web. Ma da solo, può causare problemi. Il tag carica semplicemente un file video in un lettore video neutro predefinito e consente al browser di fare tutto il lavoro.
Il problema qui per la velocità del sito è quando si desidera caricare un file video di grandi dimensioni o ad alta risoluzione. Con una connessione tutt’altro che eccezionale, tutto ciò che accade è un’enorme quantità di buffering, mentre il browser tenta di caricare una quantità sufficiente di file per avviare la riproduzione. È molto negativo per FID.
Il modo migliore per affrontare questo problema è utilizzare qualcosa chiamato streaming adattivo. Lo streaming adattivo è quando diverse varianti di un singolo video, tutte con risoluzioni e bitrate differenti, vengono messe a disposizione di un server. Il server fornisce quindi la versione del video della migliore qualità che qualsiasi connessione può gestire. Con lo streaming adattivo, se l’utente si trova su un dispositivo mobile in cima a una collina remota e lavora solo con una connessione a 500 kbps, il server fornirà un video SD con un bitrate di qualcosa come 300 kbps, anziché la variazione 4K ideale a 35 Mbps.
Come puoi farlo? Bene, puoi configurarlo tu stesso usando MPEG-DASH. Oppure passa a una piattaforma di hosting video di terze parti come YouTube o Wistia; questi utilizzano lo streaming adattivo come parte dello stack tecnologico di consegna video.
Suggerimento 3: esporta video con un bitrate variabile
Un altro consiglio per migliorare la velocità di riproduzione è ridurre il più possibile i file durante il processo di esportazione. Un bitrate variabile (VBR) è un mezzo di compressione che adatta il bitrate del file in base alla complessità dei colori e del movimento in un dato punto del video. L’obiettivo di questo è mantenerlo il più basso possibile senza un notevole degrado della qualità. Ad esempio, le sequenze d’azione in rapido movimento con molti colori complessi richiedono un bitrate molto più elevato. Ma una testa parlante più statica su uno sfondo semplice funziona bene con un bitrate inferiore. Un VBR consentirà al tuo compressore di prendere decisioni intelligenti sui bitrate appropriati durante l’esportazione che ridurranno le dimensioni del file video. VBR può essere utilizzato con i codec web più comuni, come VP9 e h.264.
Suggerimento 3: evita di riprodurre in loop con la riproduzione automatica (o almeno mantienili brevi e silenziosi)
La riproduzione automatica dei video rimane popolare, in particolare come sfondi nelle home page. Ma implementati male possono causare tutti i tipi di problemi di velocità del sito.
A mio avviso, è meglio evitarli. Quasi sempre aumenteranno notevolmente il tempo per il Largest Contentful Paint (LCP). Forzando la riproduzione del file contemporaneamente al caricamento degli elementi HTML, immagine e JavaScript di base di una pagina, è necessario che un browser esegua una quantità enorme in una volta. Lo farà lentamente se la velocità di connessione è scarsa.
Se devi avere con riproduzione automatica in loop, mantienili il più brevi possibile (idealmente meno di 10 secondi). Esporta anche i file senza audio, in modo da mantenere la dimensione del file il più piccola possibile.
Suggerimento 4: carica i contenuti in modo asincrono
Ci sono due vantaggi nell’utilizzo di JavaScript asincrono nella distribuzione di video. In primo luogo, puoi impedire ai video di bloccare il rendering di altri elementi della pagina. E in secondo luogo, puoi caricare le risorse più critiche in Largest Contentful Paint (LCP) e Cumulative Layout Shift (CLS) prima di caricare il grande file video stesso.
Se usi AJAX per caricare il tuo lettore video, una volta che il client ha eseguito il rendering dello script iniziale di base (in genere solo poche centinaia di kilobyte), tutto il resto può essere caricato rapidamente in background. Nel frattempo il client esegue il rendering del resto degli elementi della pagina. Inoltre, il fotogramma e la miniatura del lettore video, quegli elementi che sono visibili prima di un utente che fa clic su Riproduci, possono essere assegnati immediatamente alle priorità e caricati, al fine di avere un impatto positivo sui principali elementi vitali del web.
Questo è esattamente ciò che fa il plug-in Yoast Video SEO per WordPress per accelerare la consegna dei video, assicurando che anche i file video più grandi non influiscano negativamente sull’esperienza dell’utente o sulle prestazioni di ricerca.
Un sito internet è senza dubbio un buon investimento per essere al passo con i tempi. Chiedi un preventivo a info@kenedy.it
Suggerimento 5: non inserire video dietro JS che blocca il rendering
A volte gli scroller o i caroselli contengono video, in alternativa alle immagini. Sfortunatamente, i plugin che li gestiscono spesso finiscono per caricare ogni immagine su un trigger. Ciò può significare che altri JavaScript bloccano il caricamento del video. Quando ciò accade, il client deve caricare completamente tutte le risorse video quando il video viene visualizzato nel carosello, invece di aver svolto parte del duro lavoro prima che l’utente o il crawler vi arrivi.
Ciò ostacola la velocità del sito e il First Input Delay, ma non solo. Può anche danneggiare la SEO, poiché Googlebot non è in grado di trovare e indicizzare il video.
Per verificare se Googlebot può analizzare la tua implementazione video, puoi controllare il nuovo rapporto Pagine in Google Search Console.
Questo articolo è la versione tradotta dell’originale di Yoast. Leggi l’originale QUI
