Perché non usare le Sliders?

Il seguente tutorial è in parte una traduzione dell'articolo Rethink Sliders And Carousels pubblicato da GTmetrix il 31 marzo 2022.

Usi una slider o un carousel nella tua homepage? Malgrado sia molto diffuso il loro utilizzo, questa tipologia di contenuto non è una soluzione ottimale per il tuo website, vediamo in questo tutorial come mai.

"Potevamo stupirvi con effetti speciali..."

Le gallerie di immagini a scorrimento o i caroselli di prodotti/servizi sono onnipresenti su internet in quanto rappresentano un'ottima funzionalità visiva per le homepage, tuttavia, i proprietari dei siti web ed ecommerce che li usano, trascurano l'impatto negativo sulle prestazioni. In questo tutorial esamineremo e spiegheremo perché consigliamo di rivedere la strategia e di rinunciare a slider e caroselli. La pubblicità degli anni '80 di TELEFUNKEN, recitava "Potevamo stupirvi con effetti speciali..." oggi la maggioranza delle slider è inserita nei siti web senza nessuno scopo se non riempire qualche "buco" con qualcosa di effetto.  

Punti a favore dell'uso delle sliders

Prima di tutto esaminiamo alcuni vantaggi che si ottengono usando una slider di immagini o contenuti nel tuo sitoweb/ecommerce:

  1. Mostrare più titoli chiave nella homepage: per esempio in un quotidiano online possiamo mostrare le principali notizie a scorrimento.
  2. Mostrare più contenuti sulla tua homepage: i contenuti a scorrimento permettono di mostrare più prodotti / servizi in meno spazio. 
  3. Aggiungere movimento alla pagina: questa soluzione è molto gradita dai proprietari dei sitiweb che ritengono di catturare l'attenzione del cliente..

Si tratta di soluzioni molto simili, la seconda modalità è più utilizzata negli ecommerce per mostrare le promozioni di vendita e novità, in una posizione dove siano viste per prime entrando nella homepage. Ovviamente, perché questo utilizzo abbia un senso deve esserci un grafico interno o un servizio che sopperisca alla mancanza che si occupi di realizzare le slider e tenerle costantemente aggiornate. Vedremo anche perché è solo un mito quello di catturare l'attenzione dei clienti con questi contenuti.

Perché dunque non usare le sliders?

Ci sono molti svantaggi nell'uso di sliders, vediamo i più importanti:

1. Impatto sulle prestazioni

Ebbene si, una slider, indipendentemente dal "peso" delle immagini, ha un impatto molto negativo sulle prestazioni. Questo è il più grave degli svantaggi e il motivo principale perché molti come noi sono contrari al loro utilizzo.

a. Perché impattano così tanto? Più richieste, più elementi e più script in esecuzione.

Sliders worsen site performance in general – they usually extend LCP and TBT.

Le sliders e i carousels richiedono CSS aggiuntivi e codice JavaScript per le loro funzionalità, questo comporta un aumento di richieste necessarie per caricare la pagina (immagini, CSS e JavaScript). Più richieste CSS di solito comportano un blocco del rendering maggiore, questo estende un'importante metrica Web Vitals: Largest Contentful Paint (LCP) della tua pagina. Allo stesso tempo i JavaScript hanno un impatto di esecuzione e tutto a carico del browser e del dispositivo che visita il nostro sito. Questo porta un carico eccessivo del thread principale con un impatto del TBT della pagina.

Dunque impattano in genere su due metriche importanti, ovvero LCP e TBT.

Total Blocking Time (TBT)

Alcuno moduli e plug-in che permettono di inserire le sliders nel nostro ecommerce / sitoweb, aggiungono ulteriori problematiche richiedendo in modo ripetuto le immagini e, oltre al tempo necessario al caricamento della pagina, aumentano i costi per i visitatori da dispositivi mobili dove le connessioni sono a consumo di banda. Questo problema incide Lighthouse che non è in grado di determinare il Time to Interactive (TTI) della pagina, in quanto alcuni script continuano a richiedere le immagini. Il problema porta GTmetrix a fallire l'analisi della pagina.

b. Pesanti richieste di risorse above-the-fold*

Se hai un slider sulla tua homepage come punto focale, avrai un effetto negativo sulle prestazioni in quanto il browser del tuo cliente/visitatore deve fare molto lavoro per rendere visibili i vari elementi. Il browser dovrà caricare il CSS per determinare lo stile, caricare le diverse immagini per la visualizzazione e il JS per aggiungere le funzionalità dinamiche, e il tutto in un'area chiave della tua pagina. Tutta l'elaborazione è a carico del dispositivo del visitatore non del vostro server e quindi suscettibile alle prestazioni dello stesso.  Questo porta a un tempo LCP maggiore.

Per slider pieni di animazioni, con immagini multiple e altri effetti speciali (come quelle realizzabili con Slider Revolution) possono portare a un notevole peggioramento della metrica Largest Contentful Paint (LCP) soprattutto in mobile essendo l'elaborazione tutta a carico del browser del visitare e delle risorse CPU e HW del suo Smartphone/Tablet.

*) Above the fold è la parte superiore della pagina web, visibile da subito all'utente senza necessità di usare la barra di scorrimento.

2. Le Sliders sono veramente efficaci?

Anche se puoi accettare il decadimento delle prestazioni e il mancato rispetto delle metriche Web Vitals (e non dovresti farlo), le sliders al contrario di quanto si pensi, non sono il metodo più efficace per mostrare i contenuti, vediamo il perché:

