Cos'è l'AMP? La guida completa alle pagine mobili accelerate

Pubblicato: 2018-08-22

SEZIONE 1: Cosa sono le pagine mobili accelerate?

La mentalità mobile-first è destinata a rimanere: l'affermazione è vera sia dal lato aziendale che da quello dei consumatori.

Dire agli utenti di consultare i propri cellulari prima di effettuare un acquisto sarebbe un grossolano eufemismo. L'utilizzo di Internet mobile ha superato l'utilizzo mobile desktop in tutto il mondo. Anche paesi come l'India, il Messico e l'Indonesia hanno un utilizzo di smartphone più di 4 volte superiore rispetto al desktop:

Ci sono 30 miliardi di momenti mobili (il momento in cui un cliente consulta il proprio telefono e si aspetta una risposta immediata) ogni giorno solo negli Stati Uniti. Ciò significa che ogni giorno il tuo marchio ha 30 miliardi di opportunità mobili per offrire agli utenti qualcosa che desiderano.

E la spesa pubblicitaria per dispositivi mobili è ancora in ritardo rispetto al consumo di media mobili:

C'è un motivo per cui gli utenti trascorrono più tempo a navigare su dispositivi mobili invece di acquistare: gli utenti desiderano maggiormente la gratificazione istantanea quando utilizzano i loro dispositivi mobili.

Rispondi a questa domanda: quanto tempo aspetti che venga caricata una pagina web per dispositivi mobili?

Secondo i dati raccolti da Google e SOASTA il 40% dei consumatori abbandona una pagina che impiega più di tre secondi per caricarsi.

Tre secondi.

Questo è tutto il tempo che hai per attirare l'attenzione di un utente a cui è piaciuto il tuo annuncio e che ha fatto clic su di esso. E se la tua pagina web non si carica nel tempo sopra indicato, hai creato l'annuncio, indipendentemente da quanto fosse avvincente, invano. La cattiva notizia è che, secondo i dati, la maggior parte dei siti mobili al dettaglio impiega circa 6,9 secondi per caricarsi, ovvero più del doppio del tempo che il 40% degli utenti attende prima di abbandonare la pagina.

In che modo la velocità della pagina Web influisce sulla frequenza di rimbalzo

La velocità è un fattore importante quando si misura la frequenza di rimbalzo per le pagine Web mobili. Prima di approfondire questo aspetto, è importante spiegare che la velocità è principalmente considerata in due aspetti per le frequenze di rimbalzo dei siti per dispositivi mobili, ovvero il tempo di pronto DOM e il tempo di caricamento dell'intera pagina:

1. DOM ready time: DOM ready time è la quantità di tempo che impiega il codice HTML della pagina per essere ricevuto e analizzato dal browser – è il più grande predittore della frequenza di rimbalzo. Anche se l'utente potrebbe non essere a conoscenza di quando il codice HTML viene ricevuto e analizzato, il codice deve essere caricato prima di poter caricare qualsiasi elemento della pagina come le immagini. Se il codice HTML impiega troppo tempo, il tempo di caricamento del sito Web è lento. Per velocizzare il tempo di DOM ready della tua pagina web mobile, è meglio evitare l'uso di JavaScript che blocca e impedisce a un browser di analizzare il codice HTML. Gli elementi della pagina che utilizzano JavaScript includono annunci e widget sociali di terze parti che devono essere recuperati da un server esterno prima che la pagina possa essere caricata.

2. Tempo di caricamento della pagina intera : il tempo di caricamento della pagina intera include il tempo necessario per caricare immagini, caratteri, codici CSS ecc. su una pagina web. Un caricamento più veloce della pagina intera porta a una frequenza di rimbalzo inferiore:

Per assicurarti che la tua pagina web abbia un tempo di caricamento dell'intera pagina più veloce, dovresti ottimizzare immagini, caratteri ed evitare file di terze parti che potrebbero rallentare il tempo di caricamento.

Il tempo di caricamento della pagina è uno dei motivi più forti del rimbalzo della pagina, quel che è peggio è che gli utenti non solo abbandoneranno la pagina, ma, la ricerca suggerisce che il 79% degli utenti non tornerà dopo aver avuto un'esperienza lenta su una pagina web.

Considera queste sorprendenti rivelazioni sulla velocità di caricamento della pagina:

Il caricamento di un sito mobile medio su una connessione 3G richiede 19 secondi e il 77% dei siti mobili impiega più di 10 secondi per caricarsi.
Google ha scoperto che le conversioni diminuiscono del 20% per ogni secondo aggiuntivo impiegato da una pagina web per caricarsi. Per fare un confronto, i siti caricati in 5 secondi hanno registrato entrate pubblicitarie per dispositivi mobili 2 volte superiori rispetto ai siti caricati in 19 secondi.
È improbabile che il 61% degli utenti torni a un sito mobile a cui ha avuto problemi ad accedere.

Cosa significa questo?

Se il caricamento della pagina mobile non è istantaneo, non abbastanza veloce per l'utente, rimbalzerà e probabilmente non tornerà.
Per assicurarti che ciò non accada alla tua pagina web mobile, è importante che tu AMPlifichi i tuoi siti web mobili e le pagine di destinazione post clic.

Cos'è l'AMP?

Google ha lanciato il progetto open source Accelerated Mobile Pages per garantire che le pagine web per dispositivi mobili funzionino alla velocità ottimale.

Il progetto AMP mira a "costruire insieme il Web del futuro" consentendo di creare pagine Web e annunci costantemente veloci, belli e ad alte prestazioni su tutti i dispositivi e piattaforme di distribuzione.

AMP è stato creato in collaborazione con migliaia di sviluppatori, editori, siti Web, società di distribuzione e aziende tecnologiche. Finora sono state create oltre 1,5 miliardi di pagine AMP e più di 100 fornitori leader di analisi, tecnologia pubblicitaria e CMS supportano il formato AMP.

Quando crei pagine per dispositivi mobili in formato AMP, ottieni:

