Passa al contenuto principale

Come ottimizzare la velocità delle pagine del sito web sui dispositivi mobili

Migliora la velocità del sito web sui dispositivi mobili per ridurre il tasso di bounce e aumentare le conversioni. Consigli essenziali per esperienze più veloci e ottimali sui dispositivi mobili.

I computer desktop dispongono di processori migliori e spesso offrono velocità di connessione a Internet più affidabili rispetto ai dispositivi mobili sulla rete dati di un operatore. Questo significa che il caricamento dei siti sui dispositivi mobili è spesso leggermente più lento rispetto a un desktop, anche se il sito è ottimizzato per la tecnologia mobile.

La velocità della pagina (o la velocità di caricamento del sito web) è un aspetto fondamentale dell'ottimizzazione per i motori di ricerca (SEO) sui dispositivi mobili. Le prestazioni del sito web influiscono non solo sul posizionamento nei motori di ricerca, ma anche sull'esperienza degli utenti con dispositivi mobili. Ottimizzare la velocità delle pagine per i dispositivi mobili comporta la gestione delle round trip request (RTR), il blocco del rendering, il caricamento ritardato, la compressione, la memorizzazione nella cache e le opzioni di codice Accelerated Mobile Page HTML (AMP-HTML).

Continua a leggere per scoprire come creare un sito web che si carica velocemente sui dispositivi mobili.

Come aumentare la velocità di caricamento delle pagine in 7 passaggi: consigli per un sito web più veloce

Sebbene le linee guida di Google per i dispositivi mobili si concentrino molto sul design ottimizzato per i dispositivi mobili e sulla facilità d'uso, la velocità del sito è fondamentale per la SEO per diversi motivi. La velocità della pagina fa parte dei Core Web Vitals di Google, ovvero i fattori di posizionamento essenziali che misurano l'esperienza dell'utente sul tuo sito web.

Poiché Google dispone di un tempo limitato per scansionare ogni sito, rendere più veloce il caricamento dei siti consente a Google di scansionare più pagine web. Questo significa che migliorare il tempo di caricamento della pagina può favorire una scoperta e un'indicizzazione più rapide di nuove pagine e nuovi contenuti, oltre a una scansione completa delle pagine più nascoste del sito.

Anche se il tuo posizionamento rimane lo stesso per ogni pagina, il numero totale di pagine che possono posizionarsi aumenta, aumentando spesso il traffico organico complessivo, specialmente negli scenari long-tail.

Oltre alle considerazioni sul crawl budget, la velocità e il tempo di risposta del dispositivo mobile influiscono anche dal punto di vista dell'utente reale, il che genera spesso alti tassi di bounce. Di fatto, un sito web lento spinge le persone ad abbandonarlo.

Quando ottimizzi il caricamento e le prestazioni del tuo sito web mobile, l'obiettivo dovrebbe sempre essere quello di considerare lo scenario peggiore di caricamento sui dispositivi mobili, rispetto a qualsiasi altra metrica di prestazione del sito.

Esegui un test di velocità del sito web e ottimizza le prestazioni del tuo sito per assicurarti di offrire la pagina più veloce possibile al maggior numero di utenti mobili. Anche se le reti mobili diventano più veloci, sarebbe ideale caricare una pagina in meno di 3 secondi o, secondo le raccomandazioni di Google, in meno di 1 o 2.

Tuttavia, i browser per dispositivi mobili interpretano e caricano le pagine in modo diverso rispetto ai browser per desktop. In altre parole, i browser per desktop sono migliori nel caricare pagine con molte piccole richieste, mentre i browser per dispositivi mobili sono più efficaci nel caricare pagine con meno richieste, ma più organizzate, anche se leggermente più grandi.

Il numero di elementi che devono essere recuperati dal server per caricare una pagina si chiama "round trip request" (RTR). Una parte significativa dell'ottimizzazione e del miglioramento della velocità di caricamento delle pagine mobili consiste nel ridurre al minimo le RTR.

