Best practice per i caroselli

Ottimizza i caroselli per migliorare il rendimento e l'usabilità.

Katie Hempenius

Un carosello è un componente UX 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, vengono utilizzati più spesso per mostrare immagini, prodotti e promozioni sulle home page.

Questo articolo illustra le best practice per il rendimento e l'esperienza utente per i caroselli.

Prestazioni

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

• LCP (Largest Contentful Paint)

  Le gallerie grandi sopra la piega spesso contengono l'elemento LCP della pagina e quindi possono avere un impatto significativo su LCP. In questi casi, l'ottimizzazione del carosello può migliorare notevolmente il tempo di caricamento della pagina. Per una spiegazione approfondita del funzionamento della misurazione LCP nelle 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à della pagina. Se scopri che il carosello del tuo sito ha script che richiedono molto tempo, ti consigliamo di sostituire gli strumenti del carosello.

• CLS (Cumulative Layout Shift)

  Un numero sorprendente di caroselli utilizza animazioni non composite e tremolanti che possono contribuire al CLS. Nelle pagine con caroselli in riproduzione automatica, questo potrebbe causare un valore CLS infinito. Questo tipo di CLS in genere non è visibile all'occhio umano, il che rende il problema facile da trascurare. Per evitare questo problema, non utilizzare animazioni non composite nel carosello (ad esempio durante le transizioni tra le diapositive).

Best practice per le prestazioni

Caricare i contenuti del carosello utilizzando HTML

I contenuti del carosello devono essere caricati tramite il markup HTML della pagina in modo che siano rilevabili dal browser all'inizio del processo di caricamento della pagina. L'utilizzo di JavaScript per avviare il caricamento dei contenuti dei caroselli è probabilmente l'errore più grave che può influire sul rendimento dei caroselli. Ciò ritarda il caricamento delle immagini e può influire negativamente sul valore 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, ti consigliamo di caricare la prima diapositiva in modo statico, poi di migliorarla progressivamente in modo da includere i controlli di navigazione e contenuti aggiuntivi. Questa tecnica è più adatta agli ambienti in cui hai l'attenzione prolungata di un utente, in modo da dare il tempo di caricare i contenuti aggiuntivi. In ambienti come le home page, in cui gli utenti potrebbero rimanere solo per un paio di secondi, il caricamento di una sola immagine potrebbe essere altrettanto efficace.

Evita variazioni di layout

Le transizioni tra le diapositive e i controlli di navigazione sono le due cause più comuni di variazioni del layout nei caroselli:

• Transizioni tra le diapositive:le variazioni del layout che si verificano durante le transizioni tra le diapositive sono solitamente causate dall'aggiornamento delle proprietà che determinano il layout degli elementi DOM. Ecco alcuni esempi di queste proprietà: 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: spostare o aggiungere/rimuovere i controlli di navigazione del carosello dal DOM può causare variazioni del layout a seconda di come vengono implementate queste modifiche. I caroselli che presentano questo comportamento lo fanno in genere in risposta al passaggio del mouse dell'utente.

Di seguito sono riportati alcuni dei punti di confusione comuni relativi alla misurazione del CLS per i caroselli:

• Carousel con riproduzione automatica: le transizioni tra le diapositive sono la fonte più comune di variazioni del layout relative ai caroselli. In un carosello senza riproduzione automatica, queste variazioni di layout si verificano in genere entro 500 ms da un'interazione dell'utente e di conseguenza non vengono conteggiate ai fini del calcolo della metrica CLS (Cumulative Layout Shift). Tuttavia, per i caroselli con riproduzione automatica, non solo questi cambiamenti di layout possono potenzialmente essere conteggiati ai fini del CLS, ma possono anche ripetersi all'infinito. Pertanto, è particolarmente importante verificare che un carosello con riproduzione automatica non sia fonte di cambiamenti di layout.

• Scorrimento: alcuni caroselli consentono agli utenti di utilizzare lo scorrimento per passare da una diapositiva all'altra. Se la posizione iniziale di un elemento cambia, ma l'offset di scorrimento (ovvero scrollLeft o scrollTop) varia della stessa quantità (ma nella direzione opposta), non si tratta di un spostamento del layout, a condizione che si verifichi nello stesso frame.

