Best practice per i caroselli

Ottimizza le prestazioni e l'usabilità dei caroselli.

Katie Hempenius

Un carosello è un componente dell'esperienza utente che mostra i contenuti in modo simile a una presentazione. I caroselli possono essere riprodotti automaticamente o essere esplorati manualmente dagli utenti. Anche se i caroselli possono essere utilizzati altrove, sono utilizzati più spesso per visualizzare immagini, prodotti e promozioni sulle home page.

Questo articolo illustra le best practice relative a rendimento e UX per i caroselli.

Rendimento

Un carosello ben implementato, di per sé, dovrebbe avere un impatto minimo o nullo sulle prestazioni. Tuttavia, i caroselli spesso contengono asset multimediali di grandi dimensioni. Asset di grandi dimensioni possono influire sul rendimento indipendentemente dal fatto che vengano visualizzati in un carosello o altrove.

• LCP (Largest Contentful Paint)

  I caroselli di grandi dimensioni above the fold contengono spesso l'elemento LCP della pagina e, pertanto, possono avere un impatto significativo sulla metrica LCP. In questi scenari, l'ottimizzazione del carosello può migliorare notevolmente il valore LCP. Per una spiegazione approfondita di come funziona la misurazione LCP sulle pagine contenenti caroselli, consulta la sezione Misurazione LCP per i caroselli.

• INP (Interaction to Next Paint)

  I caroselli hanno requisiti JavaScript minimi e, pertanto, non dovrebbero influire sulla reattività delle pagine. Se scopri che il carosello del tuo sito ha script da molto tempo, ti consigliamo di sostituire gli strumenti per il carosello.

• CLS (Cumulative Layout Shift)

  Un numero sorprendente di caroselli utilizza animazioni non composte e scadenti che possono contribuire alla metrica CLS. Nelle pagine con caroselli a riproduzione automatica, ciò può causare una CLS infinita. Questo tipo di CLS in genere non è evidente all'occhio umano, il che rende il problema facile da trascurare. Per evitare questo problema, evita di utilizzare animazioni non composte nel carosello (ad esempio durante le transizioni delle slide).

Best practice per il rendimento

Carica contenuti carosello tramite HTML

I contenuti del carosello devono essere caricati tramite il markup HTML della pagina in modo che siano rilevabili dal browser nelle prime fasi del processo di caricamento della pagina. L'utilizzo di JavaScript per avviare il caricamento dei contenuti del carosello è probabilmente l'errore di prestazioni più grande da evitare quando si utilizzano i caroselli. Questo ritarda il caricamento delle immagini e può influire negativamente sulla metrica LCP.

<div class="slides">
  <img src="https://example.com/cat1.jpg">
  <img src="https://example.com/cat2.jpg">
  <img src="https://example.com/cat3.jpg">
</div>

const slides = document.querySelector(".slides");
const newSlide = document.createElement("img");
newSlide.src = "htttp://example.com/cat1.jpg";
slides.appendChild(newSlide);

Per l'ottimizzazione avanzata del carosello, valuta la possibilità di caricare la prima slide in modo statico, quindi di migliorarla progressivamente per includere controlli di navigazione e contenuti aggiuntivi. Questa tecnica è applicabile soprattutto agli ambienti in cui l'utente attira l'attenzione prolungata, concedendo così tempo aggiuntivo per il caricamento dei contenuti. In ambienti come le home page, in cui gli utenti possono rimanere nei paraggi solo per un secondo o due, caricare solo una singola immagine può essere efficace.

Evita variazioni del layout

Le transizioni delle slide e i controlli di navigazione sono le due fonti più comuni di variazioni del layout nei caroselli:

• Transizioni delle slide: le variazioni di layout che si verificano durante le transizioni delle slide sono generalmente causate dall'aggiornamento delle proprietà degli elementi DOM che portano il layout. Esempi di alcune di queste proprietà includono: left, top, width e marginTop. Per evitare variazioni del layout, utilizza la proprietà CSS transform per eseguire la transizione di questi elementi. Questa demo mostra come utilizzare transform per creare un carosello di base.

• Controlli di navigazione: lo spostamento o l'aggiunta/rimozione dei controlli di navigazione del carosello dal DOM possono causare variazioni del layout a seconda di come vengono implementate queste modifiche. I caroselli che mostrano questo comportamento in genere lo fanno in risposta al passaggio del mouse sopra l'utente.

Di seguito sono riportati alcuni dei punti di confusione più comuni riguardanti la misurazione CLS per i caroselli:

• Caroselli con riproduzione automatica: le transizioni delle slide sono la fonte più comune di variazioni del layout relative ai caroselli. In un carosello non a riproduzione automatica, queste variazioni di layout si verificano generalmente entro 500 ms da un'interazione dell'utente e pertanto non vengono conteggiate ai fini della metrica Cumulative Layout Shift (CLS). Tuttavia, per i caroselli a riproduzione automatica, queste variazioni del layout non solo possono essere conteggiate ai fini del CLS, ma possono anche ripetersi all'infinito. Pertanto, è particolarmente importante verificare che un carosello a riproduzione automatica non sia una fonte di variazioni del layout.

• Scorrimento: alcuni caroselli consentono agli utenti di scorrere le slide. Se la posizione iniziale di un elemento cambia, ma l'offset di scorrimento (ossia, scrollLeft o scrollTop) cambia della stessa misura (ma nella direzione opposta), questa non viene considerata una variazione del layout, a condizione che si trovi nello stesso frame.

Per ulteriori informazioni sulle variazioni del layout, consulta Eseguire il debug delle variazioni del layout.

Usare tecnologie moderne

Molti siti utilizzano librerie JavaScript di terze parti per implementare i caroselli. Se al momento utilizzi strumenti carosello meno recenti, potresti riuscire a migliorare le prestazioni passando a strumenti più recenti. Gli strumenti più recenti tendono a utilizzare API più efficienti e hanno meno probabilità di richiedere dipendenze aggiuntive, come jQuery.

Tuttavia, a seconda del tipo di carosello che stai creando, potresti non aver bisogno di JavaScript. La nuova API Scorri Snap consente di implementare transizioni in stile carosello utilizzando solo HTML e CSS.

Di seguito sono riportate alcune risorse sull'utilizzo di scroll-snap che potresti trovare utili:

• Creazione di un componente Storie (web.dev)
• Stili web di nuova generazione: scatto di scorrimento (web.dev)
• Carosello solo CSS (trucchi CSS)
• Come creare un carosello solo CSS (trucchi CSS)

Ottimizza i contenuti del carosello

I caroselli spesso contengono alcune delle immagini più grandi di un sito, quindi vale la pena assicurarti che queste immagini siano completamente ottimizzate. Scegliere il formato e il livello di compressione giusti per le immagini, utilizzare una CDN per le immagini e utilizzare srcset per pubblicare più versioni delle immagini sono tutte tecniche in grado di ridurre le dimensioni di trasferimento delle immagini.

Misurazione del rendimento

Questa sezione illustra la misurazione LCP in relazione ai caroselli. Sebbene i caroselli non vengano trattati in modo diverso da qualsiasi altro elemento UX durante il calcolo LCP, il meccanismo di calcolo dell'LCP per i caroselli a riproduzione automatica è un punto di confusione comune.

Misurazione LCP per i caroselli

Ecco i punti chiave per capire come funziona il calcolo del valore LCP per i caroselli:

