Prestazioni Web Mobile: Ottimizzazione e Migliori Pratiche

Perché le prestazioni mobile sono diverse

I dispositivi mobili hanno una capacità CPU e memoria inferiore. Il tempo di parse e compile di JavaScript è maggiore.

Condizioni di rete: 3G/4G/5G, WiFi. Larghezza di banda e latenza variabili. Gli utenti mobili possono essere su connessioni più lente.

Batteria: Il JavaScript pesante e le animazioni consumano la batteria. Prestazioni = durata della batteria.

Dimensione dello schermo: Immagini e layout ottimizzati per schermi piccoli. Mobile-first invece di desktop-first.

Design Mobile-First

CSS mobile-first: Stili mobili prima, poi override con media query per desktop. @media (min-width: 768px) per schermi grandi.

Meta tag viewport: <meta name="viewport" content="width=device-width, initial-scale=1">. Scalatura corretta su mobile.

Touch targets: Pulsanti e link di almeno 48x48px. Facilmente tappabili con il dito. 8px di spazio tra elementi vicini.

Dimensione del font: Minimo 16px. iOS fa zoom su input inferiori a 16px. Questo rompe l'UX.

Navigazione: Menu hamburger, navigazione inferiore, barra delle schede. Navigazione accessibile su mobile.

Ottimizzazione delle Immagini

Immagini responsive: Dimensione corretta con srcset e sizes. Non caricate immagini grandi su mobile.

Compressione delle immagini: Formato WebP/AVIF. Quality 75-80 sufficiente per mobile. Comprimete con TinyPNG, Squoosh.

Lazy loading: Lazy load le immagini sotto il fold. Attributo loading="lazy".

Placeholder: Placeholder blur-up o skeleton. Mostrate il placeholder mentre l'immagine si carica.

CDN: Nodo CDN più vicino per gli utenti mobili. CDN globali come Cloudflare, Fastly.

Ottimizzazione JavaScript

Dimensione del bundle: Bundle più piccolo su mobile. Caricate solo il codice necessario con code splitting.

Tree shaking: Rimuovete il codice inutilizzato. Usate ES modules.

Lazy loading: Lazy load i moduli pesanti (chart, editor, map). Con dynamic import().

Polyfill: Rimuovete i polyfill non necessari. Usate le API native invece di core-js (i browser moderni le supportano).

Web Workers: Separate i calcoli pesanti dal thread principale. Non bloccate il thread UI su mobile.

Ottimizzazione della Rete

HTTP/2 o HTTP/3: Elaborazione parallela di più richieste. Riduce la latenza su mobile.

Compressione: Comprimete le risorse basate su testo con Gzip/Brotli. Risparmio del 60-80%.

Caching: Cache offline con Service Worker. Caricamento veloce nelle visite ripetute con strategia cache-first.

Prefetch/Preconnect: Precaricate le risorse critiche. Stabilite la connessione DNS e TCP in anticipo.

Resource hints: Precaricate CSS e font critici con <link rel="preload">.

Test e Monitoraggio

Test su dispositivo reale: Testate su veri dispositivi mobili. L'emulazione del dispositivo di Chrome DevTools non è sufficiente.

Lighthouse mobile: Audit delle prestazioni mobili. Testate con throttling (CPU 4x slowdown, slow 4G).

WebPageTest: Testate con dispositivo mobile e profilo di connessione. Analisi di filmstrip e waterfall.

RUM: Dati di utenti mobili reali. Segmentazione per tipo di dispositivo, velocità di connessione.

Core Web Vitals: Metriche separate per mobile e desktop. Rapporto mobile in Google Search Console.