Per ulteriori informazioni sui cambiamenti di layout, consulta Eseguire il debug dei cambiamenti di layout.

Utilizza una tecnologia moderna

Molti siti utilizzano librerie JavaScript di terze parti per implementare i caroselli. Se al momento utilizzi strumenti per i caroselli meno recenti, potresti essere in grado di 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 Scroll Snap consente di implementare transizioni simili a quelle dei caroselli utilizzando solo HTML e CSS.

Ecco alcune risorse sull'utilizzo di scroll-snap che potrebbero esserti utili:

• Creare un componente di Storie (web.dev)
• Stili web di nuova generazione: snap scorrevole (web.dev)
• Carousel solo CSS (CSS Tricks)
• Come creare un carosello solo CSS (CSS Tricks)

Ottimizzare i contenuti del carosello

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

Misurazione del rendimento

Questa sezione illustra la misurazione della LCP in relazione ai caroselli. Sebbene i caroselli non vengano trattati in modo diverso rispetto a qualsiasi altro elemento dell'esperienza utente durante il calcolo del tempo di caricamento della pagina più lungo, la procedura di calcolo del tempo di caricamento della pagina più lungo per i caroselli con riproduzione automatica è spesso fonte di confusione.

Misurazione LCP per i caroselli

Di seguito sono riportati i punti chiave per comprendere il funzionamento del calcolo dell'LCP per i caroselli:

• LCP prende in considerazione gli elementi della pagina man mano che vengono visualizzati nel frame. I nuovi candidati per l'elemento LCP non vengono più presi in considerazione quando l'utente interagisce con la pagina (tocchi, scorrimenti o pressioni dei tasti). Pertanto, qualsiasi diapositiva di un carosello con riproduzione automatica ha il potenziale per essere l'elemento LCP finale, mentre in un carosello statico solo la prima diapositiva sarebbe un potenziale candidato LCP.
• Se vengono visualizzate due immagini di dimensioni uguali, la prima verrà considerata come elemento LCP. L'elemento LCP viene aggiornato solo quando l'elemento LCP candidato è più grande dell'elemento LCP corrente. Pertanto, se tutti gli elementi del carosello hanno le stesse dimensioni, l'elemento LCP dovrebbe essere la prima immagine visualizzata.
• Durante la valutazione dei candidati LCP, LCP prende in considerazione la "dimensione visibile o la dimensione intrinseca, a seconda del valore più piccolo". Pertanto, se un carosello con riproduzione automatica mostra immagini con dimensioni coerenti, ma contiene immagini di dimensioni intrinseche diverse inferiori alle dimensioni di visualizzazione, l'elemento LCP potrebbe cambiare man mano che vengono visualizzate nuove diapositive. In questo caso, se tutte le immagini vengono visualizzate con le stesse dimensioni, l'immagine con le dimensioni intrinseche più grandi verrà considerata come elemento LCP. Per mantenere basso il valore LCP, devi assicurarti che tutti gli elementi di un carosello con riproduzione automatica abbiano le stesse dimensioni intrinseche.

Modifiche al calcolo del tempo di caricamento percepito (LCP) per i caroselli in Chrome 88

A partire da Chrome 88, le immagini che vengono successivamente rimosse dal DOM sono considerate potenziali elementi più grandi con contenuti. Prima di Chrome 88, queste immagini erano 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 seguito 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 diapositiva, la rimozione dell'elemento precedente attivava un aggiornamento dell'LCP. Questa modifica interessa solo i caroselli con riproduzione automatica: per definizione, le potenziali letture più grandi con contenuti 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 con scorrimento orizzontale, come i caroselli. Ora utilizzano le stesse soglie dello scorrimento verticale. Ciò significa che, per il caso d'uso del carosello, le immagini verranno caricate prima di essere visibili nel viewport. Ciò significa che il caricamento delle immagini è meno probabile che venga notato dall'utente, ma a costo di un maggior numero di download. Utilizza la demo del caricamento lento orizzontale per confrontare il comportamento in Chrome rispetto a Safari e Firefox.

Altre considerazioni

Questa sezione illustra le best practice per l'esperienza utente e i prodotti da tenere presenti prilikom implementacije karusela. I caroselli devono promuovere i tuoi obiettivi commerciali e presentare i contenuti in modo che siano facili da navigare e leggere.

