Come aumentare le prestazioni dei media con un budget limitato

Questo articolo è stato gentilmente supportato dai nostri cari amici di Cloudinary che aiutano la community a creare, gestire e fornire le proprie esperienze digitali in modo rapido e semplice su qualsiasi browser, dispositivo e larghezza di banda. Grazie!

Lo studioso americano Mason Cooley ha abilmente descritto un fatto difficile della vita: "Un budget toglie il divertimento dai soldi". Indubbiamente, i media animano i siti Web, aggiungendo fascino, eccitazione e intrighi, per non parlare degli inviti a rimanere su una pagina e a rivisitarla frequentemente. Tuttavia, proprio come la spesa fuori controllo fa presagire male a lungo termine, così i media digitali non preventivati ​​decimano le prestazioni del sito.

Un esempio calzante: un rallentamento del caricamento della pagina di un solo secondo potrebbe costare ad Amazon $ 1,6 miliardi di vendite annuali. Tra i molti fattori che influiscono sulla velocità di caricamento della pagina, il supporto è importante. Da qui la disperata necessità di dare priorità all'ottimizzazione dei media. Spendendo i tuoi soldi per quell'attività e assegnando un budget ai tuoi media, otterrai risparmi e vantaggi significativi a lungo termine.

Budget delle prestazioni

“Un budget di rendimento è '... proprio come sembra: imposti un 'budget' sulla tua pagina e non consenti alla pagina di superarlo. Questo può essere un tempo di caricamento specifico, ma di solito è più facile avere una conversazione quando suddividi il budget in base al numero di richieste o alle dimensioni della pagina".

— Tim Kadlec

Un budget delle prestazioni come meccanismo per pianificare un'esperienza web e prevenire il decadimento delle prestazioni potrebbe essere costituito dai seguenti parametri:

• Peso complessivo della pagina,
• Numero totale di richieste HTTP,
• Tempo di caricamento della pagina su una particolare rete mobile,
• Ritardo primo ingresso (FID)
• First Contentful Paint (FCP),
• Spostamento cumulativo del layout (CLS),
• La più grande vernice contenta (LCP).

Vitaly Friedman ha un'eccellente lista di controllo che descrive i componenti che influenzano le prestazioni web insieme a suggerimenti utili sulle tecniche di ottimizzazione. Acquisire familiarità con questi componenti ti consentirà di definire obiettivi di prestazioni .

Con obiettivi di prestazione chiaramente documentati, vari team possono avere conversazioni significative sulla distribuzione ottimale dei contenuti. Ad esempio, un budget può aiutarli a decidere se una pagina deve contenere cinque immagini o tre immagini e un video e rimanere comunque entro i limiti pianificati.

Tuttavia, avere un budget delle prestazioni come metrica autonoma potrebbe non essere di grande aiuto. Ecco perché dobbiamo correlare le prestazioni agli obiettivi dell'organizzazione.

Le prestazioni di business

Se dedichi molti byte a video e immagini non ottimali, l'esperienza rich media non sarà più così ricca. Un'organizzazione esiste per ottenere risultati , come invogliare le persone ad acquistare, educarle, motivarle o cercare aiuto e volontari. Chiunque abbia una presenza sul Web apprezzerebbe la relazione tra l'effetto di varie misurazioni delle prestazioni sulle metriche aziendali.

WPOStats evidenzia letteralmente centinaia di casi di studio che mostrano come un calo delle prestazioni, da poche centinaia di millisecondi a secondi, potrebbe comportare un enorme calo delle vendite annuali. Disegnare quel tipo di relazione aiuta notevolmente a tenere traccia dell'effetto delle prestazioni sul business e, in definitiva, a costruire una cultura delle prestazioni per le organizzazioni.

Allo stesso modo, i siti lenti possono avere un impatto drammatico sulla conversione. Una sfida difficile che le aziende online devono affrontare è trovare il giusto equilibrio tra il coinvolgimento del pubblico e il rispetto del budget per le prestazioni.

Non sorprende quindi che una componente fondamentale per il coinvolgimento del pubblico sia l'ottimizzazione dei media visivi , ad esempio un video accattivante che intreccia una storia sul tuo prodotto o servizio insieme a elementi visivi pertinenti, interessanti e accattivanti.

Secondo i neuroscienziati del MIT, il nostro cervello può assorbire e comprendere i media visivi in ​​meno di 13 millisecondi, mentre il testo può richiedere al lettore medio più di 3,3 minuti per comprenderlo, spesso dopo averlo riletto e incrociato altri luoghi. Non c'è da stupirsi quindi che i contenuti microvideo (di solito della durata di soli 10-20 secondi) spesso offrano grandi impegni e guadagni di conversione.

Ricorso dei video

