Perchè il tuo sito WordPress è lento su mobile
La lentezza su mobile è uno dei problemi più frustranti e diffusi per i siti WordPress. Un sito che carica in 2 secondi su desktop può facilmente impiegare 6-8 secondi su connessione mobile 4G, e su 5G il divario rimane significativo. Le ragioni sono molteplici e vanno dalla potenza di calcolo limitata dei dispositivi mobili alla gestione inefficiente delle risorse da parte di temi e plugin non ottimizzati per mobile.
Google ha reso la velocità mobile un fattore di ranking prioritario con il mobile-first indexing e i Core Web Vitals. Un sito lento su mobile non solo penalizza l’esperienza utente, ma riduce attivamente il posizionamento nei risultati di ricerca. In questa guida analizziamo le cause specifiche della lentezza su mobile e le strategie per risolverle, partendo dalle differenze fondamentali tra performance desktop e mobile.
Differenze tra performance desktop e mobile
I dispositivi mobili hanno limitazioni hardware significative rispetto ai desktop. La CPU di uno smartphone di fascia media ha una potenza di calcolo notevolmente inferiore a un processore desktop, e la memoria RAM è limitata (4-8 GB contro 16-32 GB dei desktop). I browser mobili allocano meno risorse a ogni scheda, quindi JavaScript pesante o animazioni complesse possono causare lag e blocchi del rendering. Inoltre, la cache del browser su mobile è molto più piccola, riducendo l’efficacia del caching delle risorse.
La connessione di rete è un altro fattore critico. Anche con il 5G in espansione, molti utenti navigano ancora in 4G o addirittura 3G in alcune aree. La latenza delle reti mobili è maggiore, e la larghezza di banda variabile. I siti che non ottimizzano per queste condizioni caricano risorse pesanti che su connessioni lente bloccano la visualizzazione della pagina per secondi interi. Il Time to First Byte (TTFB) è spesso più alto su mobile a causa della latenza di rete, e ogni richiesta aggiuntiva peggiora ulteriormente la situazione.
Cause comuni di lentezza su mobile
Immagini non ottimizzate per mobile
Le immagini sono la causa numero uno di lentezza su mobile. Molti siti WordPress caricano immagini a piena risoluzione (4000×3000 pixel, 2-5 MB) anche su schermi mobili da 375×812 pixel. Questo significa scaricare e decodificare 10-20 volte più dati del necessario, consumando banda e CPU mobile preziose. Le immagini devono essere ridimensionate alla dimensione massima di visualizzazione (1200px di larghezza per la maggior parte dei layout) e compresse con formati moderni come WebP o AVIF.
La soluzione è l’implementazione di immagini responsive con gli attributi srcset e sizes di HTML5. Questi attributi permettono al browser di scegliere l’immagine più adatta alla risoluzione dello schermo, scaricando immagini piccole per schermi piccoli e immagini grandi per desktop. WordPress supporta nativamente srcset da diverse versioni, ma è importante verificare che il tema lo utilizzi correttamente. Plugin come EWWW Image Optimizer, ShortPixel, o WebP Express automatizzano la conversione in WebP e la generazione di dimensioni multiple per ogni immagine caricata.
Risorse CSS e JavaScript render-blocking
Su mobile, l’ordine di caricamento di CSS e JavaScript è ancora più critico che su desktop. I fogli di stile che bloccano il rendering impediscono al browser di visualizzare qualsiasi contenuto finché non vengono scaricati e processati. JavaScript render-blocking ha lo stesso effetto, ritardando la visualizzazione della pagina. Su connessioni mobili lente, questi blocchi possono aggiungere secondi al tempo di caricamento percepito.
La soluzione è il critical CSS: estrarre il CSS necessario per il contenuto above-the-fold (quello visibile senza scroll) e inlinearlo direttamente nell’HTML, mentre il CSS restante viene caricato in modo asincrono. Plugin come WP Rocket, Flying Press, o Autoptimize generano automaticamente il critical CSS. Per JavaScript, utilizza gli attributi async o defer per evitare il render-blocking: async carica lo script in parallelo e lo esegue appena pronto, defer lo esegue solo dopo che il documento è stato completamente parsato. La maggior parte degli script di terze parti (analytics, social widget) possono essere differiti senza impattare l’esperienza utente.
Caricamento dei web font
I web font sono una causa comune di rallentamento su mobile e di Cumulative Layout Shift (CLS). Ogni font richiede una richiesta HTTP aggiuntiva per scaricare il file WOFF2, e il browser blocca il rendering del testo fino al caricamento del font (FOUT – Flash of Unstyled Text). Su connessioni mobili lente, questo ritardo è ancora più pronunciato. Google Fonts aggiunge un DNS lookup aggiuntivo e spesso carica più varianti di peso (regular, bold, italic) che non vengono tutte utilizzate.
La soluzione è limitare il numero di font a 2-3 famiglie massimo e il numero di varianti di peso a 2-3 per font. Utilizza font-display: swap nella dichiarazione @font-face per garantire che il testo sia visibile immediatamente con un font di sistema mentre il font personalizzato si carica in background. Per Google Fonts, plugin come WP Rocket o OMGF (Optimize My Google Fonts) permettono di ospitare i font localmente, eliminando il DNS lookup aggiuntivo. La preferenza va sempre a font di sistema quando possibile, poiché sono già presenti sul dispositivo e non richiedono download.
Script di terze parti pesanti
Analytics, pixel di tracciamento, widget social, chatbot, e altri script di terze parti sono tra i maggiori responsabili della lentezza su mobile. Ogni script aggiunge richieste HTTP, blocca il thread principale, e consuma CPU. Uno script di chat che richiede 200KB di JavaScript può sembrare poco su desktop, ma su mobile con CPU limitata può bloccare l’interattività della pagina per secondi. Lo stesso vale per Facebook Pixel, Google Tag Manager, e script di remarketing.
La strategia è caricare questi script solo quando necessario. Usa il deferred loading per posticipare il caricamento a dopo che la pagina è stata visualizzata. Per widget social, utilizza versioni statiche (link e icone) che si attivano al click invece di caricare il widget interattivo al caricamento della pagina. Esistono plugin specifici per gestire il consenso agli script di terze parti, come Complianz o Cookiebot, che caricano gli script solo dopo il consenso dell’utente, migliorando la velocità iniziale della pagina. Valuta periodicamente quali script sono realmente necessari e rimuovi quelli che non forniscono valore misurabile.
Tempo di esecuzione JavaScript
Il tempo di esecuzione JavaScript è un problema amplificato su mobile. Un singolo script che impiega 200ms per eseguirsi su desktop può richiedere 800ms su mobile a causa della CPU più lenta. jQuery, utilizzato da molti temi e plugin WordPress, è particolarmente pesante: la sola libreria jQuery aggiunge 90KB di JavaScript da parsare ed eseguire. Plugin che fanno abbondante uso di DOM manipulation, animazioni, e scroll/ resize event listener possono facilmente bloccare il thread principale per secondi su mobile.
La soluzione passa attraverso diverse strategie: evita plugin che caricano JavaScript su tutte le pagine se servono solo in pagine specifiche (la maggior parte dei plugin carica script globalmente). Usa event delegation invece di listener individuali per ridurre il numero di event handler. Limita l’uso di animazioni JavaScript preferendo animazioni CSS (che sono accelerate via GPU). Plugin come Asset CleanUp o Flying Scripts permettono di disabilitare selettivamente script su specifiche pagine o tipi di contenuto, riducendo drasticamente il JavaScript caricato senza impattare le funzionalità.
Navigazione mobile non ottimizzata
I menu di navigazione su mobile sono spesso implementati in modo inefficiente. I mega menu pensati per desktop, con decine di voci e sottovoci, vengono semplicemente nascosti su mobile ma il loro HTML e JavaScript rimangono caricati nella pagina. Il menu hamburger, che dovrebbe essere leggero, spesso utilizza JavaScript pesante per l’apertura e chiusura, con transizioni e animazioni che consumano CPU. Alcuni plugin di menu caricano intere librerie JavaScript solo per l’animazione del menu mobile.
La soluzione è utilizzare menu mobili nativi CSS, con transizioni hardware-accelerate (transform e opacity) invece di animazioni JavaScript. I moderni temi block-based di WordPress generano menu mobili efficienti senza dipendere da librerie esterne. Se usi un page builder, verifica che il menu mobile sia ottimizzato e non carichi JavaScript non necessario. Riduci il numero di voci nel menu mobile (5-7 voci massime) per mantenere l’esperienza utente fluida. Un menu mobile ben progettato dovrebbe aprirsi e chiudersi in meno di 100ms su qualsiasi dispositivo.
Google Core Web Vitals su mobile
I Core Web Vitals di Google sono metriche specifiche che misurano la qualità dell’esperienza utente, e sono particolarmente critiche su mobile. LCP (Largest Contentful Paint) misura quanto tempo impiega l’elemento più grande della pagina a diventare visibile: su mobile, un’immagine hero non ottimizzata o un font lento possono far slittare l’LCP oltre i 4 secondi. CLS (Cumulative Layout Shift) misura gli spostamenti inaspettati del layout: su mobile, annunci inseriti dopo il caricamento del contenuto o immagini senza dimensioni esplicite causano CLS elevato. FID (First Input Delay) misura il tempo che intercorre tra la prima interazione dell’utente e la risposta del browser: su mobile, JavaScript pesante sul thread principale ritarda l’interattività.
Per migliorare i Core Web Vitals su mobile, le azioni prioritarie sono: ottimizzare l’immagine LCP (carica subito, usa WebP/AVIF, dimensioni appropriate), specificare dimensioni width/height per tutte le immagini e video per prevenire CLS, differire CSS e JavaScript non critici, e ridurre il tempo di esecuzione JavaScript sotto i 200ms sul thread principale. Google PageSpeed Insights mostra esattamente quali problemi affliggono il tuo sito su mobile, con suggerimenti specifici per risolverli. Monitora i Core Web Vitals in Google Search Console per identificare le pagine con performance insufficienti.
Strategie di ottimizzazione mobile-first
L’approccio mobile-first non è solo una metodologia di design ma anche una strategia di performance. Inizia progettando e ottimizzando per la versione mobile del tuo sito, poi aggiungi miglioramenti progressivi per desktop. Questo approccio garantisce che il sito sia veloce su mobile, mentre il desktop beneficia comunque delle ottimizzazioni. La critical CSS dovrebbe essere generata per la viewport mobile (375×812), e le media query dovrebbero dare priorità agli stili mobili come default.
Il lazy loading delle immagini e dei video (caricare solo quando entrano nel viewport) è doppiamente importante su mobile dove la banda è limitata. WordPress ha introdotto il lazy loading nativo dalla versione 5.5, ma per un controllo più granulare utilizza plugin specializzati. La tecnica del responsive images con srcset garantisce che i dispositivi mobili non scarichino mai immagini più grandi del necessario. L’AMP (Accelerated Mobile Pages) non è più raccomandato da Google come soluzione generale, ma il Progressive Web App (PWA) approach con service worker per il caching delle risorse sulle visite successive sta guadagnando terreno. PWA permette di caricare pagine quasi istantaneamente per visitatori ricorrenti, indipendentemente dalla qualità della connessione.
Conclusione
La lentezza su mobile in WordPress è causata da una combinazione di fattori: immagini non ottimizzate che consumano banda e CPU, risorse CSS e JavaScript render-blocking che ritardano la visualizzazione, web font eccessivi che causano CLS, script di terze parti pesanti che bloccano il thread principale, navigazione mobile inefficiente, e configurazione inadeguata dei Core Web Vitals. La soluzione è un approccio mobile-first all’ottimizzazione: immagini responsive con srcset e WebP, critical CSS, defer JavaScript, lazy loading, e design CSS-first per animazioni e navigazione. Con queste strategie, puoi trasformare un sito lento su mobile in un sito performante che soddisfa i requisiti di Google e offre un’esperienza utente eccellente su qualsiasi dispositivo.