AMP di Google: la guida divertente e intuitiva alle pagine mobili accelerate

Guarda il video. Ignora la copia.

Questo è il mio consiglio per te una volta atterrato sul sito di Google dedicato al nuovo progetto Accelerated Mobile Pages (AMP):

"Il progetto Accelerated Mobile Pages (AMP) è un'iniziativa open source che incarna la visione secondo cui gli editori possono creare contenuti ottimizzati per dispositivi mobili una volta e caricarli immediatamente ovunque."

Se non sei uno sviluppatore e leggi la copia, verrai inghiottito vivo dal gergo.

Guarda il video, tuttavia, e capirai quasi immediatamente di cosa si tratta AMP (per non parlare di un divertente riferimento allo Spinal Tap , vedi sotto).

Oppure potresti semplicemente leggere questa guida perché sarà la lettura più divertente che tu abbia mai avuto di leggere su AMP e su come influisce sul tuo content marketing.

Lo prometto.

Cos'è il progetto AMP di Google?

Dalla nascita della filosofia del Momento Zero di Verità di Google nel 2011, non è stato un segreto che vogliano "migliorare notevolmente le prestazioni del Web mobile".

E probabilmente non ho bisogno di dirti che c'è un piccolo problema con le prestazioni dei contenuti sul Web mobile.

È probabile che tu abbia un dispositivo mobile. È probabile che tu abbia fatto clic su un collegamento su quel dispositivo da una pagina dei risultati di ricerca, da un sito di social media o dalla tua casella di posta elettronica ... desideroso di consumare il contenuto.

Ma non arriva mai.

Bene, arriva, ma in un mosaico convulso di immagini, video e annunci traballanti e a scatti mentre la pagina si carica. Guardi con orrore, con gli occhi dilatati, che rimbalzi sul tuo sedile della metropolitana come uno che deve andare in bagno.

"Quanto tempo ci vorrà?" non gridi a nessuno in particolare.

Chissà, ma non lo scoprirai mai perché, come il 40% della popolazione, salterà sulla pagina di caricamento entro 3 secondi. Allora dirai, come il mio gatto nero Apollo Monkeystrap, "Le sigh".

Sono momenti mobili insopportabili come questi che Google vuole eliminare con AMP.

Quanto velocemente AMP realizzerà le tue pagine?

Su una scala da 1 a 10, dove uno significa "non si carica affatto" e dieci "si carica in un secondo", il contenuto AMP verrà caricato a una velocità di pagina di 11. (Questo è il riferimento Spinal Tap di cui ti avevo avvertito).

Ma seriamente, quanto velocemente?

Jon Parise, ingegnere del software di Pinterest, ha affermato: "Le pagine mobili accelerate si caricano quattro volte più velocemente e utilizzano dati otto volte inferiori rispetto alle tradizionali pagine ottimizzate per dispositivi mobili".

Quattro volte più veloce è buono! Ma cosa significa per te, il nostro simpatico pendolare della metropolitana che cerca di scaricare una pagina web sul suo cellulare?

Secondo NiemanLab, un articolo del New York Times ottimizzato per AMP è stato completamente scaricato su dispositivo mobile in 2,99 secondi. Per un confronto, in un test in Chrome su un iMac veloce, la versione desktop di quella pagina ha impiegato 3,82 secondi (la versione mobile era più veloce).

Se non lo sapevi, NYTimes.com era noto per essere uno dei siti web di notizie mobili a caricamento più lento da questa parte di Saturno.

Da allora l'hanno risolto.

Sei sicuro che sia abbastanza veloce?

Ma aspetta, dici, 2,99 secondi sono ancora al limite del lasso di tempo che il nostro pendolare della metropolitana è disposto ad aspettare. Lui, come il 40 per cento della popolazione, è stato liberato per 3 secondi. 2,99 secondi sta tagliandolo vicino! Non è un gran miglioramento.