Durante gli acquisti online, ci aspettiamo di vedere immagini dettagliate del prodotto . Per anni ho iniziato a preferire la navigazione di prodotti che sono integrati da video che mostrano, ad esempio, come utilizzare il prodotto o forse come assemblarlo, o che mostrano casi d'uso reali.

A parte la mia esperienza personale, molte ricerche attestano l'importanza dei contenuti video:

• Il 96% dei consumatori trova i video utili quando prendono decisioni di acquisto online.
• Il 79% degli acquirenti online preferisce guardare un video per informazioni su un prodotto piuttosto che leggere il testo su una pagina web.
• Il video del prodotto giusto può aumentare le conversioni di oltre l'80%.

Parlando della distribuzione di video sul web,

“Il peso medio dei video aumenta notevolmente ogni anno, più sui dispositivi mobili che sui desktop. In alcuni casi, ciò può essere giustificato poiché i dispositivi mobili hanno spesso schermi ad alta risoluzione, ma potrebbe anche essere dovuto alla mancanza di capacità di offrire dimensioni video diverse utilizzando solo l'HTML. Molti video di grandi dimensioni sul Web sono inseriti manualmente nelle pagine di marketing e non dispongono di server multimediali sofisticati per fornire dimensioni appropriate, quindi spero che in futuro vedremo funzionalità HTML semplici simili per la distribuzione di video che vediamo nelle immagini reattive. "

— Scott Jehl

Lo stesso sentimento è stato espresso dallo stato dello streaming del quarto trimestre 2020 di Conviva (registrazione richiesta), che ha rilevato che i telefoni cellulari hanno riscontrato il 20% in più di problemi di buffering , un errore di avvio del video superiore del 19% e un tempo di avvio più lungo del 5% rispetto ad altri dispositivi.

Oltre ai problemi di rendering, la consegna dei video può anche aumentare i costi della larghezza di banda, soprattutto se non è possibile fornire i formati ottimali del browser. Inoltre, se non utilizzi una rete di distribuzione dei contenuti (CDN) o più CDN per mappare gli utenti alle regioni periferiche più vicine per ridurre le latenze, una pratica chiamata routing non ottimale, potresti rallentare l'avvio del video.

Allo stesso modo, le immagini non ottimizzate erano la principale causa di rigonfiamento della pagina. Secondo il Web Almanac, il differenziale nei byte di immagine inviati ai dispositivi mobili o desktop è molto piccolo, il che equivale a un ulteriore spreco di larghezza di banda per i dispositivi che non hanno davvero bisogno di tutti i byte extra.

Senza dubbio, esagerare con un contenuto coinvolgente ma non ottimizzato danneggia gli obiettivi aziendali, ed è qui che entra in gioco l'arte del bilanciamento.

L'arte di bilanciare le prestazioni con i contenuti multimediali

Anche se i rich media possono promuovere il coinvolgimento degli utenti, dobbiamo bilanciare il costo della loro fornitura con le prestazioni del tuo sito Web e gli obiettivi aziendali. Un'alternativa è ospitare e distribuire video tramite terze parti come YouTube o Vimeo.

Nonostante il risparmio di larghezza di banda, tuttavia, tale approccio ha un costo. In qualità di proprietario dei contenuti, non puoi creare un'esperienza con il marchio completamente personalizzata o offrire la personalizzazione. E, naturalmente, devi ospitare e fornire le tue immagini.

Non devi scaricare i tuoi contenuti. Sono disponibili anche altre opzioni. Prendi in considerazione la possibilità di rinnovare il tuo sistema per una distribuzione ottimale dei media procedendo come segue:

Comprendi il tuo attuale utilizzo

Studia il peso delle tue pagine web e le dimensioni delle loro risorse multimediali. L'esperta di ricerca sul Web Tammy Everts consiglia di assicurarsi che le pagine abbiano una dimensione inferiore a 1 MB per dispositivi mobili e meno di 2 MB per tutto il resto. Inoltre, identifica le risorse visualizzate nelle pagine critiche.

Ad esempio, puoi sostituire un paragrafo di testo e le immagini associate con un breve video? In che modo tale decisione influenzerebbe i tuoi obiettivi di business? In questa fase, potrebbe essere necessario rivedere il monitoraggio degli utenti reali (RUM) e le analisi e identificare le pagine critiche che portano a tassi di conversione e coinvolgimento più elevati.

Inoltre, assicurati di tracciare sinteticamente i Core Web Vitals (CWV) di Google come parte del tuo toolkit con strumenti come LightHouse. Puoi anche misurare i CWV attraverso il monitoraggio dell'utente reale (RUM) come CrUX. Poiché i CWV saranno anche un segnale per Google per i crawler, ha senso monitorare e ottimizzare per queste metriche: Largest Contentful Paint (LCP), First Input Delay (FID) e Cumulative Layout Shift (CLS).