Best practice per la navigazione

Fornire controlli di navigazione ben visibili

I controlli di navigazione del carosello devono essere facili da fare clic e molto visibili. Si tratta di un aspetto raramente realizzato bene: la maggior parte dei caroselli ha controlli di navigazione piccoli e poco evidenti. Tieni presente che un singolo colore o stile di controllo di navigazione raramente funziona in tutte le situazioni. Ad esempio, una freccia ben visibile su uno sfondo scuro potrebbe essere difficile da vedere su uno sfondo chiaro.

Indicare l'avanzamento della navigazione

I controlli di navigazione del carosello devono fornire il contesto relativo al numero totale di diapositive e all'avanzamento dell'utente. Queste informazioni consentono all'utente di accedere più facilmente a una determinata diapositiva e di capire quali contenuti sono stati già visualizzati. In alcuni casi, fornire un'anteprima dei contenuti imminenti, che si tratti di un estratto della diapositiva successiva o di un elenco di miniature, può essere utile e aumentare il coinvolgimento.

Supporta i gesti da dispositivo mobile

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

Fornire percorsi di navigazione alternativi

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

Best practice per la leggibilità

Non utilizzare la riproduzione automatica

L'uso della riproduzione automatica crea due problemi quasi paradossali: le animazioni sullo schermo tendono a distrarre gli utenti e distogliere l'attenzione dai contenuti più importanti; contemporaneamente, poiché gli utenti associano spesso le animazioni agli annunci, ignoreranno i caroselli con riproduzione automatica.

Pertanto, è raro che la riproduzione automatica sia una buona scelta. Se i contenuti sono importanti, la mancata attivazione della riproduzione automatica ne massimizza l'esposizione. Se i contenuti del carosello non sono importanti, l'uso della riproduzione automatica distoglie l'attenzione dai contenuti più importanti. Inoltre, i caroselli con riproduzione automatica possono essere difficili da leggere (e anche fastidiosi). Le persone leggono a velocità diverse, quindi è raro che un carosello effettui transizioni in modo coerente al momento "giusto" per utenti diversi.

Idealmente, la navigazione tra le diapositive dovrebbe essere diretta dall'utente tramite i controlli di navigazione. Se devi utilizzare la riproduzione automatica, questa deve essere disattivata quando l'utente passa il mouse sopra il video. Inoltre, la frequenza di transizione delle diapositive deve tenere conto dei contenuti delle diapositive: più testo contiene una diapositiva, più a lungo deve essere visualizzata sullo schermo.

Mantieni separati testo e immagini

I contenuti di testo del carosello vengono spesso "incorporati" nel file immagine corrispondente, anziché essere visualizzati separatamente utilizzando il markup HTML. Questo approccio è negativo per l'accessibilità, la localizzazione e i tassi di compressione. Inoltre, incoraggia un approccio unico per tutti alla creazione di asset. Tuttavia, raramente la stessa formattazione di testo e immagini è ugualmente leggibile sui formati desktop e mobile.

Essere conciso

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

Best practice per i prodotti

I caroselli sono utili in situazioni in cui non è possibile utilizzare spazio verticale aggiuntivo per visualizzare contenuti aggiuntivi. I caroselli nelle 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, vengono facilmente confusi per annunci dagli utenti. Gli utenti tendono a ignorare gli annunci, un fenomeno noto come cecità ai banner.
• I caroselli vengono spesso utilizzati per accontentare più reparti ed evitare di prendere decisioni sulle priorità aziendali. Di conseguenza, i caroselli possono facilmente diventare un ricettacolo di contenuti inefficaci.

Verificare le ipotesi

L'impatto commerciale dei caroselli, in particolare quelli sulle home page, deve essere valutato e testato. Il tasso di clic dei caroselli può aiutarti a determinare se un carosello e i relativi contenuti sono efficaci.

Pertinenza

I caroselli funzionano al meglio quando contengono contenuti interessanti e pertinenti presentati in un contesto chiaro. Se i contenuti non coinvolgono un utente al di fuori di un carousel, inserirli in un carosello non migliorerà il loro rendimento. Se devi usare un carosello, dai la priorità ai contenuti e assicurati che ogni diapositiva sia sufficientemente pertinente da indurre un utente a fare clic per passare alla diapositiva successiva.