1. Prestazioni e coinvolgimento più elevati: le pagine create nel progetto open source AMP vengono caricate quasi istantaneamente, offrendo agli utenti un'esperienza fluida e più coinvolgente sia sui dispositivi mobili che sul desktop.

2. Flessibilità e risultati: le aziende hanno l'opportunità di decidere come presentare i propri contenuti e quali fornitori di tecnologia utilizzare, mantenendo e migliorando i KPI.

Probabilmente hai già fatto clic su una pagina AMP, ma non te ne sei accorto. L'unica cosa che potresti aver notato è quanto sia istantanea la pagina dopo aver cliccato. Le pagine web create da AMP hanno un indicatore a forma di fulmine nei risultati di ricerca.

Ecco come puoi riconoscere AMP nei risultati di ricerca:

Questo è l'aspetto di una pagina AMP rispetto a una normale pagina web:

Il motivo per cui le pagine AMP si caricano istantaneamente è perché AMP limita HTML/CSS e JavaScript, consentendo un rendering più rapido delle pagine web per dispositivi mobili. A differenza delle normali pagine per dispositivi mobili, le pagine AMP vengono automaticamente memorizzate nella cache da Google AMP Cache per tempi di caricamento più rapidi nella ricerca Google.

Gli utenti hanno determinate aspettative quando utilizzano i propri dispositivi mobili, desiderano esperienze significative, pertinenti e più rapide, per garantire che le aspettative del pubblico di destinazione siano soddisfatte. AMP è la soluzione migliore.

Questa guida ti guiderà attraverso tutto ciò che devi sapere sul progetto open source AMP. Esamineremo la procedura esatta di come funzionano gli AMP e cosa rende le pagine caricate così velocemente.

La guida presenterà anche casi di studio su come l'utilizzo di AMP ha contribuito ad aumentare le conversioni per le aziende in diversi settori e i vantaggi che otterrai quando AMPlificherai le tue pagine. L'ultima sezione discuterà cosa sono le pagine di destinazione post clic per dispositivi mobili accelerati e perché dovresti creare le pagine per offrire ai visitatori una pagina di destinazione post clic più veloce e più pertinente.

SEZIONE 2: Come funziona AMP?

Google ha lanciato il framework open source Accelerated Mobile Pages (AMP) a febbraio 2016. Il framework è stato creato perché era necessario creare esperienze utente ottimizzate e strettamente integrate, invece delle esperienze mobili goffe e lente con cui gli utenti si occupano quotidianamente base.

Google ha avviato il progetto AMP per creare un framework che fornisse un percorso esatto per la creazione di esperienze di pagine Web mobili ottimizzate. Il progetto open source AMP è ben documentato, facilmente implementabile, convalidabile e convinto di mettere l'utente al primo posto nella progettazione della pagina web.

Dal suo lancio, quasi due anni fa, 25 milioni di domini hanno pubblicato più di 4 miliardi di pagine AMP:

Dal suo lancio non solo il numero di pagine AMP è aumentato, ma anche la loro velocità, il tempo medio necessario per caricare una pagina AMP dalla ricerca di Google è ora inferiore a mezzo secondo.

AMP porta a un aumento del 10% del traffico del sito Web con un aumento di 2 volte del tempo trascorso sulla pagina. I siti web di e-commerce che utilizzano AMP registrano un aumento del 20% delle vendite e delle conversioni rispetto alle pagine non AMP:

AMP aiuta le aziende a creare versioni semplificate, pulite e pertinenti delle proprie pagine Web, offrendo agli utenti un'esperienza Web mobile più veloce.

Chartbeat ha analizzato i dati di 360 siti Web che utilizzano AMP da giugno 2016 a maggio 2017 per scoprire che un tipico publisher che utilizza pagine AMP ha visto un 16% di tutto il traffico mobile sui propri contenuti AMP.

Le pagine AMP si caricano circa quattro volte più velocemente delle pagine web standard, inoltre gli utenti interagiscono con le pagine AMP del 35% in più rispetto alle pagine web mobili standard:

Ora che sappiamo perché dovresti utilizzare le pagine AMP, diamo un'occhiata a come funziona AMP, come si confronta con il web design reattivo, gli articoli istantanei di Facebook e le app Web progressive.

I 3 componenti principali di AMP

Le pagine AMP sono costruite con i seguenti tre componenti principali:

HTML AMP

L'HTML AMP è essenzialmente HTML solo con alcune restrizioni per prestazioni affidabili. Il file HTML AMP più semplice ha questo aspetto:

La maggior parte dei tag in HTML AMP sono tag HTML normali, tuttavia alcuni tag HTML vengono sostituiti con tag specifici per AMP. Questi tag personalizzati sono chiamati componenti HTML AMP e rendono i modelli di tag comuni facili da implementare in modo efficiente. Le pagine AMP vengono scoperte dai motori di ricerca e da altre piattaforme tramite il tag HTML.

Puoi scegliere di avere una versione non AMP e una versione AMP della tua pagina o solo una versione AMP.

JavaScript AMP (JS)

La libreria AMP JS garantisce il rendering veloce delle pagine HTML AMP. La libreria JS implementa tutte le migliori pratiche di prestazioni di AMP come CSS in linea e attivazione dei caratteri, questo gestisce il caricamento delle risorse e ti fornisce i tag HTML personalizzati per garantire un rendering veloce della pagina.

AMP JS rende asincrono tutto ciò che proviene dalle risorse esterne, in modo che nulla sulla pagina possa impedire il rendering. Il JS utilizza anche altre tecniche di prestazione come il sandboxing di tutti gli iframe, il pre-calcolo del layout di ogni elemento della pagina prima che le risorse vengano caricate e la disabilitazione dei selettori CSS lenti.

AMP Cache

La cache AMP di Google viene utilizzata per pubblicare pagine HTML AMP memorizzate nella cache. AMP Cache è una rete di distribuzione dei contenuti basata su proxy utilizzata per la consegna di tutti i documenti AMP validi. La cache recupera le pagine HTML AMP, le memorizza nella cache e migliora automaticamente le prestazioni della pagina.

