Hai verificato che il tuo sito web sia perfettamente adattato ai dispositivi mobili?
Eri a conoscenza dell’introduzione da parte di Google della nuova politica “Mobile-First”?
Un numero sempre maggiore di utenti del web sta abbandonando i computer desktop, preferendo navigare e fare acquisti tramite i propri dispositivi mobili.
Il design web responsivo ha reso possibile la creazione di siti che funzionano in modo uniforme su tutte le piattaforme. Tuttavia, anche in questo caso, il design reattivo rappresenta solo una piccola parte delle strategie per ottimizzare l’esperienza utente sui dispositivi mobili.
Per una reale ottimizzazione delle prestazioni, è necessario considerare anche altre opzioni.
Ecco perché si pone una forte enfasi sulla progettazione del tuo sito come esperienza “mobile-first”. In parole semplici, “mobile-first” significa che il design e i contenuti sono ottimizzati prioritariamente per gli utenti di dispositivi mobili.
Chiarito questo, l’articolo non si concentra sulla progettazione di un sito completamente nuovo. Piuttosto, esamineremo alcuni principi chiave del design “mobile-first”. Inoltre, dedicheremo del tempo agli aspetti tecnici per ottimizzare l’esperienza utente dei tuoi visitatori che navigano da mobile.
N. 1: Progettare con un’ottica “mobile”
Il web si basa in gran parte sul principio di servire gli utenti desktop. Il vero web, i veri progressi tecnologici, si apprezzano al meglio su un bel display a schermo intero. Tuttavia, smartphone e altri dispositivi mobili rappresentano una realtà diversa, ed è giunto il momento di adattarsi al concetto di design “mobile-first”.
Oltre al buon senso del design responsivo, quali altri elementi di design dovresti implementare nei tuoi progetti web “mobile-first”?
- Priorità. Gli schermi dei dispositivi mobili hanno uno spazio di visualizzazione limitato. Inoltre, i contenuti sono presentati verticalmente, a differenza della struttura orizzontale dei desktop. Questo significa che è necessario progettare dando priorità agli elementi. Quali sono gli elementi più importanti per gli utenti? Se ci sono pulsanti di chiamata all’azione (CTA), quanto sono facili da vedere per l’utente mobile?
- Contenuto prima. Colore dopo. Si possono realizzare cose interessanti con il design mobile, ma certamente non con l’approccio del design desktop. Pertanto, dai priorità al contenuto. Rendi i tuoi testi e altri elementi di contenuto facilmente leggibili e accessibili. Uno schermo mobile è molto meno indulgente verso elementi visivi che distraggono.
- Navigazione intuitiva. Su un dispositivo mobile, non si può semplicemente cliccare in un punto qualsiasi per tornare alla home page. A meno che, naturalmente, tu non preveda questo tipo di navigazione. Ed è quello che dovresti fare. Prova i widget “Scroll-to-Top” ma anche le intestazioni adesive, quando possibile.
Il modo migliore per verificare se stai facendo le cose nel modo giusto è usare il tuo telefono (io lo faccio sempre!) e visitare il tuo sito. Analizza attentamente come le cose si presentano e scorrono insieme.
Se sei seduto in un bar o aspetti un volo in aeroporto, chiedi gentilmente a qualcuno di controllare il tuo sito. Quindi, siediti e ascolta il loro feedback. Molto spesso, sarai sorpreso da come le persone percepiscono l’esperienza utente del tuo sito web.
#2: Ottimizzazione delle risorse: immagini, icone, ecc.
Quante volte ti capita di utilizzare elementi visivi per motivi di gusto personale piuttosto che per l’esperienza utente (UX)? Succede, e se vuoi essere creativo, è importante capire come funziona l’ottimizzazione dei media.
Elementi visivi come foto, illustrazioni, icone e video sono i maggiori consumatori di larghezza di banda nelle pagine web.
Dimensione media di una pagina web nel 2018, suddivisa per settori e paesi.
Anche se non esiste una dimensione di pagina web standard che tutti devono rispettare, è logico che dimensioni inferiori corrispondano a tempi di caricamento più rapidi.
Quindi, come puoi eliminare alcuni KB o addirittura MB extra dai tuoi contenuti visivi?
- Ridimensiona le tue immagini. Sembra semplice, vero? Beh, non posso contare quante volte ho navigato su un sito mobile e ho visto immagini 1980 x 1200 caricate in background. Invece, le foto a dimensione piena dovrebbero essere fornite come link alternativi quando necessario. Il ridimensionamento può ridurre fino all’80% la dimensione totale dell’immagine, a seconda delle dimensioni richieste. Per i dispositivi mobili, però, non c’è mai motivo di superare l’intervallo massimo di 600-700 px.
- Riduci le dimensioni del file tramite la compressione. La compressione/ottimizzazione delle immagini è il processo di utilizzo di software di terze parti per ridurre il numero di colori in un’immagine. Questo può essere fatto in modo che le tue foto non perdano la loro qualità innata, ma possono ridimensionare drasticamente la dimensione del file. Se hai bisogno di aiuto con la compressione delle immagini, non cercare oltre la nostra esaustiva panoramica degli strumenti per la compressione delle immagini.
- Esplora formati di file alternativi. Tutti hanno sentito parlare dei formati di file PNG e JPEG. Dopotutto, sono gli standard de facto per le immagini sul web. Ma non ancora per molto. La tecnologia più recente per la distribuzione di immagini digitali ruota attorno a WebP e i formati di file SVG. Gli SVG, ad esempio, possono automaticamente adattarsi alle dimensioni dello schermo, riducendo il numero di risorse necessarie per caricare specifici elementi visivi.
Ottimizzare l’esperienza utente in ottica “mobile-first” è un approccio consapevole. Progettare impulsivamente significa non considerare gli effetti a lungo termine delle proprie decisioni. Al contrario, un approccio consapevole ti aiuta a progettare con in mente gli utenti mobili sin dall’inizio.
Un suggerimento: In linea con il concetto di design intuitivo per dispositivi mobili, non è necessario riutilizzare gli stessi elementi visivi sui progetti per dispositivi mobili. Rimuovere alcune immagini di sfondo e sostituirle con sfondi a tinta unita, sui dispositivi mobili, non comprometterà l’esperienza dell’utente. Cerca sempre modi per risparmiare anche la più piccola quantità di larghezza di banda.
# 3: Pre-caricamento e caricamento pigro
È necessario caricare tutte le risorse multimediali su pagine che richiedono molto tempo per la lettura? E può essere utile rendere disponibili le pagine esterne prima che gli utenti le visitino?
Analizziamo prima i preloader, noti anche come suggerimenti del browser.
I preloader sono modi in cui una pagina comunica al browser potenziali opportunità di navigazione. Ad esempio, un utente potrebbe visitare la pagina B partendo dalla pagina A.
Con il precaricamento, l’utente può visualizzare la pagina B prima di fare clic sul link di navigazione nella pagina A.
Tieni presente che il precaricamento non sempre funziona ed è il browser a prendere la decisione finale. Fattori come il tipo di dispositivo e la larghezza di banda vengono valutati individualmente.
Quali sono i tipi più comuni di preloader?
- Precarica. Questo tipo indica che un URL specifico è la scelta di navigazione successiva più probabile. E, se il browser approva la richiesta, memorizzerà automaticamente nella cache le risorse importanti della pagina, il che a sua volta rende il caricamento della pagina successiva molto più veloce.
- Prerendering. Mentre il tipo precedente recupera solo determinate risorse, il prerendering memorizzerà nella cache l’intera pagina. Tutto il contenuto visualizzato viene archiviato nella memoria del dispositivo dell’utente.
- Prelettura DNS. Il prefetch DNS risolverà il DNS specificato e nient’altro. Di conseguenza, se un utente compie uno “scambio” specifico sul tuo sito, stai riducendo il tempo necessario per navigare.
- Preconnessione. Simile al precedente, ma stabilisce anche connessioni e handshake con connessioni TCP e TLS.
Ecco alcuni esempi di codice per i preloader:
<link rel="dns-prefetch" href="https://wilku.top/how-to-optimize-your-website-for-mobile-users/customURL.com"> <link rel="preconnect" href="https://wilku.top/how-to-optimize-your-website-for-mobile-users/customURL.com"> <link rel="prefetch" href="folder/script.js" as="script"> <link rel="prerender" href="customURL.com/preview.html">
Poiché i preloader utilizzano tag HTML dinamici, puoi precaricare contenuti come Google Fonts o creare uno script personalizzato per il precaricamento delle risorse JavaScript in WordPress.
A proposito, se usi WordPress, WP Rocket può aiutarti in questo processo per ottimizzare le prestazioni del tuo sito.
Ora che ne sai di più sui preloader, parliamo di un altro argomento popolare: il lazy loading.
Cos’è il lazy loading?
Ogni volta che visiti una nuova pagina web, che si tratti di un articolo di un blog o di un sito statico, il browser recupera l’intero contenuto della pagina e quindi lo offre come esperienza di navigazione nativa. Nella maggior parte dei casi, sei costretto a scaricare l’intera pagina senza vedere effettivamente oltre la parte iniziale visibile dello schermo.
Con il lazy loading, invece, si indica al browser di caricare (renderizzare) solo il contenuto che si trova all’interno dell’area visibile dell’utente. Quindi, se a una pagina sono state aggiunte foto o video di grandi dimensioni, questi file vengono visualizzati solo quando l’utente scorre la pagina e la parte del sito corrispondente entra nell’area visibile.
Se sei preoccupato per possibili problemi SEO, non preoccuparti. Yoast ha confermato che Google esegue il rendering delle pagine che utilizzano il lazy loading e lo considera solo un ulteriore indicatore di miglioramento delle prestazioni.
Per una libreria da utilizzare, ti consiglio Layzr.js: un sistema di lazy loading semplice ed efficace per le tue immagini! Lo script è attivo anche nella home page del progetto, quindi puoi vederlo in azione in tempo reale. Gli utenti di WordPress possono trovare decine di plugin per il lazy loading nel repository pubblico dei plugin.
# 4: Web caching
Il web caching si basa sul concetto di copiare una versione di una pagina, che può quindi essere presentata all’utente in qualsiasi momento. Le pagine vengono memorizzate nella cache la prima volta che si visita una pagina di un sito web. Quando un nuovo utente prova ad accedere a quella pagina, invece di fornire la versione live, il server web mostra la versione memorizzata nella cache.
L’obiettivo di qualsiasi tipo di memorizzazione nella cache è migliorare le prestazioni del sito web e ridurre le risorse di backend richieste. A seconda della soluzione di memorizzazione nella cache, è possibile impostare intervalli personalizzati e altri eventi basati su trigger.
Alcuni dei nomi più noti nel web caching sono Varnish, Squid e Memcached. Ma puoi stare certo che ci sono molte altre soluzioni disponibili, soprattutto se sei un utente di WordPress.
Potresti anche prendere in considerazione l’idea di abbonarti a una CDN.
Cos’è una CDN (Content Delivery Network)?
Una rete di distribuzione dei contenuti utilizza un cluster globale di server distribuiti per fornire una distribuzione dei contenuti incredibilmente veloce. Una CDN può trasferire rapidamente tutti i tipi di contenuti più diffusi sul web: video, foto, JavaScript, ecc. Al giorno d’oggi, la maggior parte del traffico web passa attraverso una qualche forma di CDN.
L’unica cosa da tenere presente sulle reti di distribuzione dei contenuti è che funzionano meglio se utilizzate su un sito web molto richiesto. Quindi, se ricevi solo poche migliaia di visitatori al mese, potrebbe essere difficile notare miglioramenti significativi. Tuttavia, una CDN è un’ottima soluzione per migliorare i tempi di caricamento del tuo sito web, ridurre il costo della larghezza di banda, aumentare la disponibilità dei contenuti e rafforzare la sicurezza generale.
Se non hai esperienza con le CDN, ti suggerisco di provare Cloudflare – offrono un piano gratuito per sempre ed è un’ottima piattaforma per iniziare ad imparare. Se Cloudflare non soddisfa le tue aspettative, dai un’occhiata al nostro articolo sui migliori fornitori di CDN gratuiti sul mercato.
#5: AMP (Accelerated Mobile Pages)
Il progetto AMP di Google è l’ottimizzazione mobile potenziata! In sostanza, AMP riduce le tue pagine all’essenziale per fornire un’esperienza di caricamento super veloce, ma anche per rendere la leggibilità dei contenuti una priorità. Data l’importanza della velocità di caricamento delle pagine, puoi permetterti di dire di no a tempi di caricamento quasi istantanei?
Ok, tutte queste belle parole sembrano ottime, ma come funziona AMP?
AMP è una pagina HTML essenziale, con alcune limitazioni per il tipo di contenuto che può essere visualizzato. Ciò si traduce in tempi di caricamento molto più rapidi e prestazioni complessive grazie alla limitazione dell’esecuzione di script e simili.
JavaScript, ad esempio, non funziona con AMP. A meno che, naturalmente, tu non usi la libreria AMP JS disponibile su GitHub. L’uso della libreria JS ti consente di ottenere determinati risultati, come evitare gli ad blocker, ma se desideri prestazioni reali, allora AMP in versione essenziale è la strada da seguire.
Interessanti casi di studio per AMP:
# 6: Prova prima di impegnarti
Oggi non ci sono scuse per non avere un ambiente di staging separato per il tuo progetto. La maggior parte delle piattaforme di cloud hosting offre ambienti di staging per impostazione predefinita, quindi verifica con il tuo provider se ne hai accesso.
Cos’è un ambiente di staging?
Il modo più semplice per spiegarlo è guardare al tuo attuale sito web live.
Questo sito è quello che si definisce un sito di produzione: una versione in tempo reale di tutto il codice, gli script e i contenuti su cui si basa il tuo sito. Un ambiente di staging, in questo contesto, è una copia del sito di produzione. Un sito fittizio, se preferisci. In questo ambiente di staging, puoi apportare modifiche o aggiungere nuove funzionalità senza interrompere il tuo sito live.
Ripenso sempre all’articolo di Ashley Harpp, Non perdere tempo: testa le modifiche prima di impegnarti.
La sua opinione su come “inganniamo” noi stessi per evitare certe cose è un ottimo esempio di come non vogliamo assumerci la responsabilità quando commettiamo un errore. Tuttavia, l’articolo di Ashley include anche link a strumenti utili per la creazione di un ambiente di staging locale.
I test non sono così spaventosi come sembra. Ma è decisamente spaventoso quando elimini accidentalmente l’intero database su un server di produzione!
Considerazioni finali
Ottimizzare il tuo sito web per un’esperienza mobile fluida non è poi così difficile. Tutto ciò che ti serve è un po’ di determinazione e applicare i metodi descritti in questo articolo. Probabilmente hai già familiarità con elementi come la memorizzazione nella cache dei contenuti e il lazy loading, ma che ne dici degli ambienti di staging o dei preloader?
Spero che questo articolo abbia fatto luce sullo stato attuale dell’ottimizzazione dei siti web per i dispositivi mobili.