Best practice per i caroselli

Ottimizza i caroselli per prestazioni e usabilità.

Katie Hempenius

Un carosello è un componente UX che visualizza i contenuti in modo simile a una presentazione. I caroselli possono essere riprodotti automaticamente o essere navigati manualmente dagli utenti. Sebbene i caroselli possono essere utilizzati altrove, sono usati con maggiore frequenza per visualizzare immagini, prodotti e promozioni sulle home page.

Questo articolo illustra le best practice sulle prestazioni e sull'esperienza utente per i caroselli.

Prestazioni

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

• LCP (Largest Contentful Paint)

  I caroselli above the fold di grandi dimensioni contengono spesso l'elemento LCP della pagina, mentre può avere un impatto significativo sulla metrica LCP. In questi scenari, l'ottimizzazione del carosello può migliorare in modo significativo l'LCP. Per un approfondimento spiegazione del funzionamento della misurazione LCP nelle pagine contenenti caroselli, consulta la sezione Misurazione LCP per i caroselli .

• INP (Interazione con Next Paint)

  I caroselli hanno requisiti JavaScript minimi e, di conseguenza, non influire sulla reattività delle pagine. Se scopri che il carosello del sito contiene a lunga esecuzione, ti consigliamo di sostituire gli strumenti del carosello.

• CLS (Cumulative Layout Shift)

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

Best practice per le prestazioni

Carica i contenuti del carosello tramite HTML

I contenuti del carosello devono essere caricati tramite il markup HTML della pagina in modo che rilevabili dal browser nelle prime fasi del processo di caricamento della pagina. Utilizzo di JavaScript per il caricamento dei contenuti di un carosello è probabilmente la più grande di prestazioni da evitare quando si utilizzano i caroselli. Questo ritarda il caricamento delle immagini possono avere un impatto negativo su LCP.

Cosa fare

<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>

Cosa non fare

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

Per un'ottimizzazione avanzata del carosello, valuta la possibilità di caricare la prima slide in modo statico, migliorandolo progressivamente per includere i controlli di navigazione e contenuti. Questa tecnica è applicabile soprattutto agli ambienti in cui è presente l'attenzione prolungata dell'utente; questo determina il tempo di caricamento dei contenuti aggiuntivi. Nella come le home page, dove gli utenti possono restare sui siti solo per un secondo due, può essere altrettanto efficace caricare una sola immagine.

Evita variazioni del layout

Nota: su Chrome 88-90 è stata fornita una serie di correzioni di bug relative al modo in cui vengono calcolate le variazioni del layout. Molte di queste correzioni di bug sono relative ai caroselli. A seguito di queste correzioni, i siti dovrebbero aspettarsi di vedere punteggi di variazione del layout relativi al carosello più bassi nelle versioni successive di Chrome.

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

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

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

Questi sono alcuni dei comuni punti di confusione riguardo alla misurazione della CLS per caroselli:

• Caroselli con riproduzione automatica: le transizioni delle slide sono la fonte più comune di variazioni del layout correlate al carosello. In un carosello non a riproduzione automatica, queste variazioni del layout si verificano in genere entro 500 ms da un'interazione dell'utente e di conseguenza non contano verso Cumulative Layout Shift (CLS). Tuttavia, per i caroselli con riproduzione automatica, non solo queste variazioni del layout possono essere conteggiate verso CLS, ma possono anche ripetersi all'infinito. Pertanto, è particolarmente è importante verificare che un carosello con riproduzione automatica non sia una fonte di layout senza interruzioni.

• Scorrimento:alcuni caroselli consentono agli utenti di utilizzare lo scorrimento per navigare tra i contenuti. slide carosello. Se la posizione iniziale di un elemento cambia, ma il relativo offset di scorrimento (ovvero scrollLeft o scrollTop) variazioni dello stesso valore (ma nella direzione opposta) non si tratta considerata una variazione del layout, purché si verifichino nello stesso frame.

Per saperne di più sulle variazioni del layout, consulta Layout di debug senza interruzioni.

Usare tecnologie moderne

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

Tuttavia, a seconda del tipo di carosello che stai creando, potrebbe non essere necessario JavaScript. La nuova interfaccia API Snap consente di implementare transizioni di tipo carosello utilizzando solo HTML CSS.

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

