Prestazioni mobili: come realizzare un sito mobile friendly

Perché le prestazioni sui dispositivi mobili sono così importanti?

Il Web si sta convertendo al mobile. Ben oltre il 50% delle visualizzazioni globali di pagine Web avviene su dispositivi mobili. mentre in alcune regioni, come l'Asia e l'Africa, la percentuale è molto più alta e aumenta costantemente di anno in anno.

I principali motori di ricerca sono consapevoli di questa tendenza, ed è per questo che assegnano la priorità ai siti che si caricano velocemente sui dispositivi mobili. I possessori di uno smartphone o di un tablet dispongono solitamente di una larghezza di banda limitata, ma desiderano comunque trovare rapidamente le informazioni che cercano. Questi utenti tendono ad avere meno pazienza, e questo si traduce in frequenze di rimbalzo alte per i siti che si caricano con lentezza. La frequenza di rimbalzo, lo ricordiamo, è la percentuale di visitatori di un sito che lo abbandona dopo aver visualizzato una sola pagina.

Sia Google che altre aziende che prestano attenzione alla velocità dei siti hanno stabilito che il tempo di caricamento massimo tollerabile per un sito mobile si aggira intorno ai tre secondi. Superata questa soglia, la retention degli utenti cala drasticamente. I motori di ricerca penalizzano i siti che si caricano lentamente posizionandoli nella parte passa dei risultati di ricerca, e questo vale soprattutto per gli utenti su mobile.

Un tempo di caricamento limite di tre secondi per una connessione mobile non lascia molti margini, ma è possibile applicare strategie di provata efficacia per tenere bassi i tempi di caricamento.

Come migliorare le prestazioni su dispositivi mobili

Esistono diversi fattori che influenzano le prestazioni dei dispositivi mobili, pertanto sono varie le strategie e prassi consigliate che possono migliorare i tempi di caricamento.

Riduzione delle dimensioni e del numero complessivo dei file

Per assicurare tempi di caricamento più rapidi, è opportuno che tutti i file di un sito web siano ridotti alle minime dimensioni possibili. Spesso i file più corposi sono quelli contenenti delle immagini, e possono essere minimizzati mediante un ottimizzatore o convertendoli in un formato immagine più leggero, come SVG.

Anche i file HTML, JavaScript e CSS possono essere resi più piccoli tramite la minificazione. Per minificazione del codice si intende l'eliminazione di tutti gli spazi bianchi e i commenti, in modo da ristrutturare il codice nel modo più compatto possibile. Con questa tecnica, le dimensioni di un file vengono ridotte al minimo indispensabile. Sebbene questa operazione renda il codice praticamente illeggibile per un essere umano, un browser web sarà comunque in grado di eseguirlo senza problemi.

Oltre a creare file di dimensioni inferiori, è opportuno anche ridurre al minimo il numero complessivo di file. Ogni file aggiuntivo richiesto per caricare un sito web implica una richiesta e una risposta supplementari, e questi cicli di andata e ritorno vanno ad aumentare il tempo di caricamento. Per i siti con più file JavaScript e CSS è opportuno raggruppare tutto il codice JavaScript in un unico file, e fare lo stesso con i file CSS. Per le pagine che richiedono pochissimo JavaScript o CSS, l'utilizzo di stili in linea* può migliorare significativamente i tempi di caricamento.

*In genere, gli sviluppatori web scrivono codice HTML, JavaScript e CSS in file diversi. Utilizzando una tecnica chiamata “stili in linea”, uno sviluppatore può scrivere il codice JavaScript e/o CSS nello stesso file del HTML.

Memorizzazione delle risorse sul perimetro

In genere, quando un utente visita un sito web, il suo dispositivo deve comunicare con il server per acquisire i file del sito. Se il server si trova a Venezia e l'utente si trova a Padova (40 km di distanza), questo processo è abbastanza veloce. Che succede però se l'utente si trova a Tokyo (a oltre 9.000 km di distanza)? Succede che ogni combinazione richiesta-risposta dovrà viaggiare per migliaia di chilometri, e questo aggiungerà un ritardo notevole al tempo di caricamento del sito.

Un metodo diffuso per limitare questo problema è utilizzare una Content Delivery Network (CDN). Una CDN globale memorizza i contenuti sul perimetro della rete. Ciò significa che la CDN dispone di server di caching, o di memorizzazione, ubicati in data center sparsi in tutto il mondo, in modo che chiunque abbia accesso a Internet non si trovi mai troppo distante da un data center. I server ubicati nei data center possono comunicare con i server di origine per memorizzare i dati dei siti. In questo modo, chi visita un sito web associato a una CDN può acquisire i file del sito direttamente dal data center a lui più prossimo. Questo garantisce agli utenti dei tempi di risposta rapidi alle loro richieste, indipendentemente dalla loro ubicazione geografica.

Chiamate API cache

Le chiamate API sono delle richieste HTTP che mirano a ottenere dati da risorse esterne. Ad esempio, un sito di recensioni cinematografiche come Rotten Tomatoes può effettuare chiamate API a un servizio di biglietteria come Fandango, in modo che gli utenti che navigano su Rotten Tomatoes possano vedere gli orari degli spettacoli cinematografici del posto in cui risiedono. Sebbene le chiamate API possano contribuire a creare un'esperienza efficace e ridurre inutili duplicazioni di lavoro, creano anche nuove richieste HTTP che possono rallentare i tempi di caricamento.

Le chiamate API possono essere memorizzate nella cache per contenere al minimo queste richieste HTTP aggiuntive. Nell'esempio precedente, Rotten Tomatoes deve recuperare gli orari dei film delle sale di Los Angeles solo una volta al giorno. Può configurare il proprio sito affinché carichi nella cache questa chiamata API una volta al giorno. In questo modo, se 10.000 utenti di Los Angeles visitano Rotten Tomatoes ogni giorno, solo il primo di questi utenti dovrà aspettare per la chiamata API a Fandango.

Assegnare priorità ai contenuti visibili

Ciò che un utente vede immediatamente quando carica una pagina web è spesso solo la punta dell'iceberg; per visualizzare il resto della pagina, è necessario scorrere verso il basso. Il contenuto che appare sullo schermo di un utente prima che si verifichi lo scorrimento è chiamato contenuto "above-the-fold", o "sopra la piega". Gli sviluppatori web scrivono il codice in modo tale che il contenuto above-the-fold venga sempre caricato per primo. Una tecnica per raggiungere questo obiettivo è chiamata lazy loading, che funziona caricando dinamicamente il contenuto below-the-fold mentre un utente scorre la pagina verso il basso.

Evitare i reindirizzamenti

Per vari motivi, alcuni siti web creano reindirizzamenti al caricamento delle pagine. Ad esempio, i reindirizzamenti 301 sono comunemente utilizzati sui siti web che sono stati rinominati o che hanno subito un rebranding. Questa pratica dovrebbe essere evitata, quando possibile, poiché i reindirizzamenti consumano tempo di caricamento prezioso.

Riassunto

Data la crescente diffusione della navigazione su mobile, diventa sempre più importante disporre di un sito mobile ad alte prestazioni. I siti per dispositivi mobili veloci vengono ricompensati con livelli di engagement maggiori e tassi di conversione migliori, oltre a un boost in termini di SEO. Per godere di questi vantaggi, i proprietari di siti devono implementare una o più delle strategie sopra descritte.