Vero, ma la differenza è che nel primo scenario non AMP su desktop, la pagina veniva ancora caricata dopo 3 secondi. Nella versione AMP dello scenario, è stato completamente scaricato in 2.99.

Ancora più importante, la versione AMP ha raggiunto "domContentLoaded - un punto chiave nel caricamento di una pagina web in cui l'HTML è stato completamente scaricato e alcune analisi importanti sono state completate" in 0,857 secondi.

Un battito di ciglia dura circa 0,33 secondi.

In altre parole, sbatti le palpebre due volte e tu, il nostro pendolare della metropolitana, puoi iniziare a leggere la parte utile del contenuto quasi istantaneamente, grazie ad AMP.

Cosa rende le pagine per dispositivi mobili tradizionali caricate così lentamente?

Penso di saperlo, ma dal momento che non sono uno sviluppatore, designer o programmatore (e non sono nemmeno sicuro che si tratti di discipline diverse), ho chiamato uno dei nostri sviluppatori qui a Rainmaker Digital, Mike Hale, per aiutarmi a tradurre.

Mike ha detto che quando un sito desktop viene inserito in un browser mobile, si ottengono diverse dozzine di pacchetti di informazioni che vengono "richiamati", spesso da host diversi, nel browser mobile.

Nel vecchio e lento esempio del New York Times sopra, un articolo potrebbe contenere "192 richieste, alcune a host del Times, la maggior parte a una raffica di altri server che ospitano decine di script".

La parte più utile verrà scaricata in 5 secondi dopo aver fatto clic, ma il resto è ancora in arrivo, motivo per cui lo schermo rimbalza quando il browser si imposta e quindi si ripristina.

Ancora perso, ho insistito Mike, "Ma che tipo di cose vengono richieste ?! Come si chiama ?! "

Mike mi ha detto che il tuo cellulare potrebbe chiamare gli script per plug-in sociali, caroselli di immagini, SlideShares e video. E poi probabilmente ci sono software di analisi, annunci e script di monitoraggio in esecuzione in background.

Cose ragionevoli, quotidiane, ma si sommano. E veloce.

Il problema è che il tuo dispositivo mobile semplicemente non ha il muscolo di elaborazione per farcela velocemente.

Questa illustrazione spiega il problema con il contenuto mobile

Immagina di andare in banca, avvicinarti al cassiere e chiedere 100 dollari, ma in un ordine particolare: quindici banconote da un dollaro, tre banconote da cinque dollari, cinque banconote da dieci dollari e una banconota da venti dollari.

Se la banca operasse come fa ora il Web mobile, il cassiere farebbe più viaggi per darti ogni fattura separatamente.

Ognuno di questi viaggi è una "chiamata".

Se la banca fosse ottimizzata con AMP, tuttavia, il cassiere ti darebbe tutte le bollette in una volta. Inoltre, probabilmente ignorerebbe la tua richiesta specifica di determinate fatture e consegnerebbe solo una banconota da cento dollari.

AMP mira a semplificare le richieste che un browser deve fare.

"L'unico script che puoi chiamare è il javascript AMP", ha detto Mike. “Tutto è avvolto in un unico pacchetto. Ti sto dando tutto in una volta. "

Ed ecco come Yoast ha descritto i contenuti mobili AMP:

“Confrontiamo questo con una macchina da corsa. Se vuoi rendere una macchina da corsa più veloce, le dai un motore più veloce e togli tutto il peso. In questa riduzione del peso, rimuovi anche cose come sedili posteriori, aria condizionata, ecc. L'AMP non è diverso. È la versione ridotta di un normale Web, perché Google si preoccupa più della velocità che delle funzionalità eleganti ".

Senti quel pungiglione di amarezza nell'ultima riga? Non è la tua immaginazione. Ci arriveremo tra un momento. Innanzitutto, diamo un'occhiata a un'esperienza AMP per aiutarti a capire cosa intendo.

Che aspetto hanno i contenuti per dispositivi mobili ottimizzati per AMP?