Per mantenere la massima efficienza, AMP Cache carica il documento, i file JS e tutte le immagini dalla stessa origine che utilizza HTTP 2.0.

AMP Cache è dotato di un sistema di convalida integrato che conferma che una pagina è garantita per funzionare e che non dipende da forze esterne che potrebbero rallentare la pagina. Il sistema di convalida opera su una serie di asserzioni che confermano che il markup della pagina soddisfa le specifiche HTML AMP.

Accanto a ogni pagina AMP è disponibile una versione aggiuntiva del sistema di convalida. Questa versione è in grado di registrare gli errori di convalida direttamente nella console del browser quando viene eseguito il rendering della pagina, consentendoti di vedere le complesse modifiche al codice che possono avere un impatto sulle prestazioni e sull'esperienza utente.

I tre componenti principali di AMP lavorano all'unisono per consentire alle pagine di caricarsi rapidamente. La prossima sezione evidenzierà le sette tecniche di ottimizzazione che si combinano per rendere le pagine AMP così veloci.

Tutto AMP JavaScript viene eseguito in modo asincrono

JavaScript può modificare ogni aspetto della pagina, ha il potere di bloccare la costruzione del DOM e ritardare il rendering della pagina: entrambi i fattori portano a un caricamento lento della pagina. Per garantire che JavaScript non ritardi il rendering della pagina, AMP consente solo JavaScript asincrono.

Le pagine AMP non includono alcun JavaScript scritto dall'autore, invece tutte le funzioni della pagina interattiva sono gestite da elementi AMP personalizzati. Questi elementi AMP personalizzati possono includere JavaScript, ma sono progettati con cura per garantire che non avviino alcun degrado delle prestazioni.

AMP esegue JavaScript di terze parti negli iframe, ma non può bloccare il rendering della pagina.

Tutte le risorse sono dimensionate staticamente

Tutte le risorse esterne come immagini, iframe e annunci devono indicare la loro dimensione HTML in modo che AMP possa determinare la dimensione e la posizione di ciascun elemento prima che le risorse della pagina vengano scaricate. AMP carica il layout della pagina senza attendere il download di alcuna risorsa.

AMP ha la capacità di separare il layout del documento dal layout delle dimensioni, è necessaria solo una singola richiesta HTTP per impaginare l'intero documento. Poiché AMP è ottimizzato per evitare costosi layout di stile e ricalcoli nel browser, non c'è alcun re-layout quando le risorse della pagina vengono caricate.

I meccanismi di estensione non bloccano il rendering

AMP non consente ai meccanismi di estensione di bloccare il rendering della pagina, supporta le estensioni per elementi come lightbox e incorporamenti di social media e, sebbene richiedano richieste HTTP aggiuntive, non bloccano il layout e il rendering della pagina.

Se una pagina utilizza uno script personalizzato, deve comunicare al sistema AMP che alla fine avrà un tag personalizzato, AMP quindi crea il tag richiesto in modo che la pagina non rallenti. Ad esempio, se il tag amp-iframe dice ad AMP che ci sarà un tag amp-iframe, AMP crea quindi la casella iframe prima che sappia cosa includerà.

Tutti i JavaScript di terze parti sono tenuti fuori dal percorso critico

JavaScript di terze parti utilizza il caricamento JS sincrono, questo tende a rallentare il tempo di caricamento. Le pagine AMP consentono JavaScript di terze parti ma solo negli iframe sandbox, in questo modo il caricamento di JavaScript non può bloccare l'esecuzione della pagina principale. Anche se l'iframe JavaScript in modalità sandbox attiva più ricalcoli di stile, i loro minuscoli iframe hanno pochissimo DOM.

I ricalcoli iframe vengono eseguiti molto velocemente rispetto al ricalcolo degli stili e del layout per la pagina.

Il CSS deve essere in linea e vincolato alle dimensioni

I CSS bloccano il rendering, bloccano anche il caricamento di tutte le pagine e hanno la tendenza a causare rigonfiamenti. HTML AMP consente solo stili in linea, questo rimuove 1 o quasi più richieste HTTP dal percorso di rendering critico alla maggior parte delle pagine web.

Il foglio di stile in linea dovrebbe avere una dimensione massima di 75 kb, sebbene sia abbastanza grande per pagine molto sofisticate, richiede comunque all'autore della pagina di praticare una buona igiene CSS.

L'attivazione dei caratteri è efficiente

L'ottimizzazione dei caratteri Web è fondamentale per un caricamento rapido poiché i caratteri Web sono generalmente di grandi dimensioni. In una pagina tipica che include alcuni script di sincronizzazione e un paio di fogli di stile esterni, il browser attende di scaricare i caratteri finché tutti gli script non vengono caricati.

Il framework AMP dichiara zero richieste HTTP fino a quando tutti i caratteri non iniziano a essere scaricati. Ciò è reso possibile solo perché tutto il JavaScript in AMP ha l'attributo asincrono e sono consentiti solo i fogli in linea, non ci sono richieste HTTP che impediscono al browser di scaricare i caratteri.

I ricalcoli dello stile sono ridotti al minimo

Nelle pagine AMP, tutte le letture DOM si verificano prima di tutte le scritture, questo assicura che ci sia un solo ricalcolo degli stili per frame, quindi non ci sono effetti negativi sulle prestazioni di rendering della pagina.

Esecuzione solo di animazioni con accelerazione GPU

Per eseguire ottimizzazioni veloci devi eseguirle su GPU. La GPU funziona a livelli, sa come eseguire alcune cose su questi livelli: i livelli possono essere spostati e sfumati. Tuttavia, quando la GPU non è in grado di aggiornare il layout della pagina, assegna questa attività al browser e ciò non va bene per il tempo di caricamento della pagina.

Le regole per i CSS relativi all'animazione assicurano che l'animazione possa essere accelerata dalla GPU, questo significa che AMP consente solo l'animazione e la transizione su trasformazione e opacità in modo che il layout della pagina non sia richiesto.

Il caricamento delle risorse ha la priorità

AMP controlla il caricamento di tutte le risorse, dà la priorità al caricamento delle risorse e carica solo ciò che è necessario e pre-recupera tutte le risorse a caricamento lento.

Quando AMP scarica le risorse, ottimizza i download in modo che le risorse più importanti vengano scaricate per prime. Tutte le immagini e gli annunci vengono scaricati solo se è probabile che vengano visualizzati dall'utente, se sono above the fold o se è probabile che il visitatore li scorra.

AMP ha anche la capacità di pre-recuperare le risorse caricate pigre, queste risorse vengono caricate il più tardi possibile, ma vengono pre-recuperate il prima possibile. In questo modo le cose si caricano molto velocemente, ma la CPU viene utilizzata solo quando le risorse vengono mostrate agli utenti.

Carica istantaneamente le pagine

La nuova API di preconnessione AMP è ampiamente utilizzata per garantire che le richieste HTTP siano il più veloci possibile non appena vengono effettuate. Per questo motivo la pagina viene visualizzata prima che l'utente dichiari esplicitamente di volervi accedere, la pagina potrebbe essere disponibile nel momento in cui l'utente la vede effettivamente, facendo caricare la pagina all'istante.

AMP è ottimizzato per non utilizzare molta larghezza di banda e CPU durante il pre-rendering dei contenuti web. Quando i documenti AMP vengono pre-renderizzati per il caricamento istantaneo, le risorse above the fold vengono effettivamente scaricate e le risorse che potrebbero utilizzare molta CPU, come gli iframe di terze parti, non vengono scaricate.

Puoi anche utilizzare il seguente video per scoprire i "7 modi in cui AMP velocizza le tue pagine":

Ora che sappiamo come funziona AMP, vediamo come AMP si confronta con gli articoli istantanei di Facebook, il Responsive Web Design e le app Web progressive.

AMP contro gli articoli istantanei di Facebook

Facebook ha lanciato Instant Articles nel 2015 per aiutare gli editori a offrire un'esperienza di lettura incredibilmente veloce e coinvolgente per le persone su Facebook. Gli articoli istantanei di Facebook sono:

10 volte più veloce degli articoli web per cellulari standard
In media vengono letti il 20% in più di articoli istantanei
Il 70% dei lettori ha meno probabilità di abbandonare un articolo istantaneo

Instant Articles aiuta gli editori a creare articoli veloci e interattivi su Facebook. Ti offrono i seguenti vantaggi:

Veloce e reattivo: gli articoli istantanei si caricano istantaneamente indipendentemente dalla connessione o dal dispositivo su cui si trova l'utente. Gli articoli sono facili da usare poiché si trasformano per l'esperienza di narrazione mobile.
Interattivi e coinvolgenti: l'esperienza immersiva degli articoli li rende più interattivi, motivo per cui gli articoli istantanei vengono condivisi il 30% più spesso degli articoli sul Web mobile. L'aiuto amplifica la portata delle tue storie nella sezione Notizie.
Monetizzazione facile e flessibile: la monetizzazione è parte integrante di Instant Articles. Per far crescere la tua attività con gli Articoli, puoi estendere le inserzioni vendute direttamente e riempire l'inventario pubblicitario disponibile con Audience Network di Facebook e persino creare contenuti brandizzati nativi.

Sia le pagine AMP che gli articoli istantanei forniscono agli utenti un tempo di caricamento rapido, che aiuta a ridurre la frequenza di rimbalzo della pagina e ad aumentare il coinvolgimento. In effetti, gli articoli istantanei di Facebook si caricano ancora più velocemente delle pagine AMP:

Tuttavia, il tasso di adozione delle pagine AMP è molto più elevato rispetto agli articoli istantanei e ciò è dovuto in gran parte al fatto che Facebook dà sempre più priorità ai video rispetto agli articoli di testo nel suo feed di notizie. Ciò ha portato diversi editori a smettere di utilizzare Instant Articles, tra cui New York Times e The Guardian.

Secondo Parsley, Google ha superato Facebook come principale fonte di traffico esterno per gli editori. Con Google che ora rappresenta il 42% del traffico esterno degli editori:

Quando Facebook ha lanciato Instant Articles ha superato Google come fonte dominante di traffico verso i siti Web di contenuti e media, tuttavia, con il lancio e il successo di AMP, Google è tornato in testa.

Il successo del progetto AMP risiede nel fatto che si tratta di un'iniziativa open source, non di una partnership commerciale. Invece di mantenere gli utenti confinati a una particolare app, come ha fatto Facebook con gli articoli istantanei, il progetto AMP mira a cambiare il modo in cui gli editori creano pagine web mobili.

AMP vs Responsive Web Design (RWD)

La creazione di siti Web ottimizzati per i dispositivi mobili è stata una priorità per i professionisti del marketing da quando Google ha lanciato Mobilegeddon all'inizio del 2015. Il Responsive Web Design mirava ad aiutare a creare pagine Web incentrate sulla flessibilità. Una pagina web reattiva ha funzionato su qualsiasi dispositivo o schermo offrendo un'esperienza web mobile migliore e più coinvolgente.

Fondamentalmente, AMP e Responsive Web Design utilizzano quasi gli stessi elementi costitutivi di base per creare una pagina mobile, ad esempio HTML e JavaScript. Tuttavia, hanno il loro insieme di differenze che li distinguono, come ad esempio:

1. RWD si concentra sulla flessibilità: il Responsive Web Design aggiunge flessibilità al tuo sito web. Puoi creare una pagina che risponda automaticamente alle dimensioni dello schermo di un visitatore, questo consente alla tua pagina di raggiungere e offrire agli utenti una buona esperienza mobile su un'ampia gamma di dimensioni dello schermo. Il Responsive Web Design non si concentra esclusivamente sui dispositivi mobili, ma funziona per tutti i dispositivi e tutte le esperienze utente.

2. AMP è incentrato sulla velocità: il framework open source AMP è incentrato sulla velocità, in particolare sulla velocità della pagina mobile. AMP ha introdotto il rendering istantaneo per i contenuti web mobili. Utilizzando fogli di stile in linea, caricamento lento, prelettura delle risorse e altre tecniche di ottimizzazione, il framework è in grado di caricare le pagine mobili all'istante.