Le RTR possono essere paragonate alle visite al supermercato per acquistare gli ingredienti necessari per una ricetta. Se servono quattro cipolle, non si fanno quattro viaggi separati al supermercato per ogni cipolla, bensì le si acquista tutte in una volta. Ancora meglio sarebbe poi acquistare le quattro cipolle più alcuni degli altri ingredienti nella stessa occasione. Se le quattro cipolle fossero in un pacchetto insieme ad altri ingredienti come peperoni, funghi e sedano, tutti necessari per la ricetta, sarebbe ancora meglio.

Ecco alcuni consigli per ottimizzare la velocità dei siti per dispositivi mobili:

1. Identifica le pagine con RTR eccessive.

Per ridurre al minimo le RTR bisogna esserne a conoscenza. Molte pagine avranno più di 100 RTR per pagina quando in realtà si dovrebbe puntare a meno di 50.

Spesso, gli sviluppatori o i professionisti della SEO che esaminano tutte le richieste su una pagina scoprono che alcuni degli elementi richiesti sono mancanti (404) e nessuno se ne è accorto. Anche se mancano, il browser impiega comunque del tempo per inviare una richiesta e tornare a mani vuote, quindi queste pagine dovrebbero essere rimosse o corrette immediatamente.

Dovresti anche correggere le risorse che si sono spostate e hanno restituito un codice di risposta 301 o 302. Queste risposte indicano che il browser doveva recarsi in un luogo, quindi seguire un'altra serie di istruzioni per raggiungere un altro luogo al fine di ottenere la risorsa, ma ogni nuovo luogo richiede più tempo.

È come andare in un negozio di alimentari e sentirsi dire che non hanno quello che serve, ma puoi trovarlo in un altro negozio lungo la strada. Ancora peggio, se c'è una catena di reindirizzamenti, è come andare al secondo negozio di alimentari per scoprire che anche loro hanno smesso di vendere l'articolo e ora devi provarne un terzo.

2. Abbina i file dove possibile.

Il prossimo passo per un sito web ottimizzato è combinare i file (come JavaScript e CSS) laddove possibile. Ad esempio, se una pagina utilizza 10 fogli di stile (file CSS) che potrebbero essere combinati in uno solo, dovresti farlo. Allo stesso modo, se stai utilizzando una serie di file JavaScript che potrebbero essere combinati in uno solo, fai anche questo.

Prova a considerare le cose sia a livello di sito che di template specifici. Dovresti avere un file JavaScript a livello di sito per il JavaScript presente su ogni pagina del sito e un file JavaScript specifico per ogni template di pagina del sito. Lo stesso può essere fatto con i file CSS. Assicurarsi che questi file siano sempre referenziati con lo stesso nome e posizione sarà utile se sono memorizzati correttamente nella cache.

3. Ottimizza l'ordine di rendering.

Dopo avere eliminato e consolidato al fine di ridurre il numero totale di RTR, la prossima cosa che puoi fare è modificare l'ordine in cui vengono richieste le cose per renderle più veloci.

Allo stesso modo in cui ci sono passaggi che devono essere completati in una ricetta prima che possano iniziarne altri, c'è un certo ordine che un browser mobile seguirà e che deve essere rispettato durante la creazione di una pagina.

Seguendo l'esempio della spesa, se la ricetta richiede di marinare qualcosa per 2 giorni, è importante procurarsi prima gli ingredienti necessari per la marinatura, in modo da poter già iniziare mentre si stanno acquistando gli altri ingredienti, piuttosto che dopo.

Trasportando questa analogia nel mondo del web, la marinatura è come un render blocker, perché nient'altro può accadere nel processo di cottura finché non si è finito di marinare. Puoi prepararti per i prossimi passi nel processo di cottura solo acquistando gli ingredienti mentre è in corso la marinatura.