• Creare 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 contengono spesso alcune delle immagini più grandi di un sito, pertanto può valere la pena per assicurarti che queste immagini siano completamente ottimizzate. Scegliere il dispositivo giusto il formato e il livello di compressione delle immagini, utilizzando una CDN di immagine e con srcset per offrire più immagini versioni sono tutte le 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 vengono trattati in modo simile a qualsiasi altro elemento UX durante la fase LCP di calcolo, il meccanismo di calcolo dell'LCP per la riproduzione automatica dei caroselli è punto comune di confusione.

Misurazione LCP per i caroselli

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

• LCP prende in considerazione gli elementi della pagina così come sono racchiusi nel frame. Nuovi candidati per l'elemento LCP non vengono più considerati in seguito all'interazione dell'utente (tocchi, scorrimenti o pressioni di tasti) insieme alla pagina. Di conseguenza, qualsiasi slide in un video carosello può essere l'elemento LCP finale, mentre in un ambiente carosello solo la prima slide sarebbe un potenziale candidato LCP.
• Se vengono visualizzate due immagini di dimensioni uguali, verrà considerata la prima immagine l'elemento LCP. L'elemento LCP viene aggiornato solo quando il candidato LCP è più grande dell'elemento LCP attuale. Di conseguenza, se tutti gli elementi del carosello di dimensioni uguali, l'elemento LCP deve essere la prima immagine visualizzata.
• Nel valutare i candidati LCP, LCP prende in considerazione "le dimensioni visibili dimensione intrinseca, a seconda di quale sia la più piccola". Pertanto, se viene riprodotto carosello mostra immagini di dimensioni coerenti, ma contiene immagini di varia intrinseco dimensioni più piccole di quelle di visualizzazione, l'elemento LCP potrebbe cambiare come nuovo sono visualizzate le slide. In questo caso, se tutte le immagini vengono visualizzate con l'immagine con la dimensione intrinseca maggiore sarà considerata . Per mantenere basso il valore di LCP, devi assicurarti che tutti gli elementi in una riproduzione automatica hanno le stesse dimensioni intrinseche.

Modifiche al calcolo dell'LCP per i caroselli in Chrome 88

A partire da Chrome 88, le immagini che in seguito vengono rimosse dal DOM sono considerate immagini con contenuti. Prima di Chrome 88, queste immagini venivano escluse da considerazione. Per i siti che utilizzano caroselli con riproduzione automatica, questa definizione cambia avranno un impatto neutro o positivo sui punteggi LCP.

Questa modifica è stata apportata in risposta all' osservazione che molti siti implementino le transizioni del carosello rimuovendo dell'immagine visualizzata dall'albero DOM. Prima di Chrome 88, ogni volta che viene una slide, la rimozione dell'elemento precedente attivava aggiornamento. Questa modifica interessa solo la riproduzione automatica dei caroselli per definizione, La visualizzazione più grande con contenuti può avvenire solo prima che un utente interagisca per la prima volta .

Modifiche alle soglie in Chrome 121

Chrome 121 ha modificato il comportamento delle immagini con scorrimento orizzontale, come i caroselli. Ora per queste impostazioni vengono usate le stesse soglie dello scorrimento verticale. Ciò significa che per il caso d'uso del carosello, le immagini verranno caricate prima che siano visibili nell'area visibile. Ciò significa che il caricamento dell'immagine ha meno probabilità di essere evidente per l'utente, ma comporta un aumento dei download. Utilizza la demo del caricamento lento orizzontale per confrontare il comportamento in Chrome con quello in Safari e Firefox.

Altre considerazioni

Questa sezione illustra le best practice relative all'esperienza utente e ai prodotti da tenere a mente quando implementi i caroselli. I caroselli devono migliorare i tuoi obiettivi commerciali e presentare i contenuti in modo che siano facili da esplorare e leggere.

Best practice per la navigazione

Offri controlli di navigazione in evidenza