3. AMP funziona con una pagina Web, RWD sostituisce una pagina Web: sebbene sia possibile utilizzare AMP esclusivamente sulle tue pagine, AMP può anche essere aggiunto a un sito Web non reattivo o reattivo esistente, senza una riprogettazione del sito Web. Tuttavia, per rendere reattiva una pagina Web è necessario riprogettare la pagina.

4. AMP offre una migliore esperienza utente: ci sono due fattori principali che determinano l'esperienza utente mobile, ovvero gli elementi della pagina sono ottimizzati per i dispositivi mobili e la velocità. Sebbene Responsive Web Design funzioni bene con il ridimensionamento degli elementi della pagina in modo che corrispondano allo schermo dell'utente, fallisce orribilmente alla velocità rispetto alle pagine AMP.

5. AMP ha restrizioni JavaScript: Responsive Web Design favorisce tutti gli script e le librerie multimediali di terze parti, lo stesso non si può dire per le pagine AMP. Per velocizzare il caricamento delle pagine, il framework AMP ha funzionalità JavaScript e CSS molto limitate.

AMP funziona bene per le pagine statiche: pagine che non presentano molti contenuti dinamici, mentre RWD può essere utilizzato per qualsiasi tipo di pagina. Tuttavia, le pagine Web responsive impiegano un po' troppo tempo per essere caricate, il che fa rimbalzare i visitatori, probabilmente non tornano mai più. Se stai cercando di offrire agli utenti un'esperienza reattiva rapida e mobile, dovresti prendere in considerazione l'utilizzo delle pagine AMP.

AMP vs. Progressive Web App (PWA)

Progressive Web Apps è un'app Web mobile fornita tramite il Web, si comporta come un'app nativa, la differenza principale tra PWA e app native è che le PWA non devono essere scaricate da Google o dall'App Store.

Le app Web progressive funzionano all'interno del browser Web, questo lo fa caricare all'istante, anche se la tua connessione Internet non è molto forte. PWA utilizza la memorizzazione nella cache per garantire che l'app rimanga aggiornata, in modo che l'utente possa vedere solo la versione più recente.

La necessità di Progressive Web App è nata dal fatto che i primi 1.000 siti Web mobili raggiungono 4 volte più persone rispetto alle prime 1.000 app native. Tuttavia, questi siti Web coinvolgono gli utenti per 20 volte in meno di minuti, in media, rispetto alle app mobili.

Il che significa essenzialmente che i siti Web mobili sono in grado di attirare visitatori ma non di coinvolgerli.

Le PWA sono progettate per apparire, sentirsi e funzionare come fanno le app mobili native. Gli utenti li incontrano in un browser come farebbero con qualsiasi sito Web mobile. Dopo aver interagito con quel sito, all'utente viene richiesto di installare l'app Web sul proprio dispositivo. Se scelgono di installare, l'app viene scaricata sul proprio dispositivo come farebbe un'app nativa.

PWA sono:

Affidabili: si caricano istantaneamente anche in condizioni di rete deboli.
Veloce: rispondi rapidamente alle interazioni dell'utente con animazioni fluide e senza scorrimento irregolare.
Coinvolgente: si sentono come un'app nativa sul dispositivo, offrendo un'esperienza utente coinvolgente.

Quando un'app Web mobile soddisfa i requisiti necessari delineati da Google, l'app Web mobile può essere offerta agli utenti come scaricabile.

Queste sono le principali differenze tra AMP e PWA:

Puoi scegliere di utilizzare AMP esclusivamente per creare un'esperienza veloce ma semplice. Puoi fare affidamento su un'app Web progressiva per creare un'esperienza utente dinamica ma più lenta. Oppure, puoi iniziare velocemente e rimanere veloce incorporando entrambi nel tuo web design.

Oggi, gli usi di AMP insieme alle app Web progressive stanno diventando più diffusi, con gli sviluppatori che sfruttano entrambi in tre modi.

1. AMP come app web progressiva

Se i tuoi contenuti sono principalmente statici e puoi accontentarti delle funzionalità limitate di AMP, questa opzione ti consente di creare esperienze velocissime come un'app Web progressiva. AMP per esempio, è costruito in questo modo: un'app web progressiva interamente caricata in AMP. Ha un addetto all'assistenza, che consente l'accesso offline, nonché un manifest, che richiede il banner "Aggiungi alla schermata iniziale".

2. AMP in un'app Web progressiva

Un altro modo per utilizzare AMP e un'app Web progressiva insieme è pensare alla tua pagina AMP come al collegamento al tuo sito web. Cattura l'utente con un carico istantaneo, quindi lo riavvolge nella tua applicazione web progressiva. Ciò ti consente di combinare le pagine AMP a caricamento rapido con una PWA più dinamica rispetto alla prima opzione.

3. AMP in un'app Web progressiva

Come nel caso di AMP vs. PWA, non deve essere tutto o niente. Non è necessario creare tutte le tue pagine con AMP; inoltre non è necessario separare AMP e PWA come gancio e asta. Ora puoi effettivamente AMP solo una piccola sottosezione di una singola pagina, diminuendo così le sue dimensioni e abbassando il suo tempo di caricamento senza il completo compromesso della funzionalità dinamica.

Ciò comporta l'utilizzo di un'altra forma di AMP chiamata "Shadow AMP", che consente ad AMP di nidificare all'interno di un'area di una pagina web. Il risultato è AMP all'interno della shell di un'applicazione web progressiva.

Il Washington Post mostra un esempio ideale di PWA e AMP che lavorano insieme per portare un migliore coinvolgimento e tempi di caricamento più rapidi. Quando il Washington Post ha inizialmente reso il proprio sito web reattivo, la loro velocità era di 3500 ms. Quando hanno adottato AMP, il tempo di caricamento della pagina è stato ridotto a 1200 ms, quindi è stato ulteriormente ridotto a 400 ms con l'aiuto della tecnologia AMP CDN.