Servi il formato giusto

Offri immagini o video nel formato più appropriato in termini di dimensioni e risoluzione per il dispositivo di visualizzazione o il browser. Potrebbe essere necessario un CDN di immagini per tale scopo. In alternativa, crea varianti come WebM, AVIF, JPEG-XL, HEIC, ecc. e servi in ​​modo selettivo il tipo di contenuto corretto in base alle intestazioni User-Agent e Accept.

Per conversioni una tantum, puoi provare strumenti come Squoosh.app o avif.io. Una pratica correlata è convertire GIF animate in video. Per ulteriori informazioni, vedere questo articolo di Web.dev. Vuoi provare a configurare un flusso di lavoro per gestire la pubblicazione di video? Consulta gli ottimi suggerimenti nell'articolo Ottimizzazione del video per dimensioni e qualità.

Servire la giusta dimensione

Oltre il 41% delle immagini sui dispositivi mobili ha dimensioni errate. Quindi, anziché servire una larghezza fissa, ritaglia le tue immagini e i tuoi video per adattarli alle dimensioni del contenitore con strumenti come Lazysizes. Meglio ancora, gli strumenti di intelligenza artificiale in grado di rilevare le aree di interesse durante il ritaglio delle immagini potrebbero farti risparmiare un sacco di tempo e fatica. Puoi anche sfruttare il caricamento lento nativo per le immagini che sono below the fold.

Aggiungi i sottotitoli ai tuoi video

Quasi l'85% dei video viene riprodotto senza audio. L'aggiunta di sottotitoli non solo fornisce un'esperienza accessibile, ma catturerebbe l'attenzione del pubblico e aumenterebbe il coinvolgimento. Tuttavia, la trascrizione di video potrebbe essere un lavoro noioso; puoi lavorare con un servizio di trascrizione basato sull'intelligenza artificiale e migliorarlo invece per automatizzare il flusso di lavoro.

Consegna tramite più CDN

Le CDN possono alleviare la latenza dell'ultimo miglio, ridurre l'ora di inizio di un video e potenzialmente ridurre i problemi di buffering. Secondo uno studio di Citrix, una strategia multi-CDN può ridurre ulteriormente la latenza e offrire una disponibilità continua in caso di interruzioni localizzate nei nodi perimetrali della CDN.

Invece di sfruttare più strumenti discreti, potresti esplorare un prodotto come Media Optimizer di Cloudinary, che ottimizza in modo efficace ed efficiente i media, offrendo il formato e la qualità giusti attraverso nodi edge multi-CDN. In altre parole, Media Optimizer ottimizza sia la qualità che le dimensioni, offrendo un'elevata fedeltà visiva in file di piccole dimensioni.

Rendering progressivo del video

La riproduzione automatica dei video in anteprima su YouTube ha dimostrato di aumentare il tempo di visualizzazione dei video di oltre il 90%. La riproduzione automatica dei video ha pochi vantaggi e molti svantaggi, quindi è importante fare attenzione quando usarlo e quando non usarlo. È importante avere la possibilità di mettere in pausa il video come minimo.

Un buon modo per bilanciare il budget per le dimensioni della pagina sarebbe quello di offrire prima anteprime video create dall'intelligenza artificiale e solo immagini poster , caricando il video completo solo se l'utente fa clic sul video. In questo modo puoi eliminare i download non necessari e accelerare il caricamento delle pagine.

In alternativa, carica un video di anteprima all'inizio e lascia che il lettore riproduca automaticamente la versione completa. Una volta completata l'anteprima, il lettore controlla il tipo di connessione del dispositivo con l'API di connessione di rete e, se l'utente ha una buona connettività, scambia la sorgente dall'anteprima al video effettivo.

Puoi controllare una pagina di esempio per una demo. Ecco un suggerimento : poiché le CDN possono rilevare i tipi di connessione di rete in modo più affidabile, il codice di qualità di produzione potrebbe sfruttare la CDN per rilevare la velocità della rete, in base alla quale il codice client potrebbe caricare progressivamente il video di lunga durata.

Avvolgendo

Lungo la strada, grazie alla sua straordinaria capacità di raccontare storie in un modo che le parole non possono, i media visivi continueranno a essere un elemento dominante per siti Web e app mobili. Tuttavia, la determinazione del contenuto giusto da fornire dipende sia dalla strategia aziendale che dalle prestazioni del sito.

"Un budget di rendimento non guida le tue decisioni su quali contenuti devono essere visualizzati. Piuttosto, si tratta di come scegli di visualizzare quel contenuto. Rimuovere del tutto i contenuti importanti per ridurre il peso di una pagina non è una strategia di rendimento".

— Tim Kadlec

È un buon consiglio da tenere a mente.