Perché i punteggi su dispositivi mobili e desktop sono diversi
Se hai mai gestito il tuo negozio Shopify PageSpeed Insights, hai visto il divario: il tuo punteggio desktop potrebbe essere negli anni '80 o '90 mentre il tuo punteggio mobile languisce negli anni '30 o '40. Questo non è un bug: è previsto dalla progettazione.
Google testa dispositivi mobili e desktop sotto condizioni completamente diverse. Il test mobile simula uno smartphone di fascia media con potenza di elaborazione limitata e connessione di rete lenta. Il test desktop utilizza la massima velocità della CPU e la tua connessione effettiva.
📱 Condizioni di prova mobile
- ● CPU: Rallentamento 4x (simula un telefono di fascia media)
- ● Rete: 4G limitato (~1,6 Mbps, 150 ms RTT)
- ● Visualizzazione: 412 x 823px (tipico cellulare)
- ● Dispositivo: Potenza Moto G simulata
🖥️ Condizioni di test desktop
- ● CPU: Nessuna limitazione (massima velocità)
- ● Rete: Nessuna limitazione (velocità effettiva)
- ● Visualizzazione: 1350 x 940px (desktop tipico)
- ● Dispositivo: Desktop/laptop moderno
Il risultato? La stessa identica pagina, stesso codice, stesse risorse — testato in condizioni molto diverse. Un file JavaScript che viene analizzato in 200 ms su desktop impiega 800 ms sulla CPU mobile limitata. Un'immagine che viene scaricata in 100 ms sulla banda larga impiega 500 ms su 4G simulato.
Questo è il motivo per cui esiste un divario di 30-50 punti tra dispositivi mobili e desktop completamente normale per i negozi Shopify. Ciò non significa che il tuo negozio non funzioni sui dispositivi mobili: significa che il test mobile di Google è deliberatamente severo. Vuoi controllare il tuo divario? Esegui un test di velocità gratuito nel tuo negozio.
La soluzione semplice: aumenta istantaneamente entrambi i punteggi
Prima di immergerci nelle ottimizzazioni mobili manuali: esiste un modo più veloce. Thunder Page Speed Optimizer migliora notevolmente i punteggi sui dispositivi mobili affrontando i fattori esatti che il test mobile di Google penalizza maggiormente.
Perché Thunder colpisce più duramente sui dispositivi mobili:
Il differimento dello script riduce il carico della CPU
JS non critico viene rinviato: impatto enorme sulle CPU mobili limitate
CSS critico per la prima verniciatura veloce
Caricamenti CSS Above-the-fold in linea: nessuna richiesta di blocco del rendering su reti lente
Ottimizzazione dei caratteri
Precarica e ottimizza la consegna dei caratteri per ridurre l'LCP mobile
Prioritizzazione delle risorse Mobile-First
Dà la priorità alle risorse più importanti per il rendering mobile
Miglioramento medio mobile: +27 punti PageSpeed
Poiché i dispositivi mobili sono più sensibili a JavaScript e alle risorse di blocco della visualizzazione, le ottimizzazioni di Thunder hanno un impatto enorme sui punteggi mobili.
Piano gratuito disponibile · Non è richiesta la carta di credito · Configurazione in 30 secondi · Funziona con tutti i temi
Come Google testa i dispositivi mobili e desktop (in dettaglio)
Utilizza PageSpeed Insights Lighthouse sotto il cofano. Ecco esattamente cosa succede in modo diverso tra i test mobile e desktop:
| Fattore | Test mobile | Test desktop | Impatto |
|---|---|---|---|
| Limitazione della CPU | Rallentamento 4x | Nessuno | L'esecuzione di JS richiede 4 volte più tempo nel test mobile |
| Velocità di rete | ~1,6Mbps (4G) | Nessuna limitazione | Le risorse richiedono più tempo per essere scaricate sul cellulare |
| Latenza di rete | RTT di 150 ms | ~40ms RTT | Ogni richiesta ha un sovraccarico maggiore sul cellulare |
| Larghezza della vista | 412px | 1350px | Diversi layout reattivi, dimensioni delle immagini |
| Agente utente | Cellulare Chrome | Desktop Chrome | Può attivare risposte diverse del server |
| Pesi del punteggio | TBT: 30%, LCP: 25% | Stessi pesi | Stessa formula, ma il throttling amplifica i problemi |
Il La limitazione della CPU è il fattore più importante. Il Total Blocking Time (TBT), che misura per quanto tempo il thread principale viene bloccato da JavaScript, conta per il 30% del punteggio PageSpeed. Con un rallentamento della CPU 4x, ogni millisecondo di esecuzione JS diventa quattro. Uno script che si blocca per 150 ms sul desktop si blocca per 600 ms sul test mobile.
💡 Approfondimento chiave: Ciò significa che l'ottimizzazione JavaScript ha 4 volte più impatto sul tuo punteggio mobile che sul tuo punteggio desktop. Ogni kilobyte di JS che differisci o rimuovi ti fa guadagnare di più sui dispositivi mobili che sul desktop. Questo è esattamente il motivo per cui il differimento della sceneggiatura di Thunder ha un effetto così drammatico sui punteggi mobili.
Perché la velocità su dispositivi mobili è più importante per la SEO
Dal 2019 Google utilizza indicizzazione mobile-first per tutti i nuovi siti web e dal 2021 si applica a tutto il web. Ciò significa:
- Google esegue principalmente la scansione e l'indicizzazione dei file versione mobile del tuo sito
- I Mobile Core Web Vitals sono il segnale principale per l'incremento del ranking
- Se il contenuto esiste solo sul desktop (non nella visualizzazione mobile), Google potrebbe non indicizzarlo
Al di là della SEO, i dati sul traffico probabilmente confermano perché i dispositivi mobili sono importanti: over 70% of Shopify store traffic typically comes from mobile devices. La tua esperienza mobile è l'esperienza predefinita per la maggior parte dei tuoi clienti.
70%+
del traffico di Shopify è mobile
53%
of mobile users leave if load > 3s
100%
dei siti utilizza l'indicizzazione mobile-first
La conclusione: se devi scegliere tra l'ottimizzazione per dispositivi mobili o desktop, scegli sempre il cellulare. I miglioramenti sui dispositivi mobili quasi sempre migliorano anche i desktop (ma non viceversa). Per una prospettiva SEO più ampia sulla velocità, consulta il nostro Guida Core Web Vitals.
Il problema JavaScript sui dispositivi mobili
JavaScript è il motivo principale per cui i punteggi sui dispositivi mobili sono inferiori rispetto a quelli su desktop. Ecco perché colpisce così tanto sui dispositivi mobili:
Tempo di analisi
Prima che JavaScript possa essere eseguito, il browser deve analizzarlo. Con una limitazione della CPU 4x, un bundle JS da 500 KB che esegue l'analisi in 100 ms su desktop impiega 400 ms nel test mobile. I temi Shopify in genere forniscono 200-600 KB di JavaScript.
Tempo di esecuzione
Ogni gestore di eventi, routine di inizializzazione e script di terze parti richiede 4 volte più tempo per essere eseguito. Gli script delle app che sembrano istantanei sul desktop diventano ritardi evidenti sui dispositivi mobili.
Concorso principale
Su dispositivi mobili, il thread principale gestisce l'esecuzione, il layout, la pittura e l'input dell'utente di JS. Con una CPU limitata, queste attività competono in modo più aggressivo, portando a un tempo di blocco totale più lungo e a un INP peggiore.
Cosa puoi fare
- Rinvia JavaScript non critico: Carica analisi, widget di chat e rivedi gli script dopo il rendering iniziale. Questa è l'ottimizzazione principale di Thunder.
- Rimuovi le app inutilizzate: Ogni app front-end aggiunge JavaScript. Controlla le app che non stai utilizzando e disinstallale.
- Utilizza JavaScript moderno: Moduli ES con
tipo="modulo"vengono analizzati in modo più efficiente dai browser moderni. - Suddivisione del codice: Non caricare JavaScript della pagina del prodotto sulle pagine della collezione e viceversa.
Per tecniche dettagliate di ottimizzazione JavaScript, consulta la nostra guida a correzione delle risorse che bloccano il rendering e gestione di script di terze parti.
Immagini reattive: la più grande vittoria mobile
Dopo JavaScript, le immagini sono il secondo maggiore contributore al divario di velocità tra dispositivo mobile e desktop. Senza immagini reattive, il tuo cellulare scarica la stessa enorme immagine hero che il tuo desktop visualizza a tutta larghezza: un enorme spreco su un viewport largo 412px.
Utilizza le immagini reattive integrate di Shopify
Il CDN di Shopify serve automaticamente le immagini nei formati moderni (WebP/AVIF) e può ridimensionarle al volo. Usa il url_immagine
Filtro filtro con tag_immagine
Il filtro per generare attributi srcset reattivi:
{{ product.featured_image | image_url: width: 1200 | image_tag:
widths: '200,400,600,800,1000,1200',
sizes: '(max-width: 768px) 100vw, 50vw',
loading: 'lazy'
}}Questo dice al browser: "Sui dispositivi mobili (sotto i 768 px), questa immagine riempie l'intera larghezza del viewport, quindi scarica una versione da ~ 400 px. Sul desktop, riempie metà del viewport, quindi scarica una versione da ~ 600–700 px." La differenza può essere enorme: un'immagine da 1200px potrebbe essere 150KB, mentre una versione da 400px è solo 25KB.
Ottimizzazione dell'immagine dell'eroe
La tua immagine eroe è in genere il tuo elemento LCP, l'elemento di contenuto più grande che determina il tuo punteggio di Pittura con contenuto più grande. Sui dispositivi mobili, questa immagine richiede un'attenzione speciale:
- Utilizza diversi ritagli di immagini per dispositivi mobili: Un banner desktop ampio ritagliato per dispositivi mobili perde impatto. Considera un eroe mobile separato e più alto.
- Precarica l'immagine LCP mobile: Aggiungi un suggerimento di precaricamento per la dimensione dell'immagine mobile per accelerare LCP.
- Non caricare pigramente l'eroe: L'immagine dell'eroe dovrebbe caricarsi con entusiasmo (
caricamento="ansioso") poiché è sopra la piega. - Usa fetchpriority="high": Di' al browser di dare priorità al download dell'immagine hero rispetto ad altre risorse.
Per un manuale completo sull'ottimizzazione delle immagini, consulta il nostro Guida all'ottimizzazione delle immagini di Shopify.
Ottimizzazioni specifiche per dispositivi mobili per Shopify
Oltre a JavaScript e alle immagini, ecco le ottimizzazioni mirate specificamente alle prestazioni mobili:
Riduci le dimensioni del DOM sui dispositivi mobili
Molti temi Shopify rendono elementi duplicati: un menu desktop E un menu mobile, entrambi sempre nel DOM. Su dispositivi mobili, nascondi gli elementi del desktop con
Visualizzazione : nessuna — ma ancora meglio, avvolgili in uno stato liquido o usali visibilità del contenuto: auto in modo che il browser possa saltare completamente i calcoli del layout.
Riduci al minimo i contenuti Above-the-Fold sui dispositivi mobili
I viewport mobili mostrano meno contenuti Above the Fold (altezza 823px contro 940px e la maggior parte è occupata dall'intestazione e dall'eroe). Semplifica il tuo cellulare "above the fold": un'immagine hero, un titolo, un CTA. Meno contenuti = meno rendering = LCP più veloce.
Riduci il conteggio dei file di caratteri
Ogni file di carattere rappresenta una richiesta di rete aggiuntiva, il che danneggia maggiormente il 4G limitato. Non utilizzare più di due famiglie di caratteri con 2-3 pesi ciascuna. Prendi in considerazione l'utilizzo di caratteri di sistema per il corpo del testo e il caricamento solo di un carattere personalizzato per i titoli. Ciò consente di risparmiare 100-300 KB ed eliminare i cambiamenti di layout di scambio dei caratteri.
Preconnessione a Origini critiche
Con un RTT di 150 ms nel test mobile, ogni nuova connessione al server aggiunge una latenza significativa. Aggiungi suggerimenti di preconnessione per i tuoi domini esterni più importanti:
<link rel="preconnect" href="https://cdn.shopify.com" crossorigin>
<link rel="preconnect" href="https://fonts.shopifycdn.com" crossorigin>Utilizza query multimediali CSS per stili solo per dispositivi mobili
Non inviare CSS solo per desktop ai browser mobili. Utilizzare supporto
Attributi sui tag di collegamento in modo che i browser mobili possano dare priorità ai CSS mobili e rinviare gli stili desktop.
Toccare Gestione eventi e INP sul cellulare
I dispositivi mobili utilizzano eventi touch invece dei clic del mouse e questo introduce un'unicità Sfide INP:
Il ritardo del tocco di 300 ms (problema precedente)
I browser meno recenti aggiungevano un ritardo di 300 ms dopo un tocco per rilevare i doppi tocchi. I browser moderni lo eliminano se la tua pagina lo include con larghezza=larghezza-dispositivo : incluso in tutti i temi Shopify. Ma alcuni script di app meno recenti potrebbero aggiungere ascoltatori di eventi touch che reintroducono i ritardi.
Ascoltatori tattili passivi
Tocca gli eventi che non chiamano preventDefault() dovrebbe essere contrassegnato come passivo: vero. Ciò consente al browser di iniziare a scorrere immediatamente invece di attendere per vedere se il gestore annulla lo scorrimento. Molte app Shopify meno recenti non lo fanno.
Toccare Dimensionamento target
Google consiglia che i target dei tocchi siano almeno 48x48 px con una spaziatura di 8 px. Obiettivi troppo piccoli portano a errori e frustrazione: non è un problema diretto di velocità, ma influisce sulla reattività percepita del tuo negozio.
PageSpeed Insights segnala gli ascoltatori touch non passivi e i target tocco sottodimensionati. Risolvere questi problemi migliora sia il tuo punteggio che la reale esperienza mobile. Per ulteriori informazioni sull'ottimizzazione specifica per dispositivi mobili, consulta la nostra Guida all'ottimizzazione della velocità mobile.
Obiettivi di punteggio mobile realistici per Shopify
Non inseguire un 100 perfetto sui dispositivi mobili: è praticamente impossibile per un vero negozio Shopify con app, analisi e contenuti di prodotto ricchi. Ecco gli obiettivi realistici:
| Tipo di negozio | Bersaglio mobile realistico | Bersaglio desktop | Note |
|---|---|---|---|
| Negozio minimo (1–2 app) | 60–80 | 90–98 | Tema Dawn, personalizzazione minima |
| Negozio medio (3-5 app) | 45–65 | 80–92 | Tema premium, recensioni + analisi |
| Negozio ricco di funzionalità (6+ app) | 35–55 | 70–88 | Tema personalizzato, molte app front-end |
| Negozio aziendale (oltre 10 app) | 25–45 | 60–80 | Personalizzazione complessa, integrazioni ERP |
Ricorda: The PageSpeed score is a synthetic benchmark. What actually matters for SEO and conversions are the Core Web Vitals (LCP, CLS, INP) from real user data. A store scoring 40 on mobile but passing all Core Web Vitals in the field is in a better position than a store scoring 60 but failing INP.
Per ulteriori informazioni sul significato del tuo punteggio, consulta le nostre guide su Benchmark di velocità di Shopify e comprendere PageSpeed Insights. Pronto per ottimizzare? Inizia con la nostra guida completa all'ottimizzazione.
Domande frequenti
Perché il mio punteggio di velocità Shopify su dispositivo mobile è molto inferiore a quello su desktop?
Google PageSpeed Insights testa i dispositivi mobili con una limitazione aggressiva: rallentamento della CPU 4x per simulare un telefono di fascia media e una rete limitata per simulare le condizioni 4G. Il test desktop utilizza la velocità di connessione effettiva e la piena potenza della CPU. Ciò significa che JavaScript che viene eseguito in 200 ms su desktop può richiedere più di 800 ms sul dispositivo mobile simulato. La stessa pagina con lo stesso codice otterrà sempre un punteggio più basso sui dispositivi mobili, in genere 20-40 punti in meno.
Google utilizza i punteggi mobile o desktop per il posizionamento SEO?
Google uses mobile-first indexing, meaning the mobile version of your site is what Google primarily crawls and uses for ranking. Core Web Vitals from mobile field data (real Chrome users on mobile devices) are the ranking signal. This makes mobile performance more important for SEO than desktop. However, Google evaluates Core Web Vitals (LCP, CLS, INP) separately for mobile and desktop — your desktop pages are ranked using desktop metrics and vice versa.
Quale dispositivo mobile simula Google PageSpeed Insights?
PageSpeed Insights utilizza Lighthouse, che simula un Moto G Power di fascia media (o equivalente) con 4x throttling della CPU su una connessione 4G limitata (download di ~1,6 Mbps, RTT di 150 ms). Questo è intenzionalmente duro: rappresenta l'esperienza per gli utenti con dispositivi medi, non di fascia alta. Le prestazioni mobili nel mondo reale per i tuoi clienti dipendono dai loro dispositivi e connessioni effettivi, motivo per cui i dati sul campo (CrUX) sono più importanti dei punteggi di laboratorio.
Devo prima ottimizzare per la velocità mobile o desktop?
Optimize for mobile first. Since Google uses mobile-first indexing, your mobile Core Web Vitals directly impact rankings. Additionally, over 70% of Shopify traffic is typically from mobile devices. If your mobile speed is good, your desktop speed will almost always be good too — the reverse isn't true. Focus on reducing JavaScript execution time, optimizing images for mobile viewports, and ensuring fast LCP on smaller screens.
Posso avere punteggi PageSpeed diversi per dispositivi mobili e desktop?
Sì, e quasi sicuramente lo farai. È estremamente comune che un negozio Shopify ottenga un punteggio di 35 su dispositivi mobili e 85 su desktop. Il divario di 30–50 punti è normale ed è causato dalle diverse condizioni di test (throttling della CPU, simulazione di rete, dimensione del viewport). Non farti prendere dal panico per un punteggio mobile basso se il tuo punteggio desktop è sano: il divario indica un normale sovraccarico JavaScript, non un sito danneggiato.
In che modo le immagini reattive influiscono sulla velocità mobile rispetto a quella desktop?
Le immagini reattive (utilizzando gli attributi srcset e sizes) consentono al browser di scaricare immagini di dimensioni adeguate per ciascun dispositivo. Senza di essi, un telefono cellulare scarica la stessa immagine hero di 2000 px di un monitor desktop, sprecando larghezza di banda e aumentando l'LCP di pochi secondi. Il filtro image_url Liquid di Shopify supporta il dimensionamento reattivo e la maggior parte dei temi moderni implementa automaticamente srcset. Questa è una delle più grandi vittorie per colmare il divario di velocità tra mobile e desktop.