• La metrica LCP considera gli elementi della pagina quando sono dipinti sul frame. I nuovi candidati per l'elemento LCP non vengono più considerati una volta che l'utente interagisce (tocco, scorrimento o pressione dei tasti) con la pagina. Pertanto, qualsiasi slide di un carosello a riproduzione automatica può essere l'elemento LCP finale, mentre in un carosello statico solo la prima slide potrebbe essere un potenziale candidato LCP.
• Se vengono visualizzate due immagini di dimensioni uguali, la prima immagine verrà considerata l'elemento LCP. L'elemento LCP viene aggiornato solo quando il candidato LCP è più grande dell'elemento LCP corrente. Pertanto, se tutti gli elementi del carosello hanno dimensioni uguali, l'elemento LCP deve essere la prima immagine visualizzata.
• Nel valutare i candidati LCP, la metrica LCP considera la "dimensione visibile o la dimensione intrinseca, a seconda di quale delle due opzioni è minore". Pertanto, se un carosello con riproduzione automatica mostra immagini di dimensioni coerenti, ma contiene immagini di dimensioni intrinseche diverse più piccole di quelle di visualizzazione, l'elemento LCP potrebbe cambiare quando vengono visualizzate nuove slide. In questo caso, se tutte le immagini vengono visualizzate nelle stesse dimensioni, l'immagine con la dimensione intrinseca più grande verrà considerata l'elemento LCP. Per mantenere un valore LCP basso, devi assicurarti che tutti gli elementi in un carosello con riproduzione automatica abbiano le stesse dimensioni intrinseche.

Modifiche al calcolo del valore LCP per i caroselli in Chrome 88

A partire da Chrome 88, le immagini che vengono in seguito rimosse dal DOM sono considerate potenziali colori con contenuti più grandi. Prima di Chrome 88, queste immagini venivano escluse dalla considerazione. Per i siti che utilizzano caroselli con riproduzione automatica, questa modifica della definizione avrà un impatto neutro o positivo sui punteggi LCP.

Questa modifica è stata apportata in risposta all'osservazione che molti siti implementano le transizioni del carosello rimuovendo l'immagine visualizzata in precedenza dall'albero DOM. Prima di Chrome 88, ogni volta che veniva presentata una nuova slide, la rimozione dell'elemento precedente attivava un aggiornamento LCP. Per definizione, questa modifica interessa solo i caroselli a riproduzione automatica. Le potenziali visualizzazioni con contenuti di maggiori dimensioni possono verificarsi solo prima che un utente interagisca per la prima volta con la pagina.

Modifiche alle soglie in Chrome 121

Chrome 121 ha modificato il comportamento delle immagini a scorrimento orizzontale come i caroselli. Queste soglie ora utilizzano le stesse soglie dello scorrimento verticale. Ciò significa che, nel caso d'uso del carosello, le immagini verranno caricate prima di essere visibili nell'area visibile. Ciò significa che il caricamento dell'immagine ha meno probabilità di essere visibile all'utente, ma a un costo maggiore di download. Utilizza la demo del caricamento lento orizzontale per confrontare il comportamento in Chrome rispetto a Safari e Firefox.

Altre considerazioni

Questa sezione descrive le best practice relative a UX e prodotti che devi tenere a mente quando implementi i caroselli. I caroselli devono migliorare i tuoi obiettivi commerciali e presentare contenuti in modo che siano facili da esplorare e da leggere.

Best practice per la navigazione

Fornisci controlli di navigazione in evidenza

I controlli di navigazione del carosello devono essere facili da selezionare e altamente visibili. Questo è qualcosa che viene fatto raramente bene, la maggior parte dei caroselli dispone di controlli di navigazione sia piccoli che discreti. Tieni presente che raramente il controllo di navigazione può funzionare con un solo colore o stile. Ad esempio, una freccia chiaramente visibile su uno sfondo scuro potrebbe essere difficile da vedere su uno sfondo chiaro.

Indica l'avanzamento della navigazione

I controlli di navigazione del carosello devono fornire contesto sul numero totale di slide e sui progressi dell'utente nelle slide. Queste informazioni consentono all'utente di passare più facilmente a una determinata slide e di capire quali contenuti sono già stati visualizzati. In alcuni casi, fornire un'anteprima dei contenuti di prossima uscita, che si tratti di un estratto della slide successiva o di un elenco di miniature, può essere utile e aumentare il coinvolgimento.

