Checklist CRO e-commerce: regole 1-5, prestazioni e usabilità di base

Questa è la settimana 1 della serie 194 regole CRO per e-commerce. Ogni settimana prendiamo cinque criteri della checklist CRO e-commerce 2026 di Flag Agency, la web agency PrestaShop di Frattamaggiore (Napoli), e ti spieghiamo come controllarli e come sistemarli davvero sul tuo negozio.

Partiamo dalla pagina Generale: le regole che valgono su tutto il sito, non su una singola scheda. Sono le fondamenta. Se il negozio è lento o scomodo da toccare con il pollice, puoi scrivere le descrizioni più belle del mondo: il carrello resta vuoto.

Regole di questa settimana: 1-5 di 194.

1. Tieni i Core Web Vitals nei limiti (sui dati reali, non solo su Lighthouse)

Cosa controllare. I tre indicatori di esperienza utente di Google, misurati su mobile e sui dati reali degli utenti (Search Console → rapporto Segnali web essenziali, o CrUX), non solo con un test di laboratorio:

• LCP ≤ 2,5 secondi — quanto ci mette a comparire l’elemento principale della pagina (di solito la foto grande o il titolo).
• INP ≤ 200 millisecondi — quanto ci mette la pagina a rispondere quando l’utente tocca o clicca.
• CLS ≤ 0,1 — quanto “salta” il contenuto mentre carica.

Questa regola sostituisce il vecchio criterio “la pagina deve caricarsi in 5 secondi”: oggi conta cosa vede e quando può agire chi sta davanti allo schermo.

Perché conta per le vendite. Chi aspetta se ne va. E chi tocca “Aggiungi al carrello” e non vede succedere niente, tocca di nuovo, si innervosisce e chiude. L’LCP perde visite prima ancora che inizi la visita; l’INP le perde proprio nel momento dell’acquisto.

Come farlo su PrestaShop.

• Collega il dominio a Search Console e guarda il rapporto Segnali web essenziali su mobile: Lighthouse ti dà un’idea, i dati reali ti dicono la verità.
• Parti dal server: hosting lento, TTFB alto e niente cache = LCP fuori limite qualunque cosa tu faccia dopo. Se hai dubbi, leggi come scegliere il server PrestaShop giusto o guarda il nostro hosting PrestaShop.
• In back office, Parametri avanzati → Prestazioni: attiva Smarty in modalità cache, la compilazione dei template “mai ricompilare”, la minificazione e la combinazione di CSS e JavaScript. Poi riprova: alcuni temi e moduli vecchi si rompono, va verificato pagina per pagina.
• Il tema pesa più di tutto il resto. Se il tuo è pieno di slider, caroselli e font caricati a mano, nessuna impostazione lo salverà: valuta un tema costruito leggero, come Flag Theme per PrestaShop 9.

Errore frequente. Festeggiare un 95 su Lighthouse da desktop con fibra e ignorare che in Search Console il mobile è tutto arancione. Il test di laboratorio serve a trovare le cause, non a dichiarare vittoria.

2. Ottimizza le immagini (ma non mettere il lazy load sulla prima)

Cosa controllare. Tre cose, in ordine:

• Formato: WebP o AVIF al posto di JPEG e PNG.
• Dimensioni responsive: l’attributo srcset, così il telefono scarica la versione piccola e non quella da 2000 px.
• Lazy load solo per le immagini sotto la piega. Mai sull’immagine principale della pagina: è quella che determina l’LCP, e caricarla in ritardo peggiora il punteggio invece di migliorarlo.

Perché conta per le vendite. In un e-commerce le immagini sono il 70% del peso di una pagina prodotto. Più sono leggere, prima il cliente vede il prodotto. E chi vede il prodotto, lo valuta.

Come farlo su PrestaShop.

• Carica originali già tagliati alla misura giusta: PrestaShop genera le miniature, non fa miracoli su un file da 8 MB.
• Dopo ogni cambio di formati immagine vanno rigenerate le miniature (Design → Impostazioni immagini). Sui cataloghi grandi va in timeout: esiste un modulo che le rigenera a piccoli cicli.
• Controlla nel tema che i tag <img> abbiano width e height: senza, il contenuto salta e il CLS peggiora.
• Verifica con l’ispettore del browser che la foto principale della scheda prodotto non abbia loading="lazy".

Errore frequente. Installare un modulo “ottimizza immagini”, attivare il lazy load su tutto il sito e peggiorare l’LCP della pagina prodotto. Più veloce in apparenza, più lento dove conta.

3. Tieni sotto controllo gli script di terze parti

Cosa controllare. L’elenco di tutto ciò che il tuo sito carica e che non hai scritto tu: pixel pubblicitari, chat, widget recensioni, mappe, caroselli di social, moduli installati e mai disinstallati. Ognuno deve avere tre risposte pronte: serve?, serve su tutte le pagine?, può caricarsi dopo?

Perché conta per le vendite. Ogni script in più occupa il browser e rallenta la risposta ai tocchi, cioè l’INP. Il cliente non pensa “c’è un conflitto JavaScript”: pensa “questo sito non funziona”.

Come farlo su PrestaShop.

• Apri il back office, Moduli, e disinstalla (non solo disattiva) quelli che non usi da mesi. Un modulo disattivato spesso lascia comunque file e hook in giro.
• Carica i pixel dopo il consenso ai cookie: oltre a essere un obbligo di legge in Europa, ti toglie peso dalle pagine dei visitatori che rifiutano. Occhio: il consenso riguarda la legge, non è un trucco di velocità.
• Limita gli script alle pagine che servono: la chat può stare su prodotto e carrello, la mappa solo nei contatti. In PrestaShop spesso si fa con una condizione nel template del tema o con un modulo su misura.
• Dopo ogni pulizia, rimisura. Senza misura è fede, non ottimizzazione.

Errore frequente. Tenere due strumenti di analisi che fanno la stessa cosa “per sicurezza”, più tre pixel di campagne finite due anni fa.

4. Fai sembrare cliccabile solo ciò che è cliccabile

Cosa controllare. Bottoni e link devono dichiararsi: forma riconoscibile, colore di contrasto, stato hover sul desktop e stato focus visibile per chi naviga da tastiera. Vale anche il contrario: un badge, un riquadro colorato o un’icona decorativa non devono sembrare pulsanti.

Perché conta per le vendite. Se il cliente deve indovinare dove si clicca, hai aggiunto un passaggio mentale a ogni schermata. E se tocca tre volte una cosa che non è un bottone, conclude che il sito è rotto.

Come farlo su PrestaShop.

• Usa un solo stile per il bottone principale (“Aggiungi al carrello”, “Procedi all’ordine”) e tienilo identico in tutto il sito.
• Non togliere mai l’outline del focus dal CSS del tema: serve a chi usa la tastiera ed è un criterio di accessibilità. Se vuoi sapere a che punto sei, parti dall’analisi gratuita di accessibilità.
• Sui filtri di categoria, assicurati che l’intera etichetta sia cliccabile, non solo il quadratino della casella.
• Fai una prova a voce alta con una persona che non conosce il sito: “dimmi dove cliccheresti per comprare”.

Errore frequente. Il bottone “fantasma”: testo grigio chiaro su fondo bianco, senza bordo, perché “è più elegante”. Elegante e invisibile.

5. Dai spazio alle dita: aree di tocco di almeno 44×44 px

Cosa controllare. Ogni elemento interattivo — bottoni, link, selettori di taglia e colore, campi, il “+” della quantità, la X per chiudere — deve avere un’area toccabile di almeno 44×44 px, con spazio sufficiente intorno per non colpire il vicino.

Perché conta per le vendite. Il pollice è grosso e il telefono è il canale principale. Un selettore di taglia troppo piccolo si tocca sbagliato, il cliente ordina la misura errata (o rinuncia) e tu ti ritrovi un reso.

Come farlo su PrestaShop.

• Prova il sito sul tuo telefono, in piedi, con una mano sola. È il test più onesto che esista.
• Nel tema, aumenta padding e min-height dei bottoni invece di ingrandire solo il testo, e distanzia le voci del menu mobile.
• Attenzione a selettori di attributi, paginazione e filtri: sono i punti dove i temi standard fanno i target più piccoli.
• Se devi mettere mano al template e non vuoi rompere gli aggiornamenti, chiedi assistenza PrestaShop o parti da un tema già pensato per il mobile.

Errore frequente. Ridurre tutto per “far stare il prodotto nella prima schermata”. Meglio uno scroll in più che un tocco sbagliato.

In breve

• Regola 1 — Core Web Vitals su mobile e dati reali: LCP ≤ 2,5 s, INP ≤ 200 ms, CLS ≤ 0,1.
• Regola 2 — Immagini in WebP/AVIF, srcset, lazy load sotto la piega ma mai sull’immagine principale.
• Regola 3 — Script di terze parti solo dove servono, in differita o dopo il consenso.
• Regola 4 — Bottoni e link riconoscibili (colore, forma, hover, focus); niente finti pulsanti.
• Regola 5 — Aree di tocco di almeno 44×44 px e spazio tra gli elementi.

La prossima settimana continuiamo con la pagina Generale. Se intanto vuoi rivedere le basi, dai un’occhiata ai 6 consigli per aumentare le conversioni del tuo e-commerce.