Come ottimizzare un sito per i dispositivi mobili

Perché l'ottimizzazione mobile è fondamentale

Più del 60% del traffico web globale proviene dai dispositivi mobili, e in alcuni settori questa percentuale supera l'80%. Google è passato al mobile-first indexing per tutti i nuovi siti nel 2019 e, da marzo 2021, usa esclusivamente la versione mobile di un sito per l'indicizzazione e il posizionamento. Ciò significa che se il tuo sito non funziona bene su mobile, non funziona bene nemmeno nella ricerca di Google, indipendentemente da quanto sia perfetta la versione desktop.

Gli utenti mobili hanno aspettative diverse rispetto agli utenti desktop. Si aspettano un caricamento veloce (il 53% degli utenti abbandona un sito che impiega più di 3 secondi a caricarsi su mobile), una navigazione con una sola mano, testo leggibile senza zoom, pulsanti e form touch-friendly e un inserimento dati minimo. Un sito che non soddisfa queste aspettative perde visitatori, conversioni e posizioni nella ricerca.

Mobile-first indexing

Cosa significa nella pratica

Il mobile-first indexing significa che il bot di Google esegue la scansione e l'indicizzazione principalmente della versione mobile del tuo sito. Se hai contenuti visibili solo nella versione desktop ma non in quella mobile, Google non li indicizzerà. Questo è fondamentale per i siti che usano un design responsive con contenuti nascosti su mobile (display:none) o per i siti con una versione mobile separata m.dominio.com che ha meno contenuti rispetto al desktop.

Come verificare la versione mobile

Usa Google Search Console per monitorare il mobile-first indexing. Nel report Copertura puoi vedere se Google sta scansionando la versione mobile o desktop del tuo sito. Lo strumento Controllo URL mostra come Google vede una pagina specifica. Il report Usabilità su dispositivi mobili evidenzia problemi come testo troppo piccolo, elementi sovrapposti o link posizionati troppo vicini tra loro. Il Test di ottimizzazione mobile di Google (search.google.com/test/mobile-friendly) verifica rapidamente se una pagina specifica è ottimizzata per mobile.

Web design responsive

Le basi del responsive

Il web design responsive è un approccio in cui il layout del sito si adatta automaticamente alle dimensioni dello schermo dell'utente. Invece di versioni separate per desktop e mobile, hai un unico sito che riorganizza fluidamente gli elementi. Gli elementi chiave del design responsive sono il meta tag viewport che indica al browser di adattare la larghezza dei contenuti a quella del dispositivo, le media query CSS che applicano stili diversi per dimensioni dello schermo diverse, le immagini flessibili che si ridimensionano insieme al loro contenitore e una griglia fluida che usa percentuali invece di pixel fissi per le larghezze degli elementi.

L'approccio mobile-first alla programmazione

La pratica migliore è programmare da mobile a desktop (mobile-first). Gli stili CSS di base sono per il mobile, e le media query aggiungono stili per gli schermi più grandi. Questo ha due vantaggi: i dispositivi mobili non devono scaricare ed elaborare CSS che poi vengono sovrascritti (prestazioni migliori), e ti costringe a dare priorità ai contenuti e alle funzionalità per lo schermo più piccolo. I framework CSS come Tailwind CSS e Bootstrap 5 usano un approccio mobile-first con breakpoint per gli schermi sm, md, lg e xl.

Errori comuni nel design responsive

Gli errori più comuni includono larghezze fisse degli elementi in pixel (usa max-width e percentuali), scroll orizzontale su mobile (verifica che nessun elemento superi la larghezza dello schermo), pulsanti e link troppo piccoli (la dimensione minima del touch target è 48x48 pixel secondo le linee guida di Google), immagini non ottimizzate (una grande immagine desktop si carica anche su mobile), pop-up che coprono l'intero schermo mobile (Google penalizza gli interstitial intrusivi) e form con troppi campi (riduci al minimo l'input su mobile, usa l'autocompletamento).

Ottimizzazione della velocità su mobile

Perché la velocità è più importante su mobile

I dispositivi mobili hanno tipicamente connessioni internet più lente (4G/LTE rispetto alla fibra), minore potenza di elaborazione per il rendering delle pagine e meno RAM per l'elaborazione JavaScript. Google PageSpeed Insights (o il nostro strumento gratuito di test della velocità) mostra punteggi separati per mobile e desktop: il punteggio mobile è quasi sempre più basso ed è quello che influisce più fortemente sul posizionamento.

Ottimizzazione delle immagini per mobile

