# Ottimizzazione dell'ecommerce mobile: Core Web Vitals, checkout e le correzioni precise che fanno salire la conversione > Il 70-85% del traffico ecommerce arriva da mobile. Le dieci aree concrete (Web Vitals, aree touch, compilazione automatica dei moduli, Apple Pay, zona del pollice) che chiudono il divario di conversione tra mobile e desktop, con strumenti e benchmark reali. Ryan Badger - 1 maggio 2025 - 8 min di lettura ## Perché il mobile è tutta la partita Il 70-80% del traffico del tuo ecommerce arriva da mobile. In molte categorie di consumo si sfiora l'85%. La conversione su desktop è in genere 2-3 volte quella su mobile, e questo dice meno sul fatto che il desktop sia migliore e più sul fatto che il mobile, nella maggior parte dei negozi, è rotto. Un'esperienza mobile ben ottimizzata può chiudere il divario, e spesso lo ribalta: alcuni brand DTC oggi convertono su mobile quanto o più che su desktop. La differenza è concreta, misurabile e riguarda soprattutto l'igiene di base, non l'innovazione. Questo articolo racconta cosa fa davvero salire la conversione mobile, con benchmark, strumenti e cose precise da sistemare. Niente "progetta mobile-first". Solo i controlli specifici che producono un aumento composto. ## 1. Core Web Vitals e perché Google li osserva Google usa i Core Web Vitals come segnale di posizionamento e come indicatore della qualità dell'esperienza. Al di là dell'aspetto SEO, queste metriche sono ottimi predittori della conversione. ### LCP (Largest Contentful Paint) Il tempo che passa prima che venga mostrato l'elemento più grande sopra la piega (di solito un'immagine hero o l'H1). Obiettivo: meno di 2,5 secondi su 4G mobile. Le cause più comuni di un LCP scadente: - Immagine hero non compressa o troppo grande - Caricamento dei web font che blocca il rendering - Script di terze parti (widget di chat, analytics, strumenti di A/B test) inseriti nel `` ### INP (Interaction to Next Paint) Il tempo che passa da un'interazione dell'utente (un tocco) all'aggiornamento visivo successivo. Obiettivo: meno di 200 ms. Le cause più comuni di un INP scadente: - Pagine pesanti di JavaScript (negozi React/Vue senza code-splitting) - Script di analytics o di chat che partono in modo sincrono all'interazione - Ritardo del tocco sui browser mobile più vecchi ### CLS (Cumulative Layout Shift) Elementi che saltano da una parte all'altra mentre la pagina si carica. Obiettivo: meno di 0,1. Le cause più comuni: - Immagini senza attributi width/height - Pubblicità o incorporamenti di terze parti che si caricano dopo il contenuto - Font che si caricano e cambiano la dimensione del testo ### Come controllare Gratis: [PageSpeed Insights](https://pagespeed.web.dev/) esegue Lighthouse e riporta tutti e tre i valori. Testa la pagina prodotto che incassa di più, non la home. Sistema ciò che è rosso, accetta ciò che è arancione, vai avanti. A pagamento / più a fondo: WebPageTest.org per l'analisi a cascata, il pannello Performance di Chrome DevTools per il profiling in locale. ## 2. Velocità mobile sotto i 3 secondi (mobile vero, non desktop rallentato) L'"emulatore mobile" di un browser desktop usa una connessione veloce e una CPU veloce. I telefoni veri hanno connessioni più lente e CPU più lente. Il divario è notevole. Testa su telefoni veri in 4G. Se la tua pagina impiega 2 secondi nell'emulatore mobile di Chrome, su un Android di fascia media in 4G ne servono probabilmente 4-5. ### Le maggiori vittorie di velocità (in ordine) 1. **Ottimizzazione delle immagini:** comprimi all'80% di qualità, ridimensiona alle misure davvero necessarie, servi WebP o AVIF. Shoprocket lo fa in automatico tramite Cloudflare 2. **Caricamento differito (lazy-load) di ciò che sta sotto la piega.** Immagini, iframe e script pesanti non devono caricarsi finché non ci si arriva con lo scroll 3. **Rimanda il JavaScript non critico.** Analytics, widget di chat e strumenti di A/B test non devono bloccare il rendering 4. **Metti in cache le risorse statiche in modo aggressivo.** Cache di 1 anno su immagini, font, CSS e JS con URL con fingerprint 5. **Usa una CDN** (Cloudflare, Fastly o quella integrata nella tua piattaforma). Serve le risorse da nodi geograficamente vicini 6. **Riduci gli script di terze parti.** Ogni pixel e tag aggiunge circa 50-200 ms; verifica cosa serve davvero ## 3. Dimensione delle aree touch Le Human Interface Guidelines di Apple indicano come minimo aree touch di 44×44 pixel. Google Material indica 48×48. La maggior parte delle versioni "mobile" dei temi non rispetta né l'una né l'altra. **Correzioni:** - Pulsanti alti almeno 44 px, con 8-12 px di padding interno - Link di navigazione alti almeno 44 px - Campi dei moduli alti almeno 44 px (aiuta anche l'accessibilità) - Spazio tra aree touch adiacenti di almeno 8 px Prova: apri il tuo negozio su un telefono. Prova a toccare la navigazione per categorie con il pollice. Sbagli bersaglio? È un problema di aree touch. ## 4. Il checkout mobile nel dettaglio Carrello e checkout su mobile sono il punto in cui si perde la maggior parte delle conversioni. Ecco la lista concreta delle cose da fare: ### Moduli a colonna singola I moduli a due colonne funzionano su desktop e falliscono su mobile. Impila ogni campo in verticale. Nessuna eccezione. ### Tipi di input adeguati - Campo email: `type="email"` (mostra la tastiera email con la chiocciola) - Telefono: `type="tel"` (tastiera numerica) - CAP: `type="text" inputmode="numeric"` per i paesi con codici postali numerici - Numero di carta di credito: `type="text" inputmode="numeric" autocomplete="cc-number"` (fa funzionare la compilazione automatica) La maggior parte delle piattaforme lo fa bene di serie. Vale la pena controllare il tuo modulo su un telefono; se compare la tastiera sbagliata, correggilo. ### Compatibilità con la compilazione automatica I browser possono compilare in automatico nome, indirizzo, email, telefono e dati della carta se gli attributi `autocomplete` del modulo sono corretti. Un cliente che tocca il suggerimento di compilazione automatica completa il checkout in 3 secondi. Senza, deve digitare a mano oltre 12 campi. Valori autocomplete standard: `name`, `email`, `tel`, `street-address`, `postal-code`, `country`, `cc-number`, `cc-exp`, `cc-csc`, `cc-name`. ### Aggiungi al carrello fisso nelle pagine prodotto Scorri una pagina prodotto mobile di 3 schermate e il pulsante Aggiungi al carrello è fuori vista. Soluzione: aggiungi una barra fissa in basso con il prezzo e Aggiungi al carrello, che compare quando il pulsante originale esce dallo schermo. ### Apple Pay + Google Pay + Link Sono il singolo aumento più grande del checkout mobile. Pagamento con un solo tocco, senza digitare nulla, con autenticazione biometrica nativa. - **Apple Pay:** si attiva in automatico dopo aver verificato il tuo dominio con Stripe (Shoprocket se ne occupa) - **Google Pay:** simile - **Stripe Link:** compila carta e indirizzo a partire dall'identità cross-sito di Link Ogni checkout mobile senza questi metodi perde clienti. Attivali tutti e tre. ## 5. Riduzione dei campi del modulo Ogni campo nel tuo checkout mobile è un punto di attrito. Fai l'audit dei tuoi campi: **Di solito necessari:** - Email - Indirizzo di spedizione (nome, via, città, CAP, paese) - Dati di pagamento (oppure Apple/Google Pay) **Spesso raccolti in eccesso:** - Numero di telefono (solo se serve per la consegna o ai corrieri; a molti non serve) - Data di nascita (quasi mai necessaria all'acquisto) - Nome dell'azienda (solo per il B2B) - Iscrizione alla newsletter (preselezionata dove la legge lo consente; altrimenti una casella separata) - "Come ci hai conosciuti?" (spostalo in un sondaggio dopo l'acquisto) Meno campi = checkout più veloce = più completamenti. Ogni campo che togli vale circa un 5-10% in più di checkout mobile completati, con effetto composto. ## 6. Testo leggibile e lunghezza delle righe su mobile - **Testo del corpo:** almeno 16 px (il default di iOS e la linea guida di Google Material) - **Lunghezza della riga:** 45-75 caratteri - **Interlinea:** 1,4-1,6 volte la dimensione del carattere - **Contrasto:** minimo WCAG AA (4,5:1 per il corpo, 3:1 per il testo grande) Se i clienti fanno pinch-to-zoom sulla descrizione del prodotto, il tuo testo è troppo piccolo. Se devono girare il telefono di lato per leggere, le righe sono troppo larghe o il carattere è troppo stretto. ## 7. Uso con una sola mano La maggior parte degli utenti usa il telefono con una mano, con il pollice che parte dall'angolo in basso a destra (o in basso a sinistra per i mancini). Le interazioni importanti devono stare in quella zona del pollice. - CTA principale (Aggiungi al carrello, Checkout, Acquista ora) vicino al fondo - Menu hamburger in alto a sinistra o a destra, alla portata del pollice - Pulsante "Indietro" prevedibile (il tasto indietro del browser di solito batte quelli personalizzati) Non richiedere il doppio tocco su zone difficili da raggiungere. Ogni momento di ginnastica del pollice fa perdere clienti. ## 8. Pagina prodotto pensata per il mobile Le pagine prodotto desktop spesso mostrano tutto insieme (galleria a sinistra, dettagli a destra, descrizione sotto). Quel layout non si traduce sul mobile: devi mettere i contenuti in sequenza. Una sequenza efficace per la pagina prodotto mobile: 1. Immagine hero (galleria scorrevole) 2. Titolo + prezzo 3. Selettore di varianti (taglia, colore) 4. Aggiungi al carrello (CTA principale) 5. Segnali di fiducia (valutazione, spedizione gratuita, resi) 6. Descrizione (comprimibile, ripiegata dopo 3 righe) 7. Specifiche / dettagli (comprimibili) 8. Riepilogo delle recensioni con espansione "vedi tutte" 9. Prodotti correlati 10. FAQ (comprimibili) I contenuti sotto la piega vanno caricati in lazy-load. Un cliente mobile spesso decide l'acquisto nelle prime 3 sezioni; caricare tutto rallenta quella decisione. ## 9. Test su dispositivi reali Non i DevTools. Non l'emulatore mobile del browser. Telefoni veri su connessioni cellulari. Rotazione minima di test: - iPhone SE (schermo piccolo, dispositivo più vecchio) - iPhone 15 Pro (iOS più recente, Safari) - Samsung Galaxy di fascia media (Android, Chrome) - Android più vecchio in 4G (fa emergere i problemi di prestazioni) Bonus: chiedi a 3 amici con telefoni diversi di provare ad acquistare qualcosa nel tuo negozio. Guardali. Ciò su cui faticano è la tua lista di correzioni. ## 10. Evitare i pattern che uccidono il mobile Errori comuni che distruggono la conversione mobile: ### Popup interstiziali Il popup "Iscriviti per il 10% di sconto!" che copre lo schermo all'arrivo da mobile. Google li penalizza nel posizionamento della ricerca mobile. I clienti ci sbattono contro e se ne vanno. Usa invece iscrizioni inline. ### Video in riproduzione automatica con audio Spreca banda, infastidisce gli utenti e iOS spesso lo blocca comunque. La riproduzione automatica senza audio è accettabile per un video hero; con l'audio è ostile all'utente. ### Stati hover sul touch "Passa il mouse per vedere i dettagli" non funziona al tocco. Se il tuo tema usa ancora pattern a rivelazione al passaggio su mobile, di fatto sono rotti. ### Pulsanti "chiudi" minuscoli nei modali Una X di 16 pixel nell'angolo è impossibile da colpire con il pollice. Rendi i pulsanti di chiusura 44×44 oppure usa pulsanti "Chiudi" a tutta larghezza in fondo ai modali. ### Scroll orizzontale nelle griglie di prodotti Su mobile, i caroselli di prodotti a scorrimento orizzontale nascondono l'80% dei prodotti sotto la piega. Una griglia verticale (2 colonne su mobile) converte meglio. ## Cosa gestisce Shoprocket per il mobile La maggior parte dei requisiti di base, già pronti: - **Ottimizzazione automatica delle immagini:** ridimensionamento + compressione + WebP + lazy-load su ogni immagine prodotto - **Cassetto del carrello (non carrello a pagina intera)** è il default su mobile - **Aggiungi al carrello fisso su mobile** supportato nelle vetrine con tema - **Checkout responsive** con tipi di input corretti, autocomplete e campi impilati - **Apple Pay + Google Pay + Stripe Link** pagamento con un tocco tramite Stripe - **Widget di live chat responsive** - **Distribuzione via CDN** con Cloudflare per ogni risorsa - **Core Web Vitals ottimizzati di serie** per la vetrina ospitata ```
``` Se usi l'incorporamento del widget: la velocità e il design della pagina che lo ospita sono nelle tue mani. Il widget di Shoprocket è caricato in lazy-load e non blocca il rendering della tua pagina, ma la velocità complessiva della pagina resta una tua responsabilità. > **Consiglio:** una volta a trimestre, esegui PageSpeed Insights su mobile sulle tue 3 pagine prodotto che incassano di più. Annota i tre punteggi dei Core Web Vitals. Il trimestre dopo, confronta. Un andamento in calo è un killer silenzioso della conversione; scoprilo ogni trimestre invece che dopo il danno. ## In sintesi - **Il mobile è il 70-85% del traffico.** La maggior parte dei negozi lo tratta come un ripensamento; tu no - **I Core Web Vitals sono i tre numeri da seguire:** LCP, INP, CLS. Sotto 2,5 s / 200 ms / 0,1 - **Testa su dispositivi reali in 4G,** non su un emulatore del browser - **Checkout nel dettaglio:** moduli a colonna singola, tipi di input corretti, autocomplete, Apple/Google Pay, CTA fisse - **Meno campi nei moduli** = più completamenti. Verifica cosa serve davvero - **Aree touch di almeno 44×44.** Spazio tra le aree di almeno 8 px - **La zona del pollice conta.** CTA principali vicino al fondo; hamburger in alto a sinistra/destra - **Evita i killer del mobile:** interstiziali, audio in riproduzione automatica, stati hover, pulsanti di chiusura minuscoli [Inizia una prova gratuita](https://app-v3.shoprocket.io/signup) e ottieni da subito ottimizzazione automatica delle immagini + Apple Pay + checkout nativo per il mobile. 14 giorni, senza carta. --- - HTML version: https://v3.shoprocket.io/it/blog/ottimizzazione-ecommerce-mobile-core-web-vitals-checkout - Language: Italiano (it) - Also in: [العربية](https://v3.shoprocket.io/ar/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md), [Deutsch](https://v3.shoprocket.io/de/blog/mobile-ecommerce-optimierung-core-web-vitals-checkout.md), [Ελληνικά](https://v3.shoprocket.io/el/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md), [English](https://v3.shoprocket.io/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md), [Español](https://v3.shoprocket.io/es/blog/optimizacion-ecommerce-movil-core-web-vitals-checkout-y-arreglos-que-mueven-la-conversion.md), [Français](https://v3.shoprocket.io/fr/blog/optimisation-ecommerce-mobile-core-web-vitals-paiement.md), [עברית](https://v3.shoprocket.io/he/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md), [हिन्दी](https://v3.shoprocket.io/hi/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md), [Bahasa Indonesia](https://v3.shoprocket.io/id/blog/optimasi-ecommerce-mobile-core-web-vitals-checkout-dan-perbaikan-konversi.md), [日本語](https://v3.shoprocket.io/ja/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md), [Lietuvių](https://v3.shoprocket.io/lt/tinklarastis/mobilioji-el-prekyba-core-web-vitals-atsiskaitymas-ir-konkretus-pataisymai-didinantys-konversija.md), [Norsk](https://v3.shoprocket.io/nb/blogg/mobiloptimalisering-nettbutikk-core-web-vitals-kasse.md), [Nederlands](https://v3.shoprocket.io/nl/blog/mobiele-webshop-optimalisatie-core-web-vitals-checkout-conversie.md), [Polski](https://v3.shoprocket.io/pl/blog/optymalizacja-ecommerce-na-mobile-core-web-vitals-kasa-i-poprawki-ktore-ruszaja-konwersje.md), [Português](https://v3.shoprocket.io/pt/blog/otimizacao-ecommerce-mobile-core-web-vitals-checkout-conversao.md), [Română](https://v3.shoprocket.io/ro/blog/optimizare-ecommerce-mobil-core-web-vitals-plata.md), [Русский](https://v3.shoprocket.io/ru/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md), [ไทย](https://v3.shoprocket.io/th/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md), [Türkçe](https://v3.shoprocket.io/tr/blog/mobil-eticaret-optimizasyonu-core-web-vitals-odeme-ve-donusumu-artiran-duzeltmeler.md), [中文](https://v3.shoprocket.io/zh/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md)