In che modo le basse velocità delle pagine mobili stanno rovinando i tuoi tassi di conversione

C'è una buona probabilità che il cattivo design della pagina di destinazione post clic ti costi almeno la metà del tuo budget PPC, suggerisce una recente ricerca di Google.

I dati del gigante dei motori di ricerca indicano che più di un utente di Internet mobile su due abbandonerà una pagina Web se non si carica entro 3 secondi. E a partire da febbraio 2017, la pagina di destinazione post-clic mobile media impiega 22 secondi imbarazzanti per caricarsi.

Se ti sei fermato a fare i conti, probabilmente ti rendi conto di quanto possa essere dannosa una pagina a caricamento lento per i tuoi profitti.

Se generi 5.000 visitatori della pagina di destinazione post clic su dispositivi mobili al mese e ne converti il ​​5%, perderai 1.500 conversioni nel corso dell'anno. Se il caricamento richiede più di 3 secondi, metà dei tuoi visitatori - 2.500 al mese in questo ipotetico - non vedono nemmeno l'intera pagina di destinazione post-clic prima di rimbalzare. Quel che è peggio, il tuo budget PPC viene prosciugato ogni volta che lo fanno.

Ma forse la tua pagina non si carica in 3 secondi. Forse si carica in 5 secondi, o 6 secondi, o 10 secondi. In tal caso, i dati di Google mostrano che stai perdendo ancora di più.

Nuovi benchmark per la velocità della pagina mobile

In che modo le tue pagine si impilano rispetto ad altre sul Web? Per stabilire alcuni nuovi parametri di riferimento per la velocità di caricamento, all'inizio del 2017 Google ha analizzato 900.000 pagine di destinazione post clic per dispositivi mobili di annunci in 126 paesi.

Quello che hanno trovato è stata una conferma della loro ipotesi: le pagine mobili sono "gonfie" con troppi elementi.

Tra questi, le pagine dei settori automobilistico, della vendita al dettaglio e della tecnologia impiegano in media più tempo a caricarsi. Indipendentemente dal settore, tuttavia, alcuni dati scioccanti mostrano che le pagine di destinazione post-clic per dispositivi mobili nel complesso lasciano molto a desiderare.

Ad esempio, il 70% delle pagine analizzate ha impiegato 7 secondi per caricare il contenuto appena above the fold. Su quelle stesse pagine, ci sono voluti più di 10 secondi totali per caricare il contenuto visivo above e below the fold.

Con l'aiuto di alcuni algoritmi avanzati di SOASTA, un altro studio di Google ha collegato la velocità di caricamento della pagina a indicatori di prestazioni chiave più significativi, come conversioni e frequenza di rimbalzo. In un post sul blog, i ricercatori elaborano:

Abbiamo creato due modelli di apprendimento automatico: uno per prevedere le conversioni e uno per prevedere le frequenze di rimbalzo. Ciascun modello utilizzava dati reali da un ampio campione di siti di e-commerce mobile, correlando l'impatto di 93 diverse metriche di pagina dai formati di immagine a un numero di script. In poche parole, i due modelli hanno cercato quali fattori del sito mobile avrebbero portato gli acquirenti ad acquistare o a rimbalzare. Il modello di conversione aveva un'accuratezza di previsione del 93% e il modello di rimbalzo era ancora più accurato, al 96%.

Con una precisione quasi millimetrica, i modelli di apprendimento automatico hanno scoperto che quando il tempo di caricamento di una pagina aumenta da uno a tre secondi, la probabilità che un visitatore mobile salti salti del 32%. Da lì, un grafico mostra, le cose peggiorano ancora:

Oltre alla frequenza di rimbalzo, lo studio ha mostrato che anche un tempo di caricamento lento della pagina può ridurre le conversioni. Allora qual è il colpevole?

I ricercatori hanno identificato alcuni dei principali difetti di progettazione dei dispositivi mobili.

I più grandi killer della velocità della pagina di destinazione post clic per dispositivi mobili

La velocità non è solo un detrattore delle conversioni e del budget pubblicitario pagato; è anche uno dei fattori di ranking dei motori di ricerca di Google. Se la tua pagina non si carica più velocemente dei 3 secondi consigliati, stai sprecando denaro e non vieni trovato. Uno dei seguenti problemi potrebbe essere il motivo.

1. Troppi elementi della pagina

Oggi la pagina web media ha le stesse dimensioni, in dati, del classico videogioco "Doom:"

A 2,3 MB, è cresciuto in un mucchio di elementi non necessari. E i suoi progettisti hanno la BSO - "sindrome dell'oggetto brillante e brillante" - suggerisce l'ingegnere del software, Ronan Cremin:

