Come ottimizzare il tuo sito Web per gli utenti mobili?

Ti sei assicurato che il tuo sito sia ottimizzato per dispositivi mobili?


Sapevi che Google ha introdotto una nuova norma chiamata Mobile-First? Sempre più gli utenti Web si stanno allontanando dai computer desktop, e invece, sfoglia e acquista utilizzando i loro dispositivi mobili.

Il web design reattivo ha permesso di creare siti che funzionano su tutte le piattaforme a un livello uniforme. Ma, anche in questo caso, il design reattivo è solo una frazione delle strategie di ottimizzazione UX per dispositivi mobili.

Se desideri una vera ottimizzazione delle prestazioni, dovrai considerare anche altre alternative.

Questo è il motivo per cui c’è così tanta enfasi sulla costruzione del tuo sito come esperienza mobile-first. In termini semplici, mobile-first significa che la progettazione e i contenuti sono ottimizzati per gli utenti mobili.

Detto questo, questo post non riguarda la progettazione di un sito completamente nuovo. Invece, esamineremo alcuni principi di progettazione fondamentali per i dispositivi mobili. Inoltre, dedica un po ‘di tempo a concentrarsi sugli aspetti tecnici per ottimizzare l’esperienza utente per i tuoi utenti mobili.

# 1: progettare pensando al cellulare

Il web si basa in gran parte sul principio di servire gli utenti desktop. Il vero web, i veri progressi nelle tecnologie, viene visualizzato al meglio su un bellissimo display a schermo intero. Ma smartphone e altri dispositivi mobili sono una cosa, ed è tempo di iniziare ad adattarsi al concetto di design mobile-first.

Oltre al design reattivo di buon senso, quali altri elementi di design dovresti implementare nei tuoi progetti web mobile-first?

  • Definizione delle priorità. Gli schermi mobili sono limitati allo spazio di visualizzazione disponibile. Inoltre, gli schermi mobili presentano contenuti in modo verticale rispetto a una struttura orizzontale molto più ampia per desktop. Ciò significa che è necessario progettare utilizzando le priorità. Quali elementi sono della massima importanza per gli utenti di vedere? Se ci sono pulsanti CTA, quanto è facile vederli per l’utente mobile?
  • Contenuto prima. Secondo colore. Puoi fare alcune cose interessanti con il design mobile, ma certamente non nell’ambito del design desktop. Quindi, lascia prima spazio ai contenuti. Rendi la tua copia e altre parti di contenuto facilmente leggibili e accessibili. Uno schermo mobile è molto meno tollerante nel distrarre elementi visivi.
  • Navigazione facile. Su un dispositivo mobile, non puoi semplicemente fare clic ovunque e tornare alla home page. A meno che, ovviamente, non preveda questo tipo di navigazione in anticipo. E dovresti. Sperimenta con i widget Scroll-to-Top, ma anche le intestazioni adesive senza soluzione di continuità, quando possibile.

Il modo migliore per verificare se stai facendo questo bene è usare il tuo telefono (lo faccio sempre!) E visitare il tuo sito. Fai un esame approfondito di come le cose si sentono e scorrono insieme.

Se sei seduto in un bar o stai aspettando un volo in un aeroporto, colpisci qualcuno su una spalla e chiedigli cortesemente di controllare il tuo sito per te. Quindi, siediti e ascolta il loro feedback. La maggior parte delle volte ti sorprenderai del modo in cui le persone percepiscono l’esperienza utente del tuo sito web.

# 2: ottimizzazione delle risorse; immagini, icone, ecc.

Quanto spesso ti ritrovi a utilizzare gli oggetti visivi per motivi di preferenze personali e non di UX? Succede e, se vuoi diventare creativo, è utile capire come funziona l’ottimizzazione dei media.

Sono elementi visivi come foto, illustrazioni, icone e video i maggiori consumatori di larghezza di banda sulle pagine Web.

Tempi medi di caricamento della pagina per il 2018 Come confronta il tuo blog di MachMetrics SpeedLa dimensione media della pagina Web nel 2018. Elenca per settori e diversi paesi.