I controlli di navigazione del carosello devono essere facili da selezionare e altamente visibili. Questo è qualcosa che non viene fatto bene, la maggior parte dei caroselli ha controlli di navigazione che sono piccole e discrete. Ricorda che un singolo colore o stile di il controllo di navigazione funziona raramente in tutte le situazioni. Ad esempio, una freccia chiaramente visibile su uno sfondo scuro, che potrebbe essere difficile da vedere su uno sfondo chiaro.

Indicare l'avanzamento della navigazione

I controlli di navigazione del carosello devono fornire contesto sul numero totale di slide e l'avanzamento dell'utente nelle slide. Queste informazioni facilitano consente all'utente di passare a una determinata slide per capire quali contenuti hanno sono già state visualizzate. In alcune situazioni, fornire un'anteprima dei prossimi che si tratti di un estratto della slide successiva o di un elenco di miniature, sono utili e aumentano il coinvolgimento.

Supporto dei gesti sui dispositivi mobili

Sui dispositivi mobili, i gesti di scorrimento dovrebbero essere supportati in aggiunta alle tradizionali i controlli di navigazione (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 i contenuti a cui rimandano le slide del carosello devono essere accessibili tramite altri metodi di navigazione percorsi di addestramento.

Best practice per la leggibilità

Non utilizzare la riproduzione automatica

L'uso della riproduzione automatica crea due problemi quasi paradossali: le animazioni tendono a distrarre gli utenti e allontanare lo sguardo da contenuti content; contemporaneamente, poiché gli utenti spesso associano animazioni agli annunci, ignorerà i caroselli riprodotti automaticamente.

Pertanto, è raro che la riproduzione automatica sia una buona scelta. Se i contenuti sono importanti, la riproduzione automatica massimizzerà la sua esposizione; se i contenuti del carosello non sono importanti, l'uso della riproduzione automatica diminuirà i contenuti più importanti. Inoltre, La riproduzione automatica dei caroselli può essere difficile da leggere (e anche fastidiosa). Persone che leggono a velocità diverse, quindi è raro che le transizioni in un carosello siano coerenti il "destra" per diversi utenti.

Idealmente, la navigazione nelle slide dovrebbe essere guidata dall'utente tramite i controlli di navigazione. Se devi utilizzare la riproduzione automatica. La riproduzione automatica dovrebbe essere disattivata al passaggio del mouse dell'utente. Inoltre, la velocità di transizione delle slide deve tenere conto dei contenuti, più testo contenuti in una slide, più a lungo deve essere visualizzata sullo schermo.

Mantieni separati testo e immagini

I contenuti di testo del carosello sono spesso "integrati" il file immagine corrispondente, anziché rispetto a quello visualizzato separatamente utilizzando il markup HTML. Questo approccio è negativo accessibilità, localizzazione e compressione. Inoltre, incoraggia un approccio universale alla creazione degli asset. Tuttavia, la stessa immagine e lo stesso testo Raramente la formattazione è leggibile in modo uguale per tutti i formati per computer desktop e dispositivi mobili.

Essere conciso

Hai solo una frazione di secondo per attirare l'attenzione di un utente. Breve, testo completo aumenterà le probabilità che il tuo messaggio venga trasmesso.

Best practice per i prodotti

I caroselli funzionano bene in situazioni in cui viene utilizzato più spazio verticale per non è possibile 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 vengono avviati automaticamente sono facilmente errati per gli annunci pubblicati dagli utenti. Gli utenti tendono a ignorare la pubblicità: un fenomeno noto come banner cecità.
• I caroselli vengono spesso utilizzati per placare più reparti ed evitare di creare decisioni sulle priorità aziendali. Di conseguenza, i caroselli possono girare in una fase di scarico dei contenuti inefficaci.

Verifica le tue ipotesi

L'impatto commerciale dei caroselli, in particolare di quelli sulle home page, dovrebbe essere valutate e testate. Le percentuali di clic del carosello possono aiutarti a determinare se un carosello e i suoi contenuti sono efficaci.

Pertinenza

I caroselli funzionano al meglio quando includono contenuti interessanti, pertinenti e con un contesto chiaro. Se i contenuti non coinvolgono un utente al di fuori di carosello: posizionarlo in un carosello non migliorerà le prestazioni. Se devi usa un carosello, assegna priorità ai contenuti e assicurati che ogni slide sia sufficientemente pertinente alla slide successiva.