È come il rendering del percorso critico, in cui si danno priorità agli elementi critici, come il tag head, il contenuto della pagina e il layout di base della pagina, e si posticipano gli elementi meno critici, soprattutto se causeranno un ritardo nel caricamento di elementi più importanti. Questo può migliorare drasticamente l'esperienza di caricamento per gli utenti e assicurare loro che il resto della pagina si caricherà rapidamente. Disporranno così anche delle risorse per iniziare la loro valutazione, mentre avviene il processo di caricamento.

4. Crea una strategia di caricamento della pagina.

Poiché i motori di ricerca emulano gli utenti umani, la loro esperienza delle pagine è simile alla tua. La cosa migliore che puoi fare per ordinare le richieste relative alla velocità del sito è capire cosa è cruciale per l'esperienza dell'utente e del bot nei primi secondi in cui si trovano sulla pagina.

In genere, si tratta delle informazioni nel tag head, così come del testo e delle immagini sulla pagina. Solitamente si impiega qualche secondo per interagire con qualsiasi elemento interattivo sul sito, quindi la maggior parte del JavaScript non deve essere inizialmente caricata.

Le rappresentazioni visive di JavaScript, come i riquadri con il segno più o gli expander, possono invece essere caricate come segnaposto prima che sia necessario il JavaScript. JavaScript è particolarmente lento e ingombrante da caricare. Per assicurare che il caricamento di JavaScript non rallenti l'esperienza a un punto tale da costringere utenti e bot a fissare a lungo una pagina vuota, bisognerebbe idealmente caricare qualcosa da mostrare e poi caricare il JavaScript in background, mentre si osserva la pagina.

Dopo JavaScript, video e immagini sono le cose più lente da caricare. I video e le immagini posizionati in basso nella pagina non devono compromettere l'esperienza nella parte superiore della pagina, dove solitamente iniziano gli utenti e i bot. Questo concetto di ritardare il caricamento di contenuti non visibili è chiamato "lazy-loading". Il lazy-loading può essere realizzato in diversi modi (differito, asincrono e come meta tag di lazy-loading di Google).

Il miglior strumento da usare per individuare opportunità di lazy-loading delle immagini è Google PageSpeed Insights. Per ottimizzare le immagini, puoi anche utilizzare il tag Lazy-load di Google, ma finora questo è rispettato solo nei browser Chrome per dispositivi mobili e desktop (anche se potrebbe espandersi in futuro). Con entrambi i metodi, usa lo strumento URL Inspection della Google Search Console per verificare che gli elementi caricati in modo asincrono siano visibili nel rendering della pagina dello strumento e nell'HTML renderizzato.

5. Comprimi tutto ciò che puoi.

Dopo avere ridotto al minimo e avere dato priorità alla RTR per ogni template di pagina, comprimi ciò che puoi. La compressione aiuta ad aumentare la velocità di caricamento della pagina risparmiando larghezza di banda. La compressione Gzip è un modo per comprimere i file e può essere configurata sulla maggior parte dei server, tuttavia ci sono altre opzioni disponibili.

Puoi anche eseguire la maggior parte del codice attraverso un processo di ottimizzazione ("minification") che riduce le dimensioni del file di trasferimento finale. Tuttavia, è difficile comprimere le immagini attraverso questi metodi. Puoi utilizzare la pagina Performance Review di WebPageTest.org, dove trovi la Full Optimization Checklist, che mostra tutte le risorse della pagina, se sono compresse con gzip e il loro livello di compressione.

Per la compressione delle immagini, invece di comprimere e ridurre al minimo le immagini, è importante che il progettista le consegni allo sviluppatore nel formato di file più compresso possibile. In sostanza, è necessario rendere le dimensioni del file finale il più piccole possibili senza compromettere l'aspetto dell'immagine.

Le foto dovrebbero generalmente essere salvate come file JPG e le icone e le illustrazioni dovrebbero essere salvate come file GIF. Per fare apparire al meglio le immagini di grandi dimensioni sui computer a schermo intero, senza rallentare i piccoli schermi mobili, considera l'uso del protocollo di immagini responsive o di un server di immagini come quello di Fastly per inviare dinamicamente una versione ridimensionata dell'immagine a schermi più piccoli.