Sebbene non vi siano dimensioni di pagina Web impostate che tutti devono soddisfare, è logico che dimensioni di una pagina Web più piccole equivalgono a tempi di caricamento più rapidi.

Quindi, come puoi tagliare alcuni KB aggiuntivi o persino MB dal tuo contenuto visivo?

  • Ridimensiona le tue immagini. Sembra semplice, vero? Bene, non posso contare su quante volte ho visitato un sito mobile solo per caricare sullo sfondo immagini 1980 x 1200. Invece, le foto a dimensione intera dovrebbero essere fornite come collegamenti alternativi quando appropriato. Il ridimensionamento può radere fino all’80% della dimensione totale dell’immagine, a seconda delle dimensioni richieste. Tuttavia, per i dispositivi mobili non c’è mai motivo di andare al di sopra dell’intervallo 600-700 px.
  • Riduci le dimensioni del file con la compressione. La compressione / ottimizzazione delle immagini è il processo di utilizzo di software di terze parti per ridurre il numero di colori presenti in un’immagine. Questo può essere fatto al punto che le tue foto non perdono la loro innata qualità ma possono ridurre drasticamente le dimensioni del file. Se hai bisogno di aiuto con la compressione delle immagini, non cercare oltre il nostro riepilogo completo degli strumenti di compressione delle immagini.
  • Esplora formati di file alternativi. Tutti hanno sentito parlare dei formati di file PNG e JPEG. Dopotutto, sono gli standard di immagine di fatto sul web. Ma non per molto. La più recente e grande tecnologia nella consegna di immagini digitali ruota attorno WebP e formati di file SVG. Gli SVG, ad esempio, possono farlo automaticamente ridimensionare alle dimensioni dello schermo, riducendo il numero di risorse necessarie per caricare componenti visivi specifici.

L’ottimizzazione dell’esperienza utente per mobile-first è solo una cosa consapevole. Progettare su impulso significa che non si considerano gli effetti a lungo termine delle proprie decisioni. Considerando che un approccio consapevole ti aiuta a costruire con gli utenti mobili in mente da zero.

Approfondimento: In linea con il concetto di design mobile intuitivo, non è necessario riutilizzare gli stessi componenti visivi sui progetti mobili. Eliminare alcune immagini di sfondo e sostituirle con sfondi a colori – su dispositivi mobili – non danneggerà l’esperienza dell’utente. Cerca sempre modi per risparmiare anche la più piccola quantità di larghezza di banda.

# 3: pre-caricamento e caricamento lento

È necessario caricare tutte le risorse multimediali su pagine che richiedono molto tempo per essere lette? E può aiutare a rendere le pagine esterne prima che gli utenti le visitino?

Diamo prima un’occhiata ai preloader, noti anche come suggerimenti per il browser.

I preloader sono modi in cui una pagina comunica al browser le potenziali opportunità di navigazione. Per esempio. Un utente può visitare la Pagina B dalla Pagina A.

Con il precaricamento, l’utente può eseguire il rendering della Pagina B prima di fare clic sul collegamento di navigazione nella Pagina A.

direttiva di precarico

Tieni presente che il precaricamento non sempre funziona e spetta al browser prendere la decisione finale. Fattori come il tipo di dispositivo e la larghezza di banda vengono pesati singolarmente.

Quali sono i tipi di preloader più comuni?

  • prefetch. Questo tipo suggerisce che è molto probabile che un URL specifico sia la scelta di navigazione successiva. E, se il browser concede la richiesta, memorizzerà automaticamente nella cache importanti risorse della pagina, il che a sua volta rende il caricamento della pagina successiva molto più veloce.
  • Prerender. Mentre il tipo sopra recupera solo determinate risorse, prerender memorizzerà nella cache l’intera pagina. Tutto il contenuto renderizzato viene archiviato nella memoria del dispositivo degli utenti.
  • DNS-Prefetch. Il prefetch DNS risolverà il DNS specificato e nient’altro. Di conseguenza, se un utente effettua una “svolta” specifica sul tuo sito, stai praticamente radendo il tempo necessario per navigare.
  • preconnect. Come sopra, ma stabilisce anche connessioni e handshake, con connessioni TCP e TLS.