a. Mancanza di coinvolgimento

I contenuti a scorrimento offrono praticamente un coinvolgimento minimo o nullo dopo la prima diapositiva.

Slider click through rate on the Notre Dame school website Source: Erik Runyon

Questo dato è possibile recuperarlo dall'analisi delle statistiche sui click ricevuti dalla varie slide. GTmetrix porta l'esempio del Notre Dame school website. Anche se si considerano le prime diapositive, gli studi dimostrano che gli utenti interagiscono molto poco con le slide, come evidenziato dalle percentuali di click estremamente basse.

b. Mancanza di chiarezza e frustrazione dell'utente

Più diapositive non sono la soluzione migliore per mostrare le promozioni o le proposte importanti. Troppo spesso vediamo sliders che contengono troppi messaggi e non è possibile riuscire a mettere a fuoco l'offerta. Inoltre, possono togliere il controllo al visitatore - soprattutto quando sono a riproduzione automatica - spesso la durata tra la prima slide e la successiva è troppo breve per il visitatore e il tuo messaggio viene perso. 

Troppi messaggi e troppo poco tempo tra le diapositive possono far sì che gli utenti ignorino completamente le sliders. Le sliders  non hanno una struttura di navigazione universale (alcune usano frecce, altre usano punti, alcune richiedono scorrimento, altre sono prive di navigazione), questo porta a gli utenti a ignorarle anche quando è possibile navigare tra le stesse o stopparle con il mouse.

C. Alcuni visitatori ignorano le informazioni presentate nei banner

Banner Blindness, è un termine utilizzato per descrivere il comportamento dei visitatori che ignorano volutamente le informazioni presenti nei banner in quanto sono scambiati per annunci pubblicitari (ads). L'utilizzo di un immagine statica, al posto di una sliders riesce a trasmettere in modo più efficace il tuo messaggio.

D. Accessibilità ridotta

Questo è un tema molto trascurato, con le slide si può ridurre l'accessibilità ad alcuni visitatori, a seconda del tipo di modulo o plug-in utilizzato, le slide potrebbero spostarsi troppo velocemente per i visitatori con scarsa alfabetizzazione, mobilità ridotta o ipovedenti. 

Un'immagine statica è più efficace in quanto la mancanza di movimento non crea gli stessi problemi e i visitatori possono prendersi il loro tempo per leggere e cogliere il contenuto presentato al proprio ritmo.

3.Problemi con dispositivi mobile

Tutti i problemi relativi all'utilizzo di sliders su desktpo sono presenti anche sui dispositivi mobili. Alcuni problemi come l'impatto sulle prestazioni, possono essere anche maggiori a causa dell'hardware meno potente e delle dimensioni inferiori degli schermi. 

Slider images with text embedded may render the text illegible on mobile screens.

Si aggiungono ulteriori problemi se non si segue un design responsive, anche facendolo spesso si è obbligati a creare due sliders distinte aumentando il lavoro necessario per la produzione e mantenimento delle stesse. Il ridimensionamento delle immagini delle slide in mobile può rendere il testo illeggibile per le ridotte dimensioni.

4.Impatto sulla SEO

Ci sono due ragioni principale per cui le slider possono influenzare il posizionamento SEO del tuo ecommerce / sitoweb.

  • Se la slider contiene del testo i motori di ricerca non possono eseguirne la scansione.
  • Il peggioramento delle prestazioni ha un impatto sulle metriche Web Viltas.

Google utilizza Web Vitals come uno dei tanti segnali nel proprio algoritmo di posizionamento sui motori di ricerca.

Se i Web Vitals del tuo sito non sono abbastanza buoni, il posizionamento sui motori di ricerca potrebbe risentirne, con conseguente potenziale riduzione del traffico del sito e meno coinvolgimento/conversioni.

Conclusioni

Come abbiamo visto le sliders non sono un metodo efficacie per mostrare i contenuti e le nostre offerte. Contrariamente a quanto si pensi le analisi statistiche e gli studi su di esse, hanno mostrato che non coinvolgono l'utente che spesso ha dalle stesse una pessima esperienza di navigazione. 

Visti gli svantaggi che le sliders comportano è necessario pensare ad alternative. Concordiamo con l'analisi di GTmetrix più volte abbiamo sostenuto in modo oggettivo l'inutilità delle stesse e lo svantaggio di utilizzarle. Dello stesso avviso anche WP ROCKET uno dei migliori sistemi di Cache per WordPress.

GTmetrix propone ulteriori articoli per approfondire l'argomento, alcuni a favore delle slider a alcuni contro.

Nel caso specifico di un ecommerce in PrestaShop o altra piattaforma, sconsigliamo l'uso delle slide e caroselli, in quanto le problematiche delle stesse distolgono l'attenzione e riducono le conversioni, non ultimo un sistema ecommerce è già molto complesso da ottimizzare nei tempi di caricamento e non necessita di ulteriori JavaScript o CSS che potrebbero addirittura entrare in conflitto con quelli necessari per la gestione del carrello. 

Autore: Loris Modena

SENIOR DEVELOPER

Per Ind Loris Modena titolare di Arte e Informatica, inizia a lavorare nel settore informatico nel 1989 quale sistemista addetto alla manutenzione e installazione di sistemi informatici. Inizia a programmare per il web nel 1997 occupandosi di programmazione CGI in PERL e successivamente passando alla programmazione in PHP e JavaScript. In questo periodo si avvicina al mondo Open source e alla gestione di server Linux. 

prodotto aggiunto alla lista