6. Memorizza nella cache le pagine giuste al momento giusto.

Il passo successivo è quello di aiutare i browser e i bot a identificare cosa può essere riutilizzato e cosa deve essere recuperato di nuovo ogni volta con la cache del browser, una funzionalità che può essere impostata in diversi modi, uno dei quali tramite CDN (content delivery network).

La maggior parte degli elementi di un sito, soprattutto un sito che non cambia più di una volta alla settimana o che condivide informazioni in tempo reale come notizie, meteo o risultati sportivi, può memorizzare nella cache la maggior parte degli elementi delle pagine per un massimo di un anno. La memorizzazione nella cache significa che, quando gli utenti visitano una pagina, i browser cercano localmente nella propria memoria per vedere se hanno già un file necessario per costruire una pagina.

In questo modo si salvano le round trip request e si migliora il tempo di caricamento. I bot dei motori di ricerca visualizzano sempre una pagina come se non l'avessero mai vista prima, quindi non usano la cache attiva, ma possono percepire quando è in corso la memorizzazione nella cache e potrebbero usarla per stimare il tempo di caricamento di una pagina.

La cosa importante da capire sulla cache è che si basa sui nomi dei file e sulla loro posizione sul server. Quindi, se usi un file su più pagine, come un logo, fai sempre riferimento ad esso con lo stesso nome di file e URL, anche se è presente in più posizioni sul server.

Questo può trasformarsi in un vantaggio, perché significa che devi semplicemente aggiornare il nome del file di un elemento e il suo riferimento nell'HTML per ottenere una nuova versione dell'elemento memorizzata nella cache. Ad esempio, se fai una modifica al tuo logo, semplicemente cambiando il nome del file da "logo" a "logov2", la nuova versione sarà memorizzata nella cache, mentre quella vecchia verrà dimenticata.

In questo modo, quando permetti a qualcosa di rimanere nella cache per un anno, non stai dicendo che non cambierai l'elemento per l'anno bensì che, se lo fai, farai riferimento all'elemento aggiornato o nuovo con un nuovo nome di file.

Le impostazioni della cache possono essere un po' complicate, quindi è meglio pensarle come del cibo che può scadere. Alcuni alimenti scadono più rapidamente di altri, quindi comunica al sistema quali prodotti diventano vecchi e devono essere eliminati rapidamente e quali possono rimanere sullo scaffale per un po' di tempo in modo sicuro, senza dover essere sostituiti.

Puoi usare uno strumento come WebpageTest.org per capire dove si trovano le opportunità. La cosa importante da capire qui è che non esiste una scadenza fissa, né un'età massima per l'esistenza dell'elemento nella cache. Pertanto, il browser presumerà che debba essere recuperato ogni volta: la memorizzazione nella cache del browser non può avvenire a meno che non vengano specificati questi dettagli.

Poiché le impostazioni della cache indicano al browser quando un elemento è troppo vecchio per essere utilizzato, a volte si parla di "durata della cache" o "durata della freschezza". Se qualcosa ha superato il periodo di freschezza o di memorizzazione nella cache, è necessario completare il percorso di andata e ritorno al server per ottenere una versione aggiornata. Se gli articoli sono elencati come “scaduti”, significa che hanno superato il loro periodo di freschezza e, sia nel caso del supermercato che in quello del browser, devono essere sostituiti la prossima volta che saranno necessari.

Allo stesso modo in cui non è utile avere scaffali pieni di generi alimentari scaduti, non è utile avere una cache piena di contenuti web scaduti. Al contrario, è inefficiente buttare via generi alimentari (file) ancora perfettamente utilizzabili. Quando assegni le durate di memorizzazione nella cache ai tuoi file, è utile riflettere su questo e considerare anche le conseguenze di durate troppo generose.