Quali sono alcuni esempi di codice per i precaricatori?

Poiché i preloader utilizzano tag HTML dinamici, puoi farlo precaricare contenuti come Google Fonts o creare uno script personalizzato per il precaricamento delle risorse JavaScript in WordPress.

A proposito, se stai usando WordPress allora WP Rocket può aiutarti in questo per potenziare il tuo sito.

Ora che sai di più sui preloader, parliamo dell’altro argomento caldo: caricamento lento.

Che cos’è il caricamento lento?

Ogni volta che visiti una nuova pagina Web, sia che si tratti di un post di blog o di un sito statico, il browser recupera l’intero contenuto della pagina e quindi lo utilizza come esperienza di navigazione nativa. Nella maggior parte dei casi, sei costretto a scaricare l’intera pagina senza effettivamente vedere oltre above the fold.

Considerando che con il caricamento lazy, al browser viene detto di caricare (render) contenuto che è solo all’interno del viewport dell’utente. Pertanto, se ci sono foto o video sensibili alle dimensioni aggiunti a una determinata pagina, quei file verranno visualizzati solo quando la schermata del browser raggiunge quella parte del sito.

E se sei preoccupato per potenziali problemi SEO, non esserlo. Yoast lo ha confermato Google esegue il rendering delle pagine che utilizzano il caricamento lento, e lo vede solo come un altro segnale di miglioramento delle prestazioni.

Layzr js

La mia raccomandazione per una biblioteca da usare è Layzr.js – caricamento pigro semplice ed efficace per le tue immagini! Lo script è attivato anche sulla home page del progetto, quindi puoi vederlo eseguire in tempo reale. Gli utenti di WordPress possono trovare dozzine di plugin a caricamento lento nel repository di plugin pubblico.

# 4: memorizzazione nella cache Web

La memorizzazione nella cache Web 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 alla prima visita alla pagina di un sito Web. Quando un nuovo utente tenta quindi di accedere a quella pagina, invece di pubblicare la versione live, il server Web mostrerà 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 back-end richieste. A seconda della soluzione di memorizzazione nella cache, è possibile configurare intervalli personalizzati e altri eventi basati su trigger.

cache web

Alcuni dei nomi più popolari nella cache web sono Varnish, Squid e Memcached. Ma stai certo che ci sono molte altre soluzioni sul mercato, soprattutto se sei un utente WordPress.

Puoi anche prendere in considerazione l’iscrizione a un CDN.

Che cos’è un CDN (Content Delivery Network)?

Una rete di distribuzione dei contenuti utilizza un cluster globale di server distribuiti per fornire una consegna dei contenuti incredibilmente veloce. UN CDN può trasferire rapidamente tutti i più diffusi tipi di contenuti sul Web: video, foto, JavaScript, ecc. Oggigiorno, la maggior parte del traffico delle reti passa attraverso una qualche forma di CDN.

L’unica cosa da ricordare sulle reti di distribuzione dei contenuti è che funzionano meglio se utilizzate su un sito Web molto richiesto. Quindi, se servi solo poche migliaia di visitatori al mese, vedere notevoli miglioramenti potrebbe rivelarsi difficile. Tuttavia, una CDN è un’ottima soluzione per migliorare i tempi di caricamento del sito Web, ridurre il costo della larghezza di banda, aumentare la disponibilità dei contenuti e rafforzare la sicurezza generale.

Se non hai precedenti esperienze con CDN, ti consigliamo di provarlo Cloudflare – forniscono un piano per sempre ed è un’ottima piattaforma con cui iniziare a imparare. E se Cloudflare non è all’altezza delle tue aspettative, dai un’occhiata ai nostri post per i migliori fornitori di CDN gratuiti sul mercato.

# 5: AMP (pagine mobili accelerate)

Google Progetto AMP è l’ottimizzazione mobile su steroidi! Fondamentalmente, AMP riduce le tue pagine a elementi essenziali per fornire un’esperienza di caricamento superveloce, ma anche per rendere la leggibilità dei contenuti una priorità. Data l’importanza della velocità della pagina, puoi raccogliere il coraggio di dire no ai tempi di caricamento quasi istantanei?

Google AMP (pagine mobili accelerate)

Va bene, tutte quelle parole d’ordine suonano alla grande, ma come funziona effettivamente AMP?

AMP è una pagina HTML a mani nude con alcune limitazioni per il tipo di contenuto che può essere visualizzato. Ciò porta a tempi di caricamento molto più rapidi e prestazioni complessive a causa della limitazione per l’esecuzione di script e simili.

JavaScript, ad esempio, non funziona con AMP. A meno che, ovviamente, non si usi il Libreria AMP JS disponibile su GitHub. L’utilizzo della libreria JS ti consente di ottenere determinati risultati, come evitare i blocchi degli annunci, ma se desideri prestazioni reali, AMP non elaborato è la strada da percorrere.

AMP per esempio

Se sei un utente WordPress, nella maggior parte dei casi l’aggiunta di AMP al tuo blog verrà eseguita con l’aiuto di un plug-in. Ma se stai lavorando con un sito personalizzato, aggiungere AMP per la prima volta può sembrare un po ‘impegnativo.

Impara AMP con l'esempio

Qui è dove AMP per esempio torna utile. Un progetto parallelo alla piattaforma attuale, questo sito descrive in dettaglio ogni angolo possibile con AMP. Ogni componente ed effetto viene fornito con una demo fornita in modo da poter vedere come sarebbe.

Casi di studio interessanti per AMP:

  1. Terra aumenta il numero di utenti mobili con AMP
  2. Times of India riporta rendimenti di entrate 1,5 volte superiori
  3. FastCommerce guida le conversioni per i clienti creando prima AMP

# 6: prova prima di impegnarsi

Al giorno d’oggi, non ci sono scuse per non avere un ambiente di stadiazione separato per il tuo progetto. La maggior parte delle piattaforme di cloud hosting offre ambienti di gestione temporanea per impostazione predefinita, quindi verifica con il tuo provider per vedere se hai accesso a uno.

test prima di impegnarsi

Che cos’è un ambiente di stadiazione?

Bene, il modo più veloce per spiegare questo è guardando il tuo sito web dal vivo attuale.

Questo sito è ciò che tu chiami un sito di produzione, una versione in tempo reale di tutto il codice, gli script e il contenuto su cui si basa il tuo sito. Un ambiente di gestione temporanea in questo contesto è una copia del sito di produzione. Un sito fittizio, se vuoi. E in questo ambiente di gestione temporanea, puoi apportare modifiche o aggiungere nuove funzionalità senza interrompere il tuo sito live.

Ripenso sempre al post di Ashley Harpp, Non perdere tempo: prova 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, il post di Ashley include anche collegamenti a strumenti utili per la creazione di un ambiente di stadiazione locale.

Il test non è così spaventoso come sembra. Ma è sicuro che diamine fa paura quando si elimina accidentalmente l’intero database su un server di produzione!

Dichiarazione di chiusura

L’ottimizzazione del tuo sito Web per un’esperienza mobile fluida non è poi così difficile. Tutto ciò che serve è un po ‘di determinazione e applicare volentieri i metodi delineati in questo post. È probabile che tu abbia già familiarità con cose come la memorizzazione dei contenuti nella cache e il caricamento lento, ma per quanto riguarda gli ambienti di gestione temporanea o i precaricatori?

Spero che questo post abbia fatto luce sullo stato attuale dell’ottimizzazione del sito Web mobile. Sentiti libero di lasciare un commento o di consigliare soluzioni aggiuntive.

TAGS:

  • SEO

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map