Cosa sono le Pagine Mobile Accelerate Google (AMP)?
Accelerated Mobile Pages (AMP) è un framework open-source formulato da Google per rendere l’esperienza web mobile migliore, più veloce e più bella.
La mentalità mobile è qui per rimanere – e questo vale sia per le imprese che per i consumatori.
Dire che gli utenti consultano i loro cellulari prima di effettuare un acquisto sarebbe un eufemismo. L’uso di Internet mobile ha superato l’uso dei telefoni cellulari da ufficio in tutto il mondo.
Tecnicamente, le Accelerated Mobile Pages (AMP) sono delle copie HTML ridotte del contenuto delle pagine web esistenti che offrono tempi di caricamento più rapidi rispetto ai documenti standard HTML5. Le pagine AMP possono essere servite dai siti web implementando il tag rel=amphtml nel loro HTML.
Le pagine AMP sono indicate da un piccolo flash grigio accanto ad alcuni risultati di ricerca di Google. Questo simbolo AMP lampeggiante indica che il sito web è ottimizzato per caricarsi rapidamente sui dispositivi mobili.
Componenti di pagine mobili accelerate
- HTML : Poiché Javascript non è affatto consentito, usiamo un markup diverso dal codice HTML tradizionale con tag unici. Il framework AMP richiede anche l’utilizzo di una versione semplificata del CSS.Screenshot che mostri come funziona il tag HTML AMP
- JS: Viene utilizzato per recuperare le risorse e viene ridotto per eliminare le rese non importanti. Con l’ampia libreria di componenti JS di AMP, è possibile caricare contenuti, creare animazioni, modificare il layout e molto altro ancora.
- CDN: Il Content Delivery Network (CDN) basato su Proxy, comunemente chiamato AMP Cache, è un componente essenziale della piattaforma AMP. Recupera i contenuti AMP e li mette in cache per una consegna rapida.
In sostanza, con un codice minimo, quando si integra l’AMP per standardizzare le pagine mobili, si considera la velocità e la leggibilità come priorità assoluta rispetto a qualsiasi altra cosa, anche rispetto alla condivisione. Questo è ciò che differenzia la navigazione mobile AMP dalla navigazione mobile non AMP.
Come fa Google Accelerated Mobile Pages a caricare una pagina più velocemente?
Per caricare una pagina più velocemente, il sistema AMP di Google funziona così:
- Eseguire tutti i JavaScript AMP in modo asincrono, il che significa che AMP crea JavaScript individuali per tutti i blocchi di contenuto e li carica separatamente. Così, per una particolare sezione, non è necessario rendere l’intera pagina.
- AMP carica la dimensione e la struttura della pagina senza alcun supporto di risorse. Di solito il browser non sa quanto durerà la struttura della pagina, ma nel caso dell’MPA di Google, determina la dimensione degli annunci, dei contenuti o delle immagini.
- Mantenendo tutti i JavaScript di terzi nella sandbox iframe, Google MPA assicura che i JavaScript di terzi non possano bloccare il rendering degli elementi principali della pagina. In altre parole, gli annunci di terze parti non danneggeranno la velocità di caricamento del contenuto della pagina principale.
- MPA può dare priorità al caricamento delle risorse, permettendo alla pagina web di caricare elementi essenziali come contenuti, immagini, ecc.
L’MPA di Google e come funziona, dovremmo sapere perché è importante per l’e-commerce.
L’impatto della velocità della pagina web sulla frequenza di rimbalzo
La velocità è un fattore importante per misurare la velocità di rimbalzo delle pagine web mobili. Prima di entrare più nel dettaglio su questo punto, è importante spiegare che la velocità è considerata principalmente sotto due aspetti per le percentuali di rimbalzo dei siti mobili, vale a dire il tempo di preparazione del DOM e il tempo di caricamento di un’intera pagina:
L’immagine mostra i fattori che potrebbero influire sulla velocità di navigazione mobile
1. Tempo di preparazione del DOM: il tempo di preparazione del DOM è il tempo necessario al codice HTML della pagina per essere ricevuto e analizzato dal browser – questo è il miglior indicatore della frequenza di rimbalzo. Anche se l’utente non sa quando il codice HTML viene ricevuto e analizzato, il codice deve essere caricato prima di poter caricare elementi della pagina, come le immagini. Se il codice HTML è troppo lungo, il sito impiegherà molto tempo a caricarsi. Per accelerare i tempi di preparazione della vostra pagina web mobile per il DOM, è meglio evitare l’uso di JavaScript, che blocca e impedisce al browser di analizzare il codice HTML. Gli elementi della pagina che utilizzano JavaScript includono annunci di terze parti e widget sociali che devono essere recuperati da un server esterno prima che la pagina possa essere caricata.
2. Tempo per caricare una pagina intera: il tempo per caricare una pagina intera include il tempo necessario per caricare immagini, font, codice CSS, ecc. su una pagina web. Un caricamento più veloce di una pagina intera comporta una frequenza di rimbalzo inferiore:
Considerate queste sorprendenti rivelazioni sulla velocità di caricamento delle pagine:
- Il sito mobile medio impiega 19 secondi per essere caricato su una connessione 3G e il 77% dei siti mobili impiega più di 10 secondi per essere caricato.
- Google ha scoperto che le conversioni diminuiscono del 20% per ogni secondo in più che serve per caricare una pagina web. Per confronto, i siti che hanno caricato in 5 secondi avevano un href=”https://www.thinkwithgoogle.com/intl/en-154/insights-inspiration/research-data/need-mobile-speed-how-mobile-latency-impacts-publisher-revenue/” rel=”noopener” target=”_blank”>investimenti pubblicitari mobili 2 volte più alti rispetto ai siti che hanno caricato in 19 secondi.
- È improbabile che il 61% degli utenti ritorni a un sito mobile a cui ha avuto problemi di accesso.
Dal suo lancio, non solo è aumentato il numero di pagine AMP, ma anche la loro velocità, il tempo mediano per caricare una pagina AMP da una ricerca su Google è ora meno di mezzo secondo.
L’AMP porta a un aumento del 10% del traffico del sito web, con un raddoppio del tempo trascorso sulla pagina. I siti di e-commerce che utilizzano la tecnologia MPA registrano un aumento del 20% delle vendite e delle conversioni rispetto alle pagine non MPA:
Google ha accelerato le pagine mobili per l’e-commerce
Inizialmente, l’MPA è stata progettata per articoli, blog e altri contenuti statici da caricare più velocemente. Ma nel corso degli anni, con i progressi compiuti, è ora altamente raccomandato per il commercio elettronico. Poiché i siti di e-commerce si stanno lentamente spostando verso i dispositivi mobili, i team di sviluppo dell’e-commerce stanno considerando di aggiungere la funzionalità MPA per ridurre i tempi di risposta delle pagine.
Quando si tratta di navigazione mobile, il 46% delle persone non ama aspettare che le pagine si carichino. Ci vogliono in media 15,3 secondi per caricare una landing page su un cellulare.
Secondo lo studio, un ritardo di un secondo nel tempo di caricamento delle pagine si traduce in :
- una perdita del 7% in termini di conversioni
- 11% di pagine viste in meno
- Riduzione del 16% della soddisfazione del cliente
- Inoltre, il 50% degli utenti di telefonia mobile abbandona una pagina se il caricamento richiede più di 10 secondi.
Esiste un approccio leggermente diverso all’implementazione di AMP per il commercio elettronico. Vediamo come funziona l’AMP per l’e-commerce.
Ci sono tre tipi di pagine nell’e-commerce in cui l’AMP è efficace: la home page, le pagine delle categorie di prodotti e le pagine dei prodotti.
1. La home page
Per quanto riguarda l’AMP per l’e-commerce, la home page è una delle pagine migliori per iniziare. Se la home page si carica rapidamente, è possibile salvare molti potenziali clienti.
2. Pagine delle categorie di prodotti
Le pagine delle categorie di prodotti sono le prossime pagine fondamentali per aggiungere l’MPA al vostro sito di e-commerce. Ad esempio, quando un utente visualizza il prodotto su Google, le pagine ottimizzate per l’MPA hanno maggiori probabilità di essere classificate perché sono relativamente veloci.
3. Pagine dei prodotti
Nelle pagine dei prodotti, l’MPA dà la priorità agli elementi di caricamento: le immagini e le descrizioni dei prodotti sono fattori importanti. L’AMP riconosce gli elementi e li fornisce per primi. Tutti i JS di terze parti saranno caricati in seguito.
Così, potete implementare l’AMP per l’e-commerce nelle pagine dei vostri prodotti utilizzando vari componenti come amp-selettore, amp-access, amp-bind, ecc.
Come attivare l’AMP di Google sul tuo sito di e-commerce
Per aggiungere Google AMP al vostro negozio online, avete bisogno dei seguenti articoli:
MPA aggiunto alla home page
La home page, essendo la prima pagina del vostro negozio e-commerce, riceve più traffico delle pagine interne. Per garantire che il percorso dei vostri acquirenti verso la vostra home page si svolga senza intoppi, è quindi essenziale semplificare il layout della vostra home page garantendo che il contenuto non sia statico.
Aggiungete quindi un componente “amp-carosello” alla home page che permette di visualizzare diverse immagini lungo un asse orizzontale. In questo caso, utilizzare il tipo=”carosello” per visualizzare una sequenza di immagini come striscia continua.
Aggiunta di PGA alle pagine dei prodotti
Le pagine dei prodotti includono una descrizione, foto, recensioni e prezzi di un prodotto. Utilizzare il selettore dell’amplificatore per far sì che l’utente scelga da una lista di opzioni che possono essere testo o immagini.
Vantaggi dell’utilizzo di Google AMP per l’e-commerce
Migliorare le conversioni con un’esperienza veloce e di facile utilizzo
L’aggiunta di un MPA al vostro negozio e-commerce aumenta la velocità di caricamento istantaneo delle pagine, permettendo ai vostri acquirenti di trovare i vostri prodotti in modo semplice e veloce. Collegando le vostre piattaforme più popolari come Google, Bing, Pinterest e Twitter alle pagine MPA, potete creare un’esperienza di scoperta sovraccarica per gli utenti. Questa migliore esperienza utente si traduce spesso in migliori conversioni e in un maggiore coinvolgimento.
Mantenere la flessibilità e il controllo
Anche se si sceglie di adottare la PGA, è comunque possibile utilizzare i CSS per personalizzare il proprio stile, i dati dinamici per recuperare nuovi dati dove è necessario, e i test A/B per sperimentare e costruire la migliore esperienza di acquisto possibile.
Migliorare il valore medio degli ordini e massimizzare le vendite
Con MPA, il vostro negozio e-commerce funziona senza problemi e il numero di clienti che ritornano è in aumento. Quindi, che si tratti di un piccolo negozio o di un mercato, AMP può aiutarvi ad effettuare la vendita.
I vantaggi dell’AMP per il commercio elettronico
L’implementazione non è facile
Lo svantaggio principale dell’implementazione di AMP nel vostro negozio di e-commerce è che avrete bisogno di uno sviluppatore esperto di e-commerce. Detto questo, l’implementazione è molto più facile se si possiede un sito WordPress. In questo caso, è sufficiente aggiungere AMP per WordPress al vostro sito web.
Le classifiche superiori non sono garantite
È importante notare che non è garantito un miglior posizionamento direttamente nei risultati di ricerca. Oltre alla maggiore velocità che aiuta a classificare meglio i siti web, Google tiene conto anche di altri fattori di ranking.
Personalizzare le pagine mobili accelerate di Google
I Webmasters, utilizzando la Google Search Console o il vostro HTML, possono ottimizzare il codice AMP per renderlo più personalizzabile e più facile da seguire. La cache AMP viene aggiornata con la query “update-cache”.
È possibile personalizzare molte opzioni per aggiungere ulteriori funzionalità alle pagine AMP, come annunci e analisi, contenuti dinamici, layout, media, presentazione, social network e altro ancora.
Ecco alcuni esempi di come personalizzare il vostro documento AMP HTML.
- amp-pixel: pixel di tracciamento
- amp-analitica: follow-up analitico
- amp-animazione : aggiungere animazioni
- classi amp-dinamiche-CSS: elementi CSS dinamici
- amp-iframe : visualizza un iframe
- amp-app-banner: banner fisso