Mentre il web ha attraversato la sua imbarazzante adolescenza, abbiamo lasciato che il featuritus strisciante prendesse piede e alla fine il disordine ha semplicemente avuto la meglio su di noi. Nuovo modulo galleria JavaScript? Certo, perché no? Oooh quel nuovo carattere web sarebbe carino qui, ma perché non aggiungere un altro strumento di analisi mentre siamo lì? Dovrei preoccuparmi di ridimensionare questa immagine da 6.000 pixel? Nah, lascia che il browser lo faccia, funziona per me.

Google ha scoperto che "featuritus", come lo chiama Cremin, può avere impatti drasticamente negativi sulla velocità di caricamento. La pagina media ora presenta da centinaia a migliaia di elementi - titoli, immagini, pulsanti - archiviati su dozzine di server. Quando questi elementi non vengono ottimizzati, il risultato può essere un'esperienza di caricamento "imprevedibile" e "volatile".

I ricercatori sono arrivati ​​persino a identificare il numero di elementi su una pagina come il predittore più accurato delle conversioni. Meno, affermano, è di più. Quando gli elementi di una pagina aumentano da 400 a 6.000, le probabilità di convertire un visitatore diminuiscono del 95%.

I migliori designer di Internet, suggeriscono i dati, lo sanno dal 2014. Mentre la dimensione media della pagina è cresciuta costantemente per la maggior parte dei siti Web, i primi 10 hanno voltato pagina:

Per loro, il "peso" della pagina (dimensione dei dati) è diminuito negli ultimi anni. Tutti gli altri, a quanto pare, sono vittime di featuritus.

Secondo Google, il 70% delle pagine testate superava 1 MB, il 36% era di 2 MB e il 12% superava i 4 MB. Di conseguenza, ci sono poche possibilità che i visitatori restino a lungo. Tramite una connessione 3G veloce (la velocità della maggior parte delle connessioni cellulari in tutto il mondo), il caricamento di 1,49 MB richiede circa 7 secondi.

Risolvere il problema

Nel caso di una pagina pesantemente ponderata, la soluzione migliore è la prevenzione. Fortunatamente, la prevenzione è facile come impostare ciò che Google chiama "budget delle prestazioni". Prima di iniziare a creare la tua pagina, determina la velocità con cui desideri che venga caricata (il "budget"). Quindi, progetta la tua pagina entro i limiti del tuo budget.

"È molto più efficiente fornire qualcosa velocemente se rientra nei criteri di progettazione", afferma Hakan Nizam di L'Oreal. “Libererebbe la larghezza di banda dello sviluppatore. Consentirebbe agli sviluppatori di concentrarsi su altri fattori che influenzano i tassi di conversione. La conversazione sulla velocità dovrebbe essere risolta per passare ad altri elementi di differenziazione".

In un post sul blog per Google, Jason Cohen paragona il budget ad altre limitazioni creative:

Includere la velocità come parte del processo di progettazione non è diverso dal tenere conto dei limiti di altri mezzi creativi. I designer non creerebbero un annuncio a quattro colori per una pubblicazione stampata in bianco e nero o produrrebbero un video di 30 secondi per uno spazio di 15 secondi. Se non progettiamo entro i limiti del mezzo, il risultato è una brutta esperienza.

Nonostante il sorpasso da parte dei dispositivi mobili del traffico Internet desktop, il canale è ancora in ritardo rispetto al desktop nella maggior parte delle metriche sull'esperienza utente. I designer devono smettere di considerare il mobile come un ripensamento. È il suo mezzo e l'esperienza dell'utente dovrebbe rifletterlo.

Ovviamente, la tecnica del "budget" presuppone che tu parta da zero. Se stai cercando di ottimizzare una pagina di destinazione post clic già lenta, i ricercatori consigliano di condurre un controllo dei tuoi elementi e monitorare i tuoi script di terze parti per scoprire quali stanno contribuendo maggiormente al suo peso. Quindi, ridimensiona per ottimizzare di conseguenza.

2. Troppe immagini

Nella loro ricerca, un'immagine in particolare ha attirato l'attenzione dei tester di Google. Pesava ben 16 MB. Più e più volte, hanno continuato a trovare immagini che impantanavano le pagine.

"Elementi grafici come favicon, loghi e immagini dei prodotti possono facilmente comprendere fino a due terzi (in altre parole, centinaia di kilobyte) del peso totale di una pagina", hanno avvertito i ricercatori.

Con l'aiuto dei loro moduli di apprendimento automatico, hanno scoperto che il secondo indicatore più accurato delle conversioni era il numero di immagini su una pagina. Rispetto alle pagine che non potevano convertire correttamente i visitatori, le pagine che potevano contenere il 38% di immagini in meno.

Risolvere il problema

Uno dei modi più semplici per dare alla tua pagina un grande aumento di velocità è con una rapida ottimizzazione dell'immagine. Fai del tuo meglio per...

• Riduci le immagini non necessarie

Hai davvero bisogno di mostrare sei diverse angolazioni del tuo prodotto? Quella foto stock aggiunge davvero valore alla tua pagina di destinazione post clic? Hai bisogno di codificare il testo in un'immagine o puoi invece integrare il font scelto con Google Fonts o Adobe Typekit? Se la risposta è "no", considera di tagliare alcune immagini dal tuo design.

• Riduci la dimensione delle immagini necessarie

Se hai bisogno di tutte quelle immagini, alcuni strumenti e strategie diversi possono aiutarti a risparmiare larghezza di banda. Innanzitutto, conosci il formato del file immagine. Sostituire un PNG con un JPEG può farti risparmiare molte dimensioni e, a sua volta, velocità. D'altra parte, ridurrà anche la qualità dell'immagine. Per ulteriori informazioni su come decidere quale formato utilizzare, dai un'occhiata a questo post.

In secondo luogo, pensa all'utilizzo di uno strumento. I ricercatori affermano che il 30% delle pagine potrebbe salvare 250 KB di dati con l'aiuto di un compressore di immagini. Guetzli e Zopfli di Google sono due che vale la pena provare.

3. Utilizzo di JavaScript, tempo di caricamento dell'intera pagina

Prima che elementi come immagini e pulsanti possano essere visualizzati a un utente, il codice HTML con cui è costruita una pagina deve essere ricevuto e interpretato dal browser. Il tempo necessario è noto come "tempo pronto DOM", il predittore più accurato del rimbalzo della pagina, hanno scoperto i ricercatori.

I dati di Google mostrano che le sessioni utente che sono state rimbalzate avevano tempi di attivazione DOM più lenti del 55% rispetto alle sessioni senza rimbalzo. Rallentamenti di tale importanza sono spesso causati da JavaScript, un tipo di codice che interrompe l'analisi del codice HTML, utilizzato in molti strumenti di analisi, annunci e widget sociali di terze parti.

Daniel An e Pat Meenan paragonano il rallentamento a un ristorante disorganizzato:

Immagina di essere al ristorante e il tuo cameriere è pronto a portarti il ​​pasto, ma prima deve aspettare che il sale e il pepe vengano consegnati da un altro ristorante.

Ma JavaScript non è l'unico tipo di codice che rallenta le pagine mobili. CSS, HTML e le innumerevoli richieste necessarie per elaborare elementi come immagini e caratteri creano un ritardo nel tempo di caricamento dell'intera pagina, il secondo indicatore più accurato della frequenza di rimbalzo. La media delle pagine Web da cui gli utenti sono stati rimbalzati è stata di 2,5 secondi più lenta rispetto alla pagina media da cui non sono stati rimbalzati.

Risolvere il problema

Nel tentativo di migliorare l'esperienza di navigazione mobile, Google ha sviluppato i programmi AMP e AMP per gli annunci. Entrambi i framework offrono agli sviluppatori gli strumenti di cui hanno bisogno per fornire esperienze mobili alla velocità della luce. Loro includono:

• HTML AMP: questa è una versione ridotta e di base di ciò che riconosciamo come linguaggio di markup ipertestuale: il sistema di tag, numeri e lettere utilizzato per costruire le fondamenta della maggior parte delle pagine web.

• JavaScript AMP: la versione AMP di Google del popolare codice limita l'uso di JavaScript di terze parti e scritto dall'autore.

• Il CDN AMP: consente agli sviluppatori di archiviare una versione cache della propria pagina Web sui server di Google. Quella versione memorizzata nella cache è un'istantanea digitale della pagina che contiene tutti i suoi dati in un unico posto. Di conseguenza, può essere servito all'utente più velocemente.

Insieme, gli elementi del framework costituiscono la base di pagine che utilizzano dati 10 volte meno della media e annunci che si caricano 6 volte più velocemente.

Vai qui per saperne di più su come iniziare con AMP.

Qual è la velocità della tua pagina mobile?

Le tue pagine di destinazione post clic sono ottimizzate per i dispositivi mobili? Sono privi di immagini inutili, elementi goffi e JavaScript pesante?

Scoprilo con un test ottimizzato per dispositivi mobili di Google, quindi consulta la nostra guida per ottimizzare l'esperienza della pagina di destinazione post clic prima di creare la pagina successiva: