Slider e caroselli: quando pesano su SEO e velocità (e quando no)

Hai uno slider in cima alla home con quattro immagini che girano da sole. PageSpeed ti segna l’LCP in rosso, il sito sul telefono sembra lento e da Analytics vedi che le slide non le clicca quasi nessuno.

Il problema cambia molto a seconda di dove sta lo slider. Qui trovi cosa succede quando è in cima alla pagina, cosa succede quando è più in basso e come verificare il tuo caso in cinque minuti.

Quante persone guardano davvero le slide?

Il dato più citato viene da Erik Runyon, del team web della University of Notre Dame. Nel 2013 ha misurato che solo l’1,07% dei visitatori cliccava sul carosello della home, e l’89,1% di quei clic finiva sulla prima slide (Erik Runyon, “Carousel Interaction Stats”, luglio 2013).

Nello stesso anno Adrian Roselli ha misurato sul sito della sua azienda lo 0,8% di clic, sceso allo 0,2% nel mese successivo (Adrian Roselli, luglio 2013). Sono dati vecchi, lo so. Però in tredici anni nessuno ha pubblicato misure che dicano il contrario per gli slider promozionali in home.

Un esempio che vedo spesso: lo studio dentistico con quattro slide. “Benvenuti”, “Implantologia”, “Sbiancamento”, “Promo igiene di settembre”. La promo sta nella quarta, quindi prima di vederla bisogna restare fermi sulla home per una quindicina di secondi. Quasi nessun paziente lo fa, e alla fine l’unico che la guarda con attenzione è il titolare dello studio.

Cosa vuol dire above the fold?

Above the fold è la parte di pagina che vedi appena la apri, senza scorrere. La sua altezza cambia da un telefono a un portatile, ma il principio è lo stesso.

Below the fold, sotto la piega, è tutto quello che vedi solo scorrendo.

La distinzione conta perché Google misura la velocità soprattutto su quello che compare per primo, mentre quello che sta più in basso pesa molto meno sui Core Web Vitals.

Slider above the fold: cosa succede a velocità e SEO

In cima alla pagina lo slider è quasi sempre l’elemento più grande dello schermo. Per questo diventa l’elemento LCP (Largest Contentful Paint, il tempo che serve a mostrare il contenuto principale), uno dei tre Core Web Vitals che Google usa come segnale di ranking.

Anche la guida di Google su web.dev dedicata ai caroselli lo dice: quelli grandi in cima alla pagina contengono spesso l’elemento LCP.

La prima immagine arriva tardi

Molti slider di WordPress non mettono la prima immagine nell’HTML come un normale <img>. La caricano come sfondo CSS, oppure la inseriscono via JavaScript quando la libreria si è avviata.

Così il browser la scopre tardi, e secondo web.dev caricare il contenuto del carosello con JavaScript è probabilmente l’errore di performance più grave che puoi fare.

Il layout salta

Finché lo script non parte lo slider non ha un’altezza, quindi il testo sotto compare in alto e viene spinto giù appena arrivano le immagini: è il CLS (Cumulative Layout Shift, gli spostamenti improvvisi del layout).

C’è anche un caso meno visibile. Se le transizioni usano animazioni non ottimizzate, un carosello in autoplay può far crescere il CLS all’infinito, senza che tu te ne accorga a occhio (web.dev, stessa guida).

Quattro titoli per una pagina sola

Molti temi assegnano un H1 a ogni slide. Google ha detto più volte che più H1 non sono una penalizzazione, quindi non è questo il danno.

Il danno è un altro. La pagina non dice più di cosa parla. Se le quattro slide hanno come titolo “Benvenuti”, “Implantologia”, “Sbiancamento” e “Promo”, nessuna di queste frasi spiega che sei uno studio dentistico a Milano.

C’è poi il testo scritto dentro l’immagine, che Google non legge come testo e che nemmeno uno screen reader (il software che legge la pagina ad alta voce a chi non vede) riesce a leggere.

Come capire se il tuo slider è un problema

1. Apri PageSpeed Insights, inserisci l’URL della home e cerca nella diagnostica quale elemento viene indicato come LCP. Se è la foto dello slider, hai trovato il colpevole.
2. Apri il codice sorgente della pagina con Ctrl+U e cerca il nome del file della prima immagine. Se non c’è, o compare solo dentro un data-src o un background-image, il browser la scopre in ritardo.
3. Ricarica la pagina con la rete limitata (in Chrome: strumenti per sviluppatori, scheda Rete, “Fast 4G”). Se vedi il testo sotto lo slider saltare, hai il problema di CLS.

Cosa metto al posto dello slider

Nella maggior parte dei casi un hero statico, cioè una sezione di apertura con una sola immagine fissa, un titolo H1 in HTML e un pulsante. Per lo studio dentistico diventa “Studio dentistico a Milano: implantologia e igiene”, con sotto tre blocchi per i servizi principali.