Fortunatamente, puoi provare una demo del contenuto delle notizie AMP.

1. Tira fuori quel tuo smartphone.
2. Apri un browser (qualsiasi browser).
3. Digita g.co/ampdemo.
4. Digita frasi di parole chiave popolari come "Justin Bieber Birthday", "Jennifer Lawrence" o "Yoko Ono" nella casella di ricerca di Google.
5. Premi "Invia".

Questo è un esempio di come appariranno i risultati:

Come puoi vedere, il contenuto AMP ottiene la fatturazione principale. È nella giostra che si trova sopra la piega. Le voci standard si trovano sotto di essa.

Puoi scorrere quel carosello e quando trovi un articolo basato su AMP che ti piace, fai clic su di esso. Ecco come apparirà:

Lettura divertente, eh!

Perché Google sta facendo questo e dovrebbe interessarti? (Una specie di)

È qui che diventa strano.

Come accennato in precedenza, Google è stato ossessionato dall'ottimizzazione delle prestazioni del Web mobile negli ultimi cinque anni, motivo per cui abbiamo scritto sull'importanza di una velocità del sito Web estremamente elevata (ci sono sei strumenti per testare la velocità del tuo sito in quell'articolo, a proposito) per altrettanto tempo.

È per questo che l'anno scorso ti abbiamo avvisato dell'aggiornamento per dispositivi mobili di Google, "Mobilegeddon".

Quindi, a questo punto, AMP è una sorta di culmine dell'attenzione di Google sull'ottimizzazione del Web mobile, ma come aiuta gli editori?

Sembra semplicistico, ma Google pensa: gli utenti adorano i contenuti. Amano i contenuti veloci. Più velocemente riesci a distribuire contenuti veloci, più contenuti possono essere consumati.

C'è qualcos'altro in questa mossa, però: Google sta cercando di vincere la guerra del consumo di notizie.

In che modo AMP è diverso da Instant Articles e Apple News?

L'anno scorso, sia Apple che Facebook hanno lanciato applicazioni che consentono agli utenti di consultare articoli di notizie: Apple News e Instant Articles.

Entrambe queste applicazioni sono prodotti indipendenti.

Christian Cantrell, Senior Experience Development Engineer del team XD di Adobe, ha scritto su Smashing Magazine: "Sono essenzialmente aggregatori di notizie fantasiosi con renderer personalizzati costruiti su formati di syndication proprietari".

In altre parole, Instant Articles e Apple News sono rinati in RSS.

Google, d'altra parte, cerca di andare direttamente dagli editori e convincerli a ottimizzare i contenuti mobili per il consumo sul Web aperto, il che consente un ingresso senza sforzo e una facile distribuzione, qualcosa che non puoi ottenere in un'app.

Finora hanno partecipato alcuni grandi editori di notizie:

• Time Inc.
• L'Atlantico
• Vox
• BBC
• L'Huffington Post

Hanno aderito anche un certo numero di aziende tecnologiche come WordPress, Twitter, Adobe Analytics, Chartbeat, LinkedIn e Pinterest.

Due lamentele comuni su AMP

I reclami sono disponibili in almeno due varietà:

1. I detrattori odiano le restrizioni su ciò che possono fare i contenuti mobili.
2. I detrattori lamentano che il piccolo editore verrà punito.

Yoast rientra nella prima categoria. Joost de Valk ha scritto: "AMP limita ciò che puoi fare nelle pagine HTML. Il design elegante è spogliato a favore della velocità. AMP è più che altro una funzione rispetto al progetto del modulo. "

Tieni presente che non è solo l'aspetto a essere influenzato: per impostazione predefinita, AMP non supporta i moduli, il che significa che le pagine AMP non ti aiuteranno a far crescere la tua lista di email. Sono disponibili soluzioni tecnologiche, ma la situazione è ancora troppo nuova per vedere come si evolveranno.

Noterai che la maggior parte dei grandi editori utilizza AMP, ma questo significa che AMP è intenzionato a danneggiare i piccoli editori?

Paul Shapiro di Search Engine Land ha detto questo:

"Sebbene gli sviluppatori esperti possano spesso ottenere risultati simili attraverso ottimizzazioni intensive delle prestazioni, gli editori spesso lo trascurano a causa dei limiti delle risorse. AMP consente di ottenere facilmente queste ottimizzazioni senza alterare l'esperienza principale del Web mobile ".

AMP potrebbe rivelarsi un valido strumento per ottimizzare l'esperienza mobile. Quindi dovresti AMP?

Chi dovrebbe preoccuparsi di AMP?

Dipende.

• Sei un gigantesco editore di notizie? Poi panico, a meno che tu non abbia già una solida strategia per l'esperienza utente mobile. Che avresti dovuto già mettere in atto mesi fa, ma ehi.
• Ottieni una significativa fonte di traffico dal cellulare? Ancora una volta, devi assicurarti che la tua strategia per l'esperienza mobile sia solida. Probabilmente vorrai guardare e vedere come si sviluppa AMP, ma potrebbe valere la pena fare alcuni esperimenti.
• Ti trovi in ​​un nuovo mercato senza molta concorrenza? Cerca di ottimizzare i tuoi contenuti mobili nei prossimi 30 giorni, ma niente panico.
• Non rientri in nessuna delle categorie precedenti? Quindi siediti sulle mani e controlla cosa succede.

"Sicuramente qualcosa da mantenere nel radar di un editore", mi ha detto Brian Gardner, il nostro Chief Product Officer e fondatore di StudioPress. "Ma la mia ipotesi è che sarà un affare fluido per un po 'di tempo."

Chissà? Potrebbe esserci un modo più semplice per fare tutto questo lungo la strada, qualcosa che Jake Goldman, presidente e fondatore di 10up, un'agenzia di consulenza sulla gestione dei contenuti di WordPress, ha suggerito:

"Con il tempo, sospettiamo che AMP alla fine diventerà complesso come l'HTML 'illimitato' o sarà reso discutibile dai progressi nell'hardware mobile, nelle velocità della banda larga e nelle funzionalità di privacy standardizzate: una soluzione per un problema che non abbiamo più.

Ma diciamo che vuoi giocare con AMP.

Come creare la tua prima pagina AMP

È qui che puoi tirare su i pantaloni da sviluppatore da ragazzo / ragazza, perché ci vuole un po 'di markup di base per iniziare con AMP.

Ti consiglio di seguire questo tutorial di base. Ti insegnerà come:

• Crea la tua prima pagina AMP utilizzando il codice boilerplate.
• Mettilo in scena.
• Verifica che sia conforme ad AMP ( questo è un passaggio estremamente importante ) utilizzando lo strumento di convalida di Google.
• Preparati per la pubblicazione e la distribuzione.

Nel tuo markup, vedrai che alcuni elementi hanno un tag AMP. Pertanto, il tag <img> diventa <amp-img>. Il tag <anim> diventa <amp-anim>. Il tag <video> diventa <amp-video>.

E così via.

Cosa dovrebbero fare gli utenti di WordPress?

Se vuoi provare AMP, sei fortunato.

Il 24 febbraio 2016, Automattic ha rilasciato un plug-in AMP ufficiale. Pertanto, gli utenti di WordPress sono solo un plug-in scaricabile dal contenuto ottimizzato per AMP.

Tienilo presente, tuttavia: secondo la pagina ufficiale del plug-in AMP, il plug-in non supporta pagine o archivi. Solo post.

Ma una volta attivato il plugin, bam, tutti i tuoi post vengono automaticamente amplificati in AMP!

Con il plug-in attivo, tutti i post sul tuo sito avranno versioni compatibili con AMP generate dinamicamente.

Puoi vedere la versione AMP dei tuoi post web inserendo "/ amp" alla fine dell'URL. Ad esempio, la versione AMP di yourwebsite.com/amp-wicked-fast diventa yourwebsite.com/amp-wicked-fast/amp.

E se sei un cliente della piattaforma Rainmaker: abbiamo AMP sui nostri schermi radar. Non ci affretteremo a fare nulla, data la storia di Google di drammatici cambiamenti di direzione di 180 gradi. Ma se AMP si rivelerà importante in futuro, offriremo una semplice soluzione AMP ai nostri utenti.

AMP è un fattore di ranking di ricerca?

No.

John Mueller di Google ha affermato che AMP non è un fattore di ranking. Ha affermato che "La conversione di pagine in formato AMP soddisferà il segnale di posizionamento ottimizzato per i dispositivi mobili, ma non esiste alcun segnale di classificazione associato esclusivamente ad AMP".

Lo scrittore dello staff di Search Engine Journal Matt Southern sottolinea:

"La mia domanda è: cosa importa se AMP è un segnale di ranking o no se il contenuto AMP ha già un biglietto di sola andata per la parte superiore della prima pagina? Nella maggior parte dei casi, i contenuti AMP si posizionano già al di sopra dei risultati organici, il che è uno dei maggiori incrementi di ranking che si possano chiedere ".

Quindi, c'è un vantaggio nell'uscire e essere un passo avanti rispetto ai tuoi concorrenti nel gioco dei contenuti per dispositivi mobili: una carota su un bastone che i Distilled ti salutano in faccia in questo video di Whiteboard Friday.

Un altro motivo per cui ti consiglio di guardare il video di Whiteboard Friday è che la gente di Distilled ha parlato di un'altra importante distinzione che AMP offre: consegna super veloce tramite un server di cache.

Tom Anthony, capo della ricerca e sviluppo di Distilled, afferma:

"E poi tutto questo è progettato per essere davvero pesantemente memorizzato nella cache in modo che Google possa ospitare queste pagine, ospitare i tuoi contenuti effettivi proprio lì, e quindi non hanno nemmeno bisogno di recuperarli da te."

Solo per sorrisi, questo è ciò che il blog di Google aveva da dire sul loro nuovo approccio alla memorizzazione nella cache:

"Pertanto, come parte di questo impegno, abbiamo progettato un nuovo approccio alla memorizzazione nella cache che consente all'editore di continuare a ospitare i propri contenuti consentendo una distribuzione efficiente attraverso la cache globale ad alte prestazioni di Google. Abbiamo intenzione di aprire i nostri server cache affinché possano essere utilizzati da chiunque gratuitamente. "

Mi piace gratis.

AMP influenzerà la tua pubblicità?

Non dovrebbe.

Secondo Google, "Vogliamo supportare una gamma completa di formati di annunci, reti pubblicitarie e tecnologie. Tutti i siti che utilizzano HTML AMP manterranno la loro scelta di reti pubblicitarie, così come tutti i formati che non pregiudicano l'esperienza dell'utente ".

E nel caso ve lo stiate chiedendo, ecco un elenco di reti pubblicitarie supportate dal sito ufficiale del progetto AMP di Google:

• A9
• Adform
• AdReactor
• AdSense
• AdTech
• Dot e Media
• Doppio click
• Flite
• plista
• Smart AdServer
• Yieldmo
• Revcontent

A proposito, penso che AMP abbia anche lo scopo di lenire i timori degli editori riguardo alla crescente adozione di ad blocker. Ma questa è un'altra storia per un'altra volta. Probabilmente è ora di concludere.

A voi …

Wow. Abbiamo coperto molto terreno qui.

Grazie per essere rimasto con me. Spero che tu l'abbia trovato utile e ho risposto a tutte le tue domande sul progetto Google AMP.

In caso contrario, sentiti libero di scrivermi una riga nei commenti qui sotto. Inoltre, lascia un commento se hai qualcosa da aggiungere a quello che ho scritto o se mi sono perso qualcosa.

Ad ogni modo, non vedo l'ora di sentirti.