Dopo aver adottato PWA per ridurre il carico del sito Web, gli utenti possono godere di velocità di caricamento della pagina estremamente elevate senza alcuna interruzione e una migliore esperienza utente.

Il progetto Accelerated Mobile Pages ti consente di creare pagine mobili che si caricano istantaneamente, aiutando i visitatori a interagire meglio con la pagina invece di rimbalzare. Le tecniche di ottimizzazione coinvolte nella creazione di pagine AMP non solo velocizzano il tempo di caricamento della pagina, ma offrono anche ai visitatori una buona esperienza utente.

La prossima sezione si concentrerà sugli esatti vantaggi che ottieni quando utilizzi il framework AMP sulle tue pagine.

SEZIONE 3: Vantaggi e restrizioni dell'AMP

AMP assicura che le pagine web si carichino più velocemente, il che aiuta l'esperienza dell'utente e fa sì che i visitatori rimangano più a lungo sulla pagina. AMP utilizza HTML AMP che aiuta le pagine mobili a caricarsi più velocemente, infatti secondo Gary Illayes di Google, il tempo di caricamento medio per le pagine AMP è di 1 secondo, che è 4 volte più veloce della pagina HTML standard media.

Abbiamo già discusso il collegamento tra la frequenza di rimbalzo della pagina e la velocità della pagina e abbiamo visto un resoconto dettagliato di come funziona AMP e come si confronta con PWA, RWD e gli articoli istantanei di Facebook.

Questa sezione della guida si concentrerà sui vantaggi e sulle limitazioni di AMP, aiutandoti a ottenere un resoconto dettagliato di ciò per cui sei in negozio quando crei pagine AMP.

Vantaggi dell'AMP

Quando la tua pagina web mobile si carica più velocemente, migliori automaticamente l'esperienza utente e i tuoi KPI. Grazie al caricamento istantaneo delle pagine AMP, sei in grado di offrire un'esperienza web costantemente veloce ai tuoi utenti su tutti i dispositivi e piattaforme come Google, LinkedIn e Bing.

AMP offre i seguenti vantaggi alle tue pagine mobili.

Coinvolge il pubblico

Il tempo di caricamento medio per le pagine AMP è inferiore a un secondo, ciò significa che quando un utente arriva su una pagina AMP, ottiene ciò che stava cercando all'istante. Poiché la pagina si carica istantaneamente, interagiscono con la pagina più a lungo e sono più aperti a conoscere la tua offerta, il che rende più probabile l'esecuzione dell'azione che volevi che intraprendessero.

Massimizza le entrate

Ogni secondo aggiuntivo impiegato dalla tua pagina per caricare le tue conversioni diminuiscono del 12%. Ciò significa che se desideri coinvolgere il pubblico e aumentare il tuo ROI, devi assicurarti che la tua pagina mobile soddisfi le aspettative di velocità dei tuoi visitatori.

Il framework AMP ti consente di offrire agli utenti un'esperienza più veloce ovunque, inclusi annunci, pagine di destinazione post clic e siti Web.

Mantieni flessibilità e controllo

Quando adotti il formato AMP hai la possibilità di mantenere il tuo marchio sfruttando i componenti web ottimizzati per AMP. Puoi utilizzare i CSS per personalizzare lo stile della tua pagina web e utilizzare il contenuto dinamico per recuperare i dati dove necessario.

Puoi anche utilizzare i test A/B per testare e creare la migliore esperienza utente mobile possibile per i tuoi clienti.

Riduci la complessità delle tue operazioni

Il processo di creazione di pagine AMP è piuttosto semplice e diretto. Hai la possibilità di convertire l'intero archivio soprattutto se utilizzi CMS, inclusi Drupal e WordPress.

Non è necessario disporre di abilità speciali per ottimizzare il codice per ogni pagina AMP, il formato AMP è completamente portabile e le pagine AMP sono costantemente veloci indipendentemente da come l'utente le arriva.

Massimizza il tuo ROI

Una volta create, le pagine AMP possono essere distribuite contemporaneamente su un'ampia varietà di piattaforme di distribuzione. Ciò ti consente di pubblicare i tuoi annunci su entrambe le pagine AMP e non AMP, il che significa che puoi creare i tuoi annunci una volta e offrire un'esperienza di marca memorabile ovunque.

Crea un futuro sostenibile

Il progetto AMP è un'iniziativa open source che protegge il futuro del Web aiutando tutti a offrire un'esperienza utente mobile migliore e più veloce. Puoi unirti al progetto AMP e costruire un futuro sostenibile per la tua attività su un Web aperto e più veloce aderendo al progetto AMP.

Fornisci una migliore esperienza utente

Naturalmente, il vantaggio più ovvio dell'utilizzo di landing page post-clic per dispositivi mobili accelerati è che forniranno una soddisfazione dell'utente molto più elevata. Quando una persona su due non può prendersi la briga di aspettare solo 10 secondi per il caricamento di un sito Web, accelerare il processo del 15-85% può avere un enorme impatto sulla felicità dei visitatori.

Ottieni una spinta SEO

L'algoritmo di Google tiene conto della velocità della pagina e della reattività dei dispositivi mobili. Più velocemente la tua pagina viene caricata sui dispositivi mobili, più alta sarà classificata nelle pagine dei risultati dei motori di ricerca.

Tutte le pagine abilitate per AMP verranno visualizzate in un formato carosello anche sopra gli annunci a pagamento nei risultati di ricerca hanno un fulmine verde sotto il titolo.

Sebbene l'utilizzo delle pagine AMP offra molti vantaggi, ci sono anche alcuni svantaggi di AMP.

Nessun JavaScript di terze parti

Poiché non hai la possibilità di utilizzare JavaScript di terze parti, devi dire addio alle funzionalità di analisi e monitoraggio che ti consentono di offrire esperienze pubblicitarie altamente mirate.

Non solo, ma con la versione più leggera di JavaScript di Google, gli elementi della pagina che richiedono il trasferimento di dati non possono essere utilizzati nelle pagine AMP.