L’immagine va nell’HTML come <img>, con width e height dichiarati, fetchpriority="high" e senza loading="lazy". Il lazy loading (caricamento rimandato finché l’immagine non serve) sull’immagine più importante della pagina la rallenta.

Importante: se il cliente vuole comunque lo slider in cima, almeno la prima slide deve essere un <img> nell’HTML, senza lazy loading e con fetchpriority="high". Riserva l’altezza con aspect-ratio e togli l’autoplay, oppure aggiungi un pulsante di pausa ben visibile.

Slider below the fold: quando va bene

Sotto la piega il discorso cambia. Le immagini possono caricarsi con loading="lazy" e l’LCP non ne risente, perché quello che si misura sta più in alto.

Qui i problemi diventano due: il contenuto nascosto nelle slide successive, che vede poca gente, e la libreria JavaScript che spesso viene caricata su tutte le pagine del sito anche se il carosello sta solo in home.

Quando funziona

Un carosello funziona quando l’utente sa cosa sta scorrendo e lo fa per scelta. Il caso tipico è la galleria foto di un prodotto: in uno studio su un e-commerce mobile, circa il 72% dei visitatori ha interagito con il carosello delle immagini prodotto (Smashing Magazine, febbraio 2015).

Stesso principio per i loghi dei clienti, gli articoli correlati o una fila di prodotti che scorre in orizzontale: se l’utente si perde la quinta foto, non si perde niente di importante.

Quando non funziona

Non funziona quando nel carosello nascondi qualcosa che l’utente deve vedere per decidere. Una scuola di yoga con sei corsi in un carosello che ne mostra tre alla volta: gli ultimi tre corsi, per molti visitatori, non esistono.

Stesso discorso per le recensioni che scorrono da sole, una ogni quattro secondi: tre recensioni in una griglia si leggono in dieci secondi, mentre una alla volta non le legge nessuno fino in fondo.

Per la SEO il testo delle slide, se è nell’HTML, Google lo legge. Il limite è un altro: i link ai servizi nascosti nelle slide successive ricevono pochi clic, e quelle pagine restano poco visitate.

Come lo costruisco

Per un carosello più in basso nella pagina uso lo scorrimento nativo del browser con CSS scroll-snap, senza librerie. Bastano poche righe:

.carosello {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}
.carosello > * {
  flex: 0 0 80%;
  scroll-snap-align: start;
}

Funziona con lo swipe sul telefono e con la tastiera, non pesa niente e le frecce le aggiungo solo se servono davvero.

Consiglio: se il carosello arriva da un plugin, controlla su quali pagine carica il suo JavaScript. Con uno script manager come quello di Perfmatters puoi disattivarlo dove non serve.

L’autoplay è anche un problema di accessibilità?

Sì. Le WCAG 2.2 (le linee guida internazionali sull’accessibilità), al criterio 2.2.2, chiedono che qualsiasi contenuto che si muove da solo per più di cinque secondi abbia un modo per metterlo in pausa o fermarlo.

Dal 28 giugno 2025, con l’European Accessibility Act, molti servizi digitali privati devono rispettare requisiti di accessibilità. Riguarda soprattutto gli e-commerce, mentre le microimprese che offrono servizi sono escluse. Un sito vetrina di un piccolo studio di solito non è obbligato, ma uno slider che nessuno riesce a fermare resta un fastidio per tutti.

Attenzione: molti slider fermano lo scorrimento automatico al passaggio del mouse, ma su telefono il mouse non c’è e quella pausa, di fatto, non esiste.

Ti serve davvero uno slider?

Per decidere mi faccio due domande.

Ho un messaggio principale da dare a chi arriva? Allora un hero statico, sempre.

Ho tanti elementi simili che l’utente può voler sfogliare, come foto, loghi o prodotti? Allora un carosello sotto la piega, a scorrimento manuale. In tutti gli altri casi una griglia fa lo stesso lavoro, si vede tutta e non chiede JavaScript.

Aspetto	Slider above the fold	Slider below the fold
Effetto sull’LCP	Spesso è l’elemento LCP	Nessuno, se le immagini sono lazy
Rischio CLS	Alto, se l’altezza non è riservata	Basso
Contenuto visto	Quasi solo la prima slide	Dipende da quanto l’utente vuole sfogliare
Quando ha senso	Quasi mai	Gallerie prodotto, loghi, correlati

Il passo successivo è semplice: apri PageSpeed Insights sulla tua home e guarda quale elemento indica come LCP. Se è la foto dello slider, sai da dove partire. Se invece l’LCP è lento per altri motivi, ho raccolto le cause più comuni in questo articolo sul sito lento.

Se preferisci che la analizzi io, scrivimi qui.