Supporto dei gesti su dispositivi mobili

Sui dispositivi mobili, i gesti di scorrimento dovrebbero essere supportati oltre ai controlli di navigazione tradizionali (come i pulsanti sullo schermo).

Fornisci percorsi di navigazione alternativi

Poiché è improbabile che la maggior parte degli utenti interagisca con tutti i contenuti del carosello, i contenuti a cui si collega il carosello devono essere accessibili da altri percorsi di navigazione.

Best practice relative alla leggibilità

Non usare la riproduzione automatica

L'uso della riproduzione automatica crea due problemi quasi paradossali: le animazioni sullo schermo tendono a distrarre gli utenti e ad allontanare lo sguardo dai contenuti più importanti e, poiché gli utenti spesso associano le animazioni agli annunci, ignorano i caroselli a riproduzione automatica.

Pertanto, è raro che la riproduzione automatica sia una buona scelta. Se i contenuti sono importanti, il mancato utilizzo della riproduzione automatica ne massimizzerà l'esposizione; se i contenuti del carosello non sono importanti, l'uso della riproduzione automatica disattiverà i contenuti più importanti. Inoltre, i caroselli a riproduzione automatica possono essere difficili da leggere (e anche fastidiosi). Le persone leggono a velocità diverse, quindi è raro che un carosello passi in modo coerente al momento "giusto" per utenti diversi.

Idealmente, la navigazione nelle slide deve essere indirizzata dall'utente tramite i controlli di navigazione. Se devi utilizzare la riproduzione automatica, questa funzionalità deve essere disattivata al passaggio del mouse. Inoltre, il tasso di transizione delle slide dovrebbe tenere conto dei contenuti delle slide: maggiore è la quantità di testo che una slide contiene, più a lungo dovrebbe essere visualizzato sullo schermo.

Mantieni separati testo e immagini

I contenuti testuali del carosello sono spesso integrati nel file immagine corrispondente, invece di essere visualizzati separatamente usando il markup HTML. Questo approccio è dannoso per l'accessibilità, la localizzazione e i tassi di compressione. Inoltre, incoraggia un approccio unico per tutti alla creazione degli asset. Tuttavia, la stessa formattazione di immagini e testo è raramente equamente leggibile nei formati desktop e mobile.

Usa titoli concisi

Hai solo una frazione di secondo per attirare l'attenzione di un utente. Un testo breve e preciso aumenta le probabilità che il tuo messaggio venga trasmesso.

Best practice per i prodotti

I caroselli funzionano bene in situazioni in cui non è possibile utilizzare ulteriore spazio verticale per visualizzare contenuti aggiuntivi. I caroselli sulle pagine dei prodotti sono spesso un buon esempio di questo caso d'uso.

Tuttavia, i caroselli non vengono sempre utilizzati in modo efficace.

• I caroselli, in particolare se contengono promozioni o avanzano automaticamente, sono facilmente sbagliati nella pubblicità da parte degli utenti. Gli utenti tendono a ignorare la pubblicità, un fenomeno noto come invisibilità dei banner.
• I caroselli vengono spesso utilizzati per placare più reparti ed evitare di prendere decisioni sulle priorità aziendali. Di conseguenza, i caroselli possono trasformarsi facilmente in uno spreco di contenuti inefficaci.

Verifica le tue ipotesi

Deve essere valutato e testato l'impatto commerciale dei caroselli, in particolare di quelli sulle home page. Le percentuali di clic del carosello possono aiutarti a determinare l'efficacia di un carosello e dei suoi contenuti.

Pertinenza

I caroselli funzionano meglio quando includono contenuti interessanti e pertinenti che presentano un contesto chiaro. Se i contenuti non coinvolgono un utente al di fuori di un carosello, il loro posizionamento in un carosello non migliora il rendimento. Se devi utilizzare un carosello, dai la priorità ai contenuti e assicurati che ogni slide sia sufficientemente pertinente per far sì che un utente voglia passare alla diapositiva successiva.