Se fai una piccola modifica al tuo logo, non sarà la fine del mondo se il vecchio logo viene ancora mostrato, quindi puoi mantenere un lungo periodo di memorizzazione nella cache, soprattutto se hai intenzione di essere diligente nell'aggiornare i nomi dei file quando apporti modifiche. Con nomi di file diversi, non c'è pericolo di mostrare il vecchio logo.

7. Crea pagine mobili accelerate (AMP).

Tutto questo può sembrare complicato ed è per questo che Google ha creato una soluzione più semplice per ottimizzare la velocità delle pagine. Le pagine mobili accelerate (AMP) sono un sottoinsieme di HTML che segue linee guida molto più rigorose su ciò che può essere incluso. L’obiettivo è quello di portare la maggior parte delle pagine a un tempo di caricamento di 1 secondo su dispositivo mobile, cosa che generalmente avviene. AMP permette a Google di gestire la maggior parte delle operazioni complesse, memorizzando nella cache e configurando il processo di caricamento e la maggior parte degli elementi sopra descritti, per ottimizzarli al massimo.

In alcuni casi, le aziende creano nuove pagine AMP e le collegano a pagine esistenti sul sito dal tag head. Questo comunica a Google che deve servire la pagina AMP quando la persona che richiede la pagina è su un dispositivo mobile o ha una connessione lenta. In altri casi, puoi sostituire le loro pagine esistenti (o le loro pagine mobili esistenti, se hanno siti separati) con pagine AMP. Questo processo è chiamato “Canonical AMP” o “AMP canonical”.

Google preferisce questo metodo, perché le pagine AMP sono estremamente facili da scansionare, visualizzare, indicizzare e classificare. Le aziende potrebbero tuttavia non preferirlo, perché i limiti e i requisiti delle AMP possono rendere le pagine un po' spoglie. Le AMP possono anche complicare o limitare alcune delle attività di monitoraggio e test che si possono eseguire sulle pagine desktop e questo è un altro motivo per cui alcune persone le evitano.

I siti AMP Valid seguono tutte le regole e le linee guida AMP; a sua volta, Google mostra un piccolo fulmine grigio nei risultati per dispositivi mobili. È più probabile che Google li includa in speciali caroselli di risultati che tendono a posizionarsi nella parte superiore di una pagina.

Tutto questo è fantastico, ma se la conformità AMP causa troppi problemi al sito web, si può usare il codice AMP senza che sia AMP Valid. Dovresti usare AMP HTML quando puoi, senza preoccuparti di rispettare tutte le regole. Potrai comunque beneficiare della velocità di AMP HTML e AMP JavaScript, soprattutto considerando che sono gratuiti.

Ricorda che la velocità ha un impatto diretto sulle interazioni e sulle conversioni, ma aiuta anche con a profondità delle scansioni e con altri aspetti dell'efficienza delle scansioni.

I browser per dispositivi mobili funzionano in modo diverso rispetto ai browser per desktop. Inoltre, hanno processori più lenti e connessioni meno affidabili. Questi fattori rendono importante rivedere i tempi di caricamento delle pagine del sito dal punto di vista del "peggior caso" sui dispositivi mobili, per capire dove ci sono reali opportunità di miglioramento.

Scritto da Cindy Krum per Mailchimp. Cindy è un'esperta di funzionalità SEO per dispositivi mobili.


Punti chiave da ricordare

  • Le velocità di caricamento delle pagine più rapide migliorano il crawl budget di Google e aiutano a indicizzare più pagine del sito, migliorando complessivamente il traffico organico.
  • Gli utenti mobili vogliono che le pagine si carichino in meno di 3 secondi e le basse velocità portano ad alti tassi di bounce che danneggiano il posizionamento.
  • Poiché i browser per dispositivi mobili funzionano in modo diverso rispetto a quelli per desktop, ridurre il numero di richieste al server è fondamentale per l'ottimizzazione della velocità su dispositivi mobili.
  • La velocità della pagina influisce direttamente sulle metriche principali dei core web vitals di Google, che ora sono fattori essenziali per il posizionamento nell'indicizzazione mobile-first.

Condividi questo articolo