Nessun monitoraggio di Google Analytics

Google utilizza una versione cache delle pagine AMP per gli utenti invece di accedere ai tuoi server, questo è uno dei motivi per cui le pagine AMP si caricano così velocemente. Sebbene la cache consenta alle tue pagine di caricarsi più velocemente, Google Analytics non tiene traccia delle visite degli utenti a meno che tu non effettui configurazioni su GA e applichi codici di monitoraggio separati alle tue pagine AMP.

Ecco come puoi monitorare le pagine AMP in Google Analytics con Google Tag Manager.

Le pagine AMP hanno una serie di vantaggi e svantaggi, tuttavia, se stai cercando di offrire ai tuoi visitatori un'esperienza mobile veloce e ottimizzata, i professionisti AMP superano decisamente i contro.

La sezione successiva evidenzierà casi di studio di aziende che hanno utilizzato AMP per soddisfare i KPI e aumentare il ROI.

SEZIONE 4: Storie di successo di AMP

Quando parliamo di pagine web per dispositivi mobili, la velocità è uguale alle entrate. La ricerca di SOASTA mostra che anche un ritardo di 100 ms nel tempo di caricamento della pagina può portare a conversioni inferiori:

Per evidenziare l'impatto che AMP può avere sulle pagine web per dispositivi mobili, Google ha incaricato Forrester Consulting di condurre uno studio sull'Economic Impact™ totale su editori e siti web di e-commerce che utilizzano AMP.

La ricerca mette in evidenza 4 web company che hanno utilizzato il formato AMP. Osservando i risultati delle 4 società, Forrester ha creato un modello per prevedere il rendimento atteso dall'implementazione di AMP su un periodo di tre anni.

Utilizzando questo modello, un sito Web con un conteggio mensile di 4 milioni di visite al sito e un margine di profitto del 10% potrebbe aspettarsi di recuperare i costi di impianto di pagine AMP e iniziare a vedere guadagni positivi in un periodo di tempo inferiore a 6 mesi:

Questi sono i principali risultati ottenuti dallo studio:

Aumento del 20% del tasso di conversione delle vendite. I test A/B condotti dai due siti di e-commerce intervistati per questo studio hanno dimostrato un aumento del 20% del tasso di conversione sulle loro pagine AMP, che genererebbe oltre $ 200K di profitto annuale, in base al modello Forrester.
10% di aumento su base annua del traffico del sito AMP. Un aumento del traffico del sito si traduce in vendite aggiuntive e visualizzazioni di annunci, che porterebbero oltre $ 75.000 di profitto annuo per un sito nel primo anno, in base al modello.
60% di aumento delle pagine per visita. Le pagine AMP hanno avuto un rendimento positivo per gli editori di e-commerce e notizie che hanno affermato che c'è stato un aumento del 60% delle persone che visitano il sito e che queste persone hanno trascorso il doppio del tempo sul sito con un piccolo aumento dei visitatori di ritorno dello 0,3%.

AMP è un formato relativamente nuovo e, ovviamente, devi sostenere alcuni costi con la sua adozione. Tuttavia, il vantaggio derivante dall'implementazione del formato AMP supera il costo iniziale.

Gizmodo utilizza le pagine AMP per diventare 3 volte più veloce sui dispositivi mobili

Gizmodo si concentra sull'esperienza dell'utente, con metà del traffico proveniente dal proprio sito Web mobile, assicurandosi che il sito Web fosse veloce e chiaro era essenziale se volevano che i lettori interagissero con i loro contenuti su dispositivi mobili.

The blog implemented a number of optimization techniques in order to increase their mobile engagement, such as improving page load times, removing unnecessary page scripts, lazy loading for below the fold page elements, and setting a fallback font for web fonts. Still Gizmodo team thought something more could be done to improve user experience for mobile users.

Head of Gizmodo's Data Analytics, Josh Laurito felt this was their main challenge:

We delivered the same (large) JavaScript & CSS payloads to users on mobile and desktop, making it difficult to improve one experience without degrading the other.

Gizmodo found the solution to their problem by implementing the AMP framework in May 2016, and is currently publishing all their posts on AMP pages, they are even creating AMP versions of their previous posts.

Gizmodo has now published over 24,000 AMP pages and is receiving 100k visits to these pages daily:

AMP has helped make Gizmodo mobile pages 3x faster than the regular mobile website, and over 80% of Gizmodo's traffic from AMP pages is new traffic compared to under 50% of all mobile sessions. Plus, the blog has a 50% increase in impressions per page view on AMP.

TransUnion increases conversions with AMP

TransUnion had a problem of slow loading mobile pages that were causing higher bounce rates and lower mobile conversion rates compared to desktop conversion rates. The credit reporting agency wanted to create a best-in-class mobile website on their CMS, HP TeamSite to improve user experience and get the high return on investment.

TransUnion started using AMP with the hope of increasing mobile conversions at an efficient cost per order. As their website was already mobile friendly, TransUnion didn't need to redesign the content – they went online with AMP pages in a week.

The AMP pages loaded in 1.6 seconds on a 3G connection compared the non-AMP pages that loaded in 7.1 seconds. TransUnion's AMP pages quickly starting bringing 3% more conversions, bounce rate was lowered by 26% and users spent 2.5x more amount of time on the website:

Implementing AMP pages provides users with a faster mobile experience which leads to a decrease in bounce rates and an increase in conversions.

When engaging mobile visitors, creating AMP pages gives you the highest probability of engagement and conversions.

The next section will highlight the importance of AMP post-click landing pages, and how connecting optimized AMP ad post-click landing pages leads to better post-click landing page.

SECTION 5: Why you should create AMP post-click landing pages

The stats have spoken – fast loading pages lead to a lower bounce rate and higher conversions. The best way to create lightning-fast pages is with the AMP framework.

Though the AMP framework was first developed for news stories and articles, it has since then evolved to include AMP Ad post-click landing pages as well.

To ensure that mobile users experience doesn't stay restricted to websites, the AMP framework has introduced AMP Ad post-click landing pages – pages created in AMP HTML that load incredibly fast, in less than one second.

The Accelerated post-click landing page or (ALP) loads fast because of the following optimization techniques:

Pre-connect to post-click landing page: Typical ads don't know the URL of the actual post-click landing page. However, ads connected with ALPs always know the URL, this initiates a pre-connect request to the respective post-click landing page, and the page loads instantly.
Pre-fetch post-click landing pages: The non-CPU intensive resources that are visible on the first viewport of the post-click landing page are downloaded before the user clicks the ad, so the page loads instantly.
Using Google Cache URL: when you input a canonical destination URL for a creative, the ad server can switch it to the AMP version of the URL (with trafficker consent) using the AMP URL API. The ad server can also embed code required by the creative to pre-fetch and pre-connect to the post-click landing page. Ad servers like DoubleClick for Publishers (DFP) are integrating such features over the next couple of quarters to make trafficking of AMP post-click landing pages easy.
No redirects: AMP eliminates redirects to the ad server, AMP only initiates redirect requests once the user has landed on the post-click landing page. The format supports the amp-pixel component for third-party tracking redirects which can be performed on the post-click landing page.

Le pagine di destinazione post clic costruite in AMP sono progettate con il framework per continuare l'esperienza mobile ottimizzata che gli utenti avviano quando fanno clic su un annuncio AMP mobile.

Here's how AMP Ad post-click landing pages compare to regular ad post-click landing pages:

This is how fast an ALP loads once the ad is clicked, not only that but the user can easily go back to the content they were reading before the clicked the ad:

Accelerated post-click landing pages give a better post-click landing page to visitors because:

Users will be more willing to click on ads when they know their ad expectations will be met.
Marketers will benefit from increased user engagement, lower bounce rate and higher conversions.
Marketers will benefit from boosted revenue with better ads while allowing their readers a way back to their content.

Creating ALPs seems like a no-brainer when you consider the fact that Google looks at post-click landing page experience as one factor to determine ad rank, which ultimately contributes to your click-through rate.

And while publishers have embraced frameworks like AMP to speed up web content delivery on mobile devices, the marketing industry has not yet caught up. As more consumers and B2B buyers spend more time on mobile, marketers and advertisers are forced to adapt with mobile-optimized campaigns.

Businesses that are using AMP pages are already seeing massive ROI, so what's holding you back from creating Accelerated post-click landing pages?

How to create AMP pages with Instapage

In February 2018 we announced our partnership with Google to develop Accelerated Mobile Pages (AMP) functionality in the Instapage platform. They invited us to speak at their global AMP Conference where we discussed How to Balance AMP Limitations with Optimization Features.

Fast forward to May 2018 and Instapage now empowers marketers with the ability to create post-click landing pages using the AMP framework. The AMP framework allows for faster page load speeds on mobile devices, enabling you to provide a better user experience for mobile browsing.

With this new Instapage capability, digital marketers can create AMP post-click landing pages directly from our platform in a matter of minutes just by following these steps.

Step 1: Create a new page

Select AMP Page from the modal:

The next screen prompts you to name the page. This is different than the standard builder where it asks which template you wish to use (or build from scratch). AMP pages are built from scratch, so no template options are available.

Step 2: Add elements to the page

The second difference you will see is that Timer and HTML widgets are absent from the toolbar, but you still have the remaining widgets:

AMP does not support HTML/CSS or JavaScript so you won't find those settings in the Instapage AMP builder. You will, however, still see these options:

Note: Collaboration (“Comment”) and Instablocks™ are both functional within the AMP builder. Unfortunately, heatmaps and Global Blocks are not applicable.

AMP post-click landing pages have a 75KB limit, and each widget in the Instapage AMP builder is weighted. As you build a page, a validator operates in the background so that your page doesn't exceed the 75KB limit. If you reach 80% of the limit, this warning indicator appears near the bottom of the screen:

Step 3: Create a variation to A/B test

Click “Create an A/B Test” and add a new variation or import one of your own:

With the new variation, you can either duplicate, pause, rename, transfer, or delete it at any time:

Step 4: Validate the page

As you continue building and approach the 75KB limit, another indicator appears requesting you validate the page to confirm it is within acceptable limits:

Should the page pass validation, you will see this on-screen message:

Dopo aver terminato e aver fatto clic su Pubblica, riceverai una notifica se superi il limite di 75 KB:

Una volta convalidata, la tua pagina è pronta per la pubblicazione.

Passaggio 5: pubblicazione

WordPress e i domini personalizzati possono pubblicare pagine di destinazione post clic AMP in Instapage. Puoi selezionare uno dei due metodi dopo aver fatto clic sul pulsante blu di pubblicazione:

Per WordPress, installa e accedi al plug-in Instapage sul tuo sito Web e pubblica la tua nuova pagina di destinazione post clic AMP su WordPress:

Altrimenti, inserisci il tuo dominio e sottodominio:

Non appena la pagina è attiva, vedrai il logo AMP accanto alla pagina nella dashboard:

Se le tue pagine mobili registrano frequenze di rimbalzo elevate e un basso coinvolgimento dei visitatori a causa della bassa velocità di caricamento della pagina, la creazione di pagine AMP è un'ottima soluzione.

Il framework AMP implementa tecniche di ottimizzazione che aiutano non solo con la velocità della pagina, ma offrono agli utenti un'esperienza mobile piacevole. La creazione di pagine di destinazione post clic su annunci AMP ti aiuta a fornire ai tuoi visitatori pagine di destinazione post clic ottimizzate, veloci e pertinenti.

Instapage è attualmente l'unica piattaforma di landing page post clic che ti consente di creare landing page post clic ottimizzate per dispositivi mobili utilizzando il framework AMP di Google. le pagine di destinazione post clic create con AMP hanno un caricamento quasi istantaneo e uno scorrimento fluido.

Inizia subito a creare pagine AMP con Instapage per creare una migliore esperienza di navigazione mobile, migliorare i tuoi punteggi di qualità e generare più conversioni.