Christian Cleva
Secondo il rapporto DIGITAL 2020 di WeAreSocial ci sono più di 5 miliardi di utenti mobile a livello globale. Entro la fine del 2021 questi utenti realizzeranno, ogni anno, 2.000 miliardi di euro di acquisti su e-commerce (il 65% del totale).
Siamo già stati spettatori della transazione di Google al mobile-first, ma molte aziende ed esperti di marketing stanno tardando ad ottimizzare in modo efficace prestazioni ed usabilità di siti ed app mobile.
Ma, l’ottimizzazione per dispositivi mobili, va ben oltre la semplice creazione di un sito Web responsive. Si tratta di progettare un sito Web con i tuoi visitatori ideali al centro di ogni scelta. Ogni aspetto va definito e personalizzato per offrire un esperienza friendly al tuo pubblico mobile.
Diamo quindi un’occhiata ad alcuni suggerimenti di ottimizzazione delle prestazioni mobili facili da implementare che renderanno i tuoi siti mobili velocissimi!
Mobile-First Indexing
Avrai certamente già incontrato, navigando con il tuo smartphone, siti di difficile navigazione, con pop-up sovrapposti o pulsanti impossibili da cliccare, lenti e poco reattivi. Google, per mettere al bando questi contenuti, ha introdotto da qualche tempo la mobile-first indexing.
Che cos’è la mobile-first indexing?
Google, nel settembre 2020 completerà una transizione avviata nel 2018: la maggior parte delle richieste di scansione, e l’indicizzazione del tuo sito Web sarà eseguita dalla versione mobile del crawler di Google.
Mobile-first perché, in assenza di una versione del sito Web ottimizzata per dispositivi mobili, sarà comunque indicizzata la versione desktop. Poiché Google dà la priorità alle versioni mobili dei siti Web, la mancanza di un’esperienza ottimizzata per i dispositivi mobili, o peggio problemi che ne pregiudicano l’accessibilità, potrebbero avere un impatto negativo sul posizionamento del tuo sito Web.
Eseguire gli strumenti di diagnostica forniti da Google
Secondo statistiche fornite da Google stessa, il tempo medio, globale, di caricamento delle pagine Web da dispositivo mobile, nel 2018, era di 15,7 secondi. È un valore incredibilmente lento!
A rincarare la dose, arriva una ricerca di Kissmetrics, secondo la quale, la percentuale di abbandono di un sito Web è del 3% se il sito si carica in più di 1 secondo, 30% se il sito si carica in più di 6 secondi, e 50% se il sito si carica in più di 10 secondi.
Ma, come si possono ottenere tempi di caricamento sufficientemente brevi?
Per prima cosa, bisogna raccogliere quanti più dati possibile riguardo prestazioni e criticità del tuo sito. Esistono molti strumenti di analisi per testare le prestazioni del sito su dispositivi mobili, ma i migliori tre sono forniti da Google stessa.
Pagespeed Insight
Questo primo strumento non ti fornirà soltanto un indice globale della velocità della pagina analizzata, ma elencherà in modo abbastanza dettagliato tutte le opportunità e le ottimizzazioni che possono essere messe in opera nella pagina per migliorare la velocità della stessa.
Test My Site
Questo strumento di analisi mostrerà come si comportano le pagine del tuo sito Web simulando lo schermo di un dispositivo mobile ed una connessione 4G. Le opportunità e ottimizzazioni suggerite da questo strumento di test riguardano sì, la velocità, ma anche ed in particolare l’usabilità, la posizione e dimensione dei contenuti.
Usabilità sui dispositivi mobili – Google Search Console
Il rapporto sull’usabilità sui dispositivi mobili, disponibile sulla Google Search Console elenca quali pagine della tua proprietà presentano problemi di usabilità. È un ottimo strumento per la verifica dell’integrità dei contenuti rilevati da Google.
Questi strumenti sono un buon punto di partenza, ma ricorda che si tratta di applicazioni automatizzate: ciò che Google considera “ottimizzato per i dispositivi mobili” non necessariamente corrisponde a realtà, e viceversa. Talvolta con un sito non pienamente ottimizzato si riesce ad offrire un esperienza utente più gradevole ed efficace.
Importante è garantire che tutte le funzionalità siano disponibili in modo completo anche su dispositivi mobili, e che non ci siano problemi di progettazione.
Comprensione dei dati forniti dai strumenti di diagnostica
Ottimizzazione delle immagini
Le immagini sono impegnative, ostili ai browser mobili, e possono rappresentare fino all’80% del peso totale della pagina.
Una soluzione istintiva è rimuovere le immagini dalla versione mobile del sito. Ma, le immagini raccontano più di mille parole, e talvolta sono fondamentali per il design del sito Web, quindi rimuoverle diventa improponibile.
A volte si possono sostituire immagini con effetti CSS: tramite Cascading Style Sheets si possono crere ombre, animazioni, sfumature, e creare contenuti ricchi e sorprendenti, senza limiti di risoluzione, occupando una frazione della banda impegnata dai file immagine.
In generale, per ottimizzazione delle immagini si intende:
1. Scegliere i formati corretti per ogni tipo di contenuto:
JPEG per le fotografie;
PNG per i loghi, o quando hai bisogno di uno sfondo trasparente;
SVG (formato vettoriale) per forme geometriche, talvolta potrebbe esser una scelta migliore per loghi ed icone.
Alcuni rapporti di diagnosi suggeriscono di pubblicare immagini nei formati di nuova generazione per ridurne le dimensioni. I formati più recenti, JPEG 2000, JPEG XR e WebP, hanno qualità e compressione maggiori rispetto a quelle che ho elencato precedentemente, ma non sono supportati dalla totalità dei browser. L’utilizzo di questi formati devono esser accompagnati da script che li sostituiscano qualora non siano supportati.
2. Compressione delle immagini
Le immagini, spesso, rappresentano la maggior parte dei byte scaricati di una pagina Web, pertanto, la compressione delle immagini è uno degli step più importanti per migliorare le prestazioni per il tuo sito Web.
Ecco alcuni ottimi strumenti per aiutarti nella compressione delle immagini!
Smush
Smush è un plug-in per WordPress semplicissimo, che consente di avviare la compressione di tutte le immagini sul sito con un click. Una funzione consente di comprimere automaticamente tutte le immagini al momento del caricamento.
Aiuta a rimuovere metadati dalle immagini e segnala tutte le foto inutilmente grandi nelle gallerie.
Kraken.io
È uno strumento online, un applicazione, che consente di comprimere in modo efficiente qualsiasi tipo di immagine, scegliendo il tipo di compressione ed altre personalizzazioni nella modalità “esperto”.
Svgminify.com
Come Kraken.io consente in modo facile e personalizzato, di comprimere i file immagine, ma è specializzato per i file vettoriali.
3. Immagini Above the Fold
Alcuni strumenti potrebbero segnalare che alcune immagini above the fold, potrebbero avere un impatto negativo sul tempo di caricamento della pagina.
Queste “immagini above the fold” sono le immagini posizionate, nella pagina, fuori dal campo visibile sullo schermo.
Esistono alcuni modi per gestire in modo diverso, posticipare il download di questi contenuti, ma per metterli in opera ti consigliamo di consultare il tuo sviluppatore.
Minimizzazione del codice
Semplificando, quanti più dati è necessario scaricare, tanto più lento sarà il caricamento delle pagine. La minimizzazione di javascript e CSS consiste nella rimozione, all’interno del codice, di tutte le parti superflue, come righe vuote, commenti, spazi, tabulazioni, ecc.
Questa operazione può farti ridurre di molto le dimensioni della pagina e delle risorse a questa collegate.
Ecco alcuni degli strumenti che puoi utilizzare per rendere questa operazione il più semplice possibile:
Usi WordPress? Quasi tutti i plug-in per l’ottimizzazione consentono di intervenire comprimendo il codice con pochi comandi dalla dashboard.
Minifier.org
Non stai usando WordPress? Strumenti come questo ti consentono facilmente di ridurre ai minimi termini file javascript, CSS e HTML in pochi passaggi.
Sfruttare la cache del browser
Come spiegato da GTMetrix, la memorizzazione nella cache del browser dei contenuti statici della pagina migliora in modo sensibile le prestazioni e l’esperienza utente. Il primo caricamento della pagina sarà normale, ma, alle richieste successive l’utente avrà le risorse statiche già memorizzate localmente.
La quantità di dati che il browser dell’utente deve scaricare sarà così inferiore, e saranno effettuate meno richieste al server.
Per mettere in pratica questa funzionalità potresti aver necessità del tuo sviluppatore.
Considera AMP
AMP è l’acronimo di Accelerated Mobile Pages. Il progetto AMP è un’iniziativa open source che mira a rendere il web migliore e accessibile. Il progetto consente la creazione di siti Web e annunci estremamente veloci.
Fondamentalmente, il framework consente di creare contenuti leggerissimi, ottimizzati per dispositivi mobili, semplificando l’HTML e seguendo specifiche regole CSS.
Uno degli aspetti negativi è che queste pagine non sono SEO friendly:
Sebbene queste pagine si caricheranno più rapidamente per i visitatori da dispositivi mobili, i severi standard AMP non consentono le personalizzazioni e funzionalità delle pagine Web tradizionali.
Il secondo riguarda l’acquisizione di backlink: quando qualcuno pubblica un link ad una tua pagina AMP, questo punterà al dominio google.com. Ciò significa che eventuali backlink alla tua pagina non verranno attribuiti al tuo dominio.
Pensa al posizionamento ed alla serp dei motori di ricerca
Ricorda sempre di ottimizzare i tag del titolo e della descrizione del tuo sito Web.
Gli schermi dei dispositivi mobili sono più piccoli, quindi scrivi i tag tenendo in considerazione come apparirà il risultato relativo al tuo sito su ogni versione di Google.
Ricorda, è importante ottimizzare sia il front-end che il back-end del sito, per ottenere un sito mobile moderno ed efficace.