Le immagini sono il motivo più comune del caricamento lento su mobile. Usa immagini responsive con l'attributo srcset che serve dimensioni diverse delle immagini per schermi diversi: il mobile riceve un'immagine da 400px invece di un'immagine desktop da 1600px. Anche il formato dell'immagine conta: i formati WebP e AVIF sono del 30-50% più leggeri del JPEG a parità di qualità. Il lazy loading (l'attributo loading="lazy") rinvia il caricamento delle immagini non visibili sullo schermo. WordPress aggiunge automaticamente il lazy loading a tutte le immagini dalla versione 5.5.

Ottimizzazione del JavaScript

Il JavaScript è spesso il principale responsabile dei siti mobili lenti. Riduci al minimo la quantità di JavaScript: ogni kilobyte di JS richiede download, parsing ed esecuzione, e su un processore mobile ciò richiede molto più tempo che su desktop. Usa il code splitting per caricare solo il JS necessario alla pagina corrente. Rinvia il caricamento del JavaScript non critico con gli attributi async o defer. Evita i grandi framework JS per i siti semplici: se ti servono solo uno slider e un menu hamburger, non hai bisogno di React o Angular.

Critical CSS

La tecnica del Critical CSS estrae il CSS necessario a renderizzare i contenuti above-the-fold e lo inserisce inline nell'HTML, mentre il resto del CSS viene caricato in modo asincrono. Su mobile i contenuti above-the-fold sono più piccoli (altezza del viewport minore), quindi anche il critical CSS è più piccolo. Strumenti come Critical, Penthouse e CriticalCSS.com generano automaticamente il critical CSS. I plugin WordPress come WP Rocket e Autoptimize hanno il supporto integrato per questa ottimizzazione. Per approfondire la velocità, leggi la nostra guida per velocizzare un sito.

AMP (Accelerated Mobile Pages)

Che cos'è AMP

AMP è il framework di Google per creare pagine mobili ultrarapide. Le pagine AMP usano un sottoinsieme limitato di HTML, CSS inline fino a 75KB e JavaScript minimo (solo la libreria AMP). Google memorizza in cache le pagine AMP sulla propria rete CDN, ottenendo un caricamento quasi istantaneo. AMP era particolarmente popolare per i siti di notizie e i blog dove la velocità di lettura è fondamentale.

Se ti serve AMP

AMP non è più necessario per il carosello Top Stories di Google (da giugno 2021) e non è un fattore di posizionamento diretto. Se il tuo sito ha già buoni punteggi Core Web Vitals, probabilmente non ti serve AMP. Tuttavia, AMP può essere utile per i siti con un'alta frequenza di rimbalzo su mobile (AMP riduce drasticamente il tempo di caricamento), per i siti di notizie e i blog con molti articoli, per i siti con infrastruttura debole dove la cache della CDN di Google aiuta in modo significativo e per l'email marketing (AMP for Email consente email interattive). Per WordPress, il plugin AMP di Google e XWP genera automaticamente le versioni AMP delle tue pagine.

Core Web Vitals su mobile

LCP (Largest Contentful Paint)

L'LCP misura il tempo di caricamento dell'elemento visibile più grande della pagina, di solito l'immagine hero o il titolo principale. Su mobile l'obiettivo è un LCP inferiore a 2,5 secondi. I problemi più comuni sono grandi immagini non ottimizzate, tempo di risposta lento del server (TTFB) e risorse che bloccano il rendering. Effettua il preload dell'immagine LCP con link rel="preload", usa un formato ottimizzato (WebP) e dimensioni appropriate, e riduci al minimo il CSS e il JS che bloccano il rendering.

INP (Interaction to Next Paint)

L'INP ha sostituito il FID come metrica Core Web Vital e misura la reattività del sito alle interazioni dell'utente. Su mobile, un INP inferiore a 200 millisecondi è un buon punteggio. I problemi comuni sono attività JavaScript di lunga durata che bloccano il thread principale, manipolazioni complesse del DOM e troppi event listener. Le soluzioni includono lo spezzettamento delle attività lunghe in attività più piccole (yield to main thread), il debouncing degli handler degli eventi e l'uso dei web worker per le operazioni computazionalmente intensive.

CLS (Cumulative Layout Shift)

Il CLS misura la stabilità visiva della pagina, ovvero quanto gli elementi si spostano durante il caricamento. Su mobile, un CLS inferiore a 0,1 è un buon punteggio. Le cause più comuni di un CLS scadente sono le immagini senza attributi width e height (il browser non sa quanto spazio riservare), gli annunci iniettati dinamicamente che spingono i contenuti, i web font che cambiano la dimensione del testo al caricamento (FOUT) e i contenuti iniettati sopra quelli esistenti. Definisci sempre le dimensioni per immagini e video, usa font-display: swap per i web font e riserva lo spazio per gli annunci.

Testare l'ottimizzazione mobile

• Google PageSpeed Insights: report dettagliato sulle prestazioni con raccomandazioni specifiche per mobile e desktop.
• Modalità dispositivo di Chrome DevTools: simula diversi dispositivi mobili nel browser per testare layout e funzionalità.
• BrowserStack e LambdaTest: test su dispositivi mobili reali nel cloud, con modelli, versioni di sistema operativo e browser diversi.
• Google Search Console: il report Usabilità su dispositivi mobili individua le pagine con problemi mobili.
• WebPageTest: uno strumento avanzato di test della velocità con opzioni per dispositivi mobili e connessioni lente.
• Lighthouse: lo strumento di Google per un'analisi completa di prestazioni, accessibilità, SEO e best practice.

Conclusione

L'ottimizzazione mobile non è facoltativa: è un requisito per ogni sito che vuole essere visibile nella ricerca di Google e offrire una buona esperienza utente. Il design responsive con un approccio mobile-first, le immagini ottimizzate, il JavaScript minimo e buone metriche Core Web Vitals sono le basi di un'ottimizzazione mobile di successo. Su BeoHosting, tutti i piani di hosting sono ottimizzati per una distribuzione veloce dei contenuti sui dispositivi mobili grazie al web server LiteSpeed, alla cache lato server e a una CDN gratuita che velocizza il caricamento per gli utenti di tutto il mondo.