AMP – Accelerated Mobile Page: teoria e pratica su WordPress

Da ottobre del 2015 sul web si è incominciato a parlare di AMP, una tecnica per creare, via codice, dei siti web ottimizzati ai fini della velocità di caricamento delle pagine per i dispositivi mobile come smartphone e tablet, che in genere utilizzano delle connessioni diverse dalla ADSL e che spesso offrono limitazioni al download di dati ad alta velocità.

Questa iniziativa, di carattere open source, vede coinvolte molte grandi aziende, fra cui Google, Twitter, WordPress.com, Pinterest, LinkedIn e Adobe Analytics, per lo sviluppo di codice necessario a generare contenuti ottimizzati per il caricamento e la successiva visualizzazione sui dispositivi mobile, soprattutto dopo i dati di accesso alla rete, che in questi ultimi anni hanno visto aumentare le statistiche di accesso ad internet mediante device come gli smartphone.

Cos’è AMP

AMP, di cui trovate maggiori informazioni sul sito dedicato, è una modalità di sviluppo delle pagine web per il download di contenuti ad altissima velocità.

Per raggiungere questo scopo è necessario lavorare su tre fronti:

• Implementare HTML AMP.
• Utilizzare AMP JS.
• In maniera facoltativa utilizzare un servizio per il download di contenuti ottimizzato mediante AMP CDN.

AMP HTML

L’AMP HTML è una estensione del linguaggio HTML con delle proprietà dedicate AMP. In pratica è necessario, in una pagina AMP, sostituire alcuni tag HTML con i corrispondenti tag AMP HTML. Non tutti i browser supportano questi tag, ma grazie agli aggiornamenti automatici delle app dei dispositivi mobile non si corre il rischio di servire pagine non visualizzabili.

Per comprendere come si utilizzano i tag AMP HTML vi è una guida dedicata su GitHub.

AMP JS

Le librerie di AMP JS offrono la possibilità di utilizzare del codice javascript ottimizzato per migliorare le prestazioni, gestire meglio il carico di download degli script e il supporto per i tag AMP HTML. Tutte le risorse, ad esempio, sono caricate esternamente e in maniera asincrona, in modo tale da non bloccare la visualizzazione dei contenuti nel processo di rendering della pagina.

Sempre su GitHub è possibile scaricare o visualizzare il codice Javascript AMP JS.

Come fa AMP a velocizzare le perfomance di un sito web

Andiamo a vedere alcune delle soluzioni che utilizza il codice AMP per migliorare la visualizzazione di una pagina HTML, per la lista completa delle funzionalità vi rimando all'articolo dedicato.

Vengono eseguiti solo script JS asincroni

Javascript offre delle soluzioni per rendere più elegante e funzionali le pagine di un sito web, mediante animazioni e effetti, oltre al rendering dinamico dei contenuti. Questo però richiede il caricamento e l'esecuzione di funzioni che rallentano la velocità con cui la pagina viene visualizzata. Il codice JS asincrono evita questi problemi, eseguendo i processi che rallentano la visualizzazione dei contenuti solo dopo che questi sono stati mostrati agli utenti. Nel caso di una pagina costruita secondo la logica AMP è possibile utilizzare del codice Javascript di terze parti, non ottimizzato per la velocità, ma solo se questo viene caricato in un iframe, non impedendo così il rendering della pagina.

Carica solo le risorse necessarie

Indicando le dimensioni degli elementi nel codice HTML, AMP in funzione della risoluzione del monitor utilizzato per visualizzare il layout costruito secondo queste specifiche, scaricherà solo gli elementi (immagini, iframe e annunci ad esempio) ottimizzati per la pagina.

E' permesso solo l'uso di CSS in linea

Per evitare che il caricamento degli stili degli elementi influisca sulla velocità di visualizzazione della pagina AMP permette l'uso solamente di CSS in linea e che la somma delle istruzioni CSS non pesi più di 50 kilobite.

Ottimizza l'uso del prefetching

Come nel responsive web design AMP analizza quali elementi verranno scaricati e ne effettua il download inserendoli in una coda a differente priorità. Quindi le immagini e gli annunci sponsorizzati verranno caricati solamente se l'utente li visualizzerà, in seguito o sul momento.

Come implementare AMP su Wordpress

Ad oggi vi sono due soluzioni per implementare AMP su un sito wordpress.

• Creare un layout ottimizzato secondo le specifiche fornite dalla Accelerated Mobile Page e servirlo ai dispositivi con user-agent appartenenti alla categoria dei dispositivi mobile. fornendolo in pasto al motore di ricerca mediante un link in un metatag, su un url differente (ad esempio aggiungendo /amp/ in coda all'URL).
• Utilizzare la plugin dedicata per la tecnologia AMP.

Andiamo ad esaminare l'uso della plugin, mentre per la creazione personalizzata di layout ottimizzati AMP consiglio di utilizzare il materiale rilasciato sul sito ufficiale.

La plugin AMP per Wordpress

Questa plugin per Wordpress, sviluppata dalla Automattic in collaborazione ad alcuni programmatori esterni alla società di Wordpress.org la si può scaricare dalla directory dei plugin di WP ed è di semplice installazione e configurazione, in quanto non è necessario fare quasi nulla per renderla operativa.

Una volta attivata infatti non si dovrà fare altro che rigenerare i permalink del nostro sito Wordpress e potremo trovare una versione AMP dei nostri contenuti aggiungendo /amp/ al permalink della pagina da visualizzare.

Se non abbiamo configurato i permalink del nostro Wordpress potremo trovare la versione AMP delle nostre pagine aggiungendo ?amp=1 all'url del contenuto da visualizzzare.

Come si rigenerano i permalink di Wordpress

Per rigenerare i permalink la procedura è assai facile. Dal pannello di amministrazione di Wordpress , che potete trovare sulla sinistra una volta che avete fatto accesso come administrator, selezionate Impostazioni >> Permalink. Dalla pagina che si aprirà premete sul bottone Salva le modifiche in basso. Il CMS rigenererà così tutti gli url dei contenuti fino a quel momento caricati e utilizzerà le nuove impostazioni per quelli futuri.

Per maggiori informazioni sulla configurazione ottimale dei permalink vi rimando al capitolo relativo agli URL in un mio precedente articolo relativo alla configurazione di Yoast SEO.

Analizziamo una pagina AMP generata mediante questa plugin

Esaminiamo nello specifico un contenuto wordpress generato mediante la plugin AMP per WP. Nel mio caso ho effettuato un test su una copia in locale di questo sito web.

Come da specifiche la versione AMP di un articolo vede stravolto il layout della pagina:

• Header, footer e sidebar spariscono.
• Il menù di navigazione scompare.
• Spariscono gli elementi accessori dell’articolo: bottoni di condivisione sociale, articoli correlati, box autore, tag associati.
• L’impaginazione del contenuto diventa minimale, tutto il codice CSS per generare le call to action e i diversi box della pagina si riduce al midollo.

La pagina così facendo si carica in un lampo, in quanto su server locale che richiede autenticazione per l’accesso non posso monitorare il tempo di caricamento del contenuto, ma visivamente si nota una netta differenza.

Analizzando il codice noto con piacere che la plugin aggiunge un metatag canonical, nella pagina con l'articolo in versione AMP, che punta al contenuto originale, evitando così possibili penalizzazioni SEO a causa di Google Panda per contenuto duplicato e aggiunge ad ogni articolo, nella versione originale, il metatag <link rel="amphtml"> con relativo attributo che punta alla versione AMP del nostro contenuto.

Insomma per renderla più semplice possiamo dire che:

• l'articolo con layout "normale" avrà un metatag a puntare alla versione AMP;
• la versione AMP del nostro contenuto avrà un metatag canonical a puntare all'articolo "normale";

Quello che assolutamente non mi piace è il fatto che sparisca il menù di navigazione, lasciando all'utenza la possibilità di navigare solo mediante i link all'interno dell’articolo, nella versione AMP l’usabilità del sito web in generale è completamente compromessa.

Naturalmente però questa plugin è ancora agli inizi ed è necessario aspettare i successivi sviluppi per installarla su un sito di produzione.

Analizzare gli errori nel codice AMP grazie a Google Search Console

L'ex strumento per i webmaster, ora Google Search Console, offre uno strumento per l'analisi delle pagine AMP che spiega gli errori nel codice e dove intervenire per effettuare le dovute correzioni.

Per utilizzare questo tool è necessario loggarsi allo strumento di analisi dei siti web, offerto dal motore di ricerca, e dopo aver selezionato il sito che si vuole monitorare, dal menù laterale premere su Aspetto della ricerca >> Accelerated Mobile Page.

Nel caso il nostro sito abbia delle pagine codificate secondo la tecnica AMP, Google Search Console ci dirà se sono corrette e quindi indicizzabili dal motore di ricerca o se hanno errori.

UPDATE (20 settembre 2016): I metodi per analizzare gli errori di una pagina AMP sono tre e per questo ho realizzato un articolo apposito per spiegarli.

Perché e quando usare AMP

Come abbiamo visto AMP inserisce un “turbo” alla visualizzazione delle pagine sui dispositivi mobile e questo fattore, sicuramente, potrebbe in futuro migliorare il ranking sui motori di ricerca dei contenuti così serviti. La fruizione dei contenuti sui device mobili diviene di facile lettura, visti gli stili CSS semplici e lineari con cui il testo viene impaginato, ma a discapito degli strumenti atti ad abbassare la frequenza di rimbalzo, inducendo i visitatori a navigare altre pagine.

I problemi arrivano per i siti che lavorano sulla grafica o i portali aziendali, che si trovano ad avere un layout stravolto, con molti degli elementi necessari a far convertire l’utenza, nascosti.

In più ricorda, su una pagina AMP NON è possibile far visualizzare i form, quindi non potrai acquisire lead mediante una pagina web in questo formato.

Ottimizzare i metatag forniti da Yoast SEO

Se hai installato e configurato Yoast SEO sul tuo sito web, Joost de Valk ci fa sapere che per servire correttamente i metatag presenti nel tuo sito è necessario aggiungere un plugin aggiuntivo, Glue for Yoast SEO & AMP, che puoi scaricare nella directory di Wordpress. Il founder di Yoast ci fa sapere che presto questa funzionalità verrà inserita all'interno del plugin, ma per ora è necessario installare questo aggiornamento per ottenere nei metadati:

• il nome della tua azienda (configurabili in Yoast nell'apposita sezione);
• il logo della tua azienda;
• il metatag canonical in base a quello che fornisci nel Meta Box di Yoast che potrebbe essere diverso da quello configurato automaticamente dal plugin AMP;
• la featured image o, se l'hai configurata, la Facebook image impostata sempre nel Meta Box, nella parte relativa ai social;
• la metadescription del tuo post, configurata nel Meta Box, che altrimenti non verrebbe visualizzata.

In più, mediante questa plugin, è possibile personalizzare un minimo l'aspetto grafico della versione AMP del nostro sito, coordinandola con i colori aziendali.

Considerazioni

La tecnologia AMP è sicuramente da tenere in considerazione per chi sviluppa siti web e per chi li vuole ottimizzare per la SEO, ma è necessario trovare il giusto compromesso tra tempi di risposta delle pagine e impaginazione atta a far convertire la possibile utenza. Ulteriore fattore che va considerato è che nelle pagine AMP non è possibile inserire dei form, limitando enormemente l'interazione con l'utenza. Per cui facciamo attenzione e seguiamo quel che dice il saggio zen 3.0:

Se si carica lentamente non avrai conversione.
Se si carica velocemente ma non piace non avrai conversione.
La conversione sta nel mezzo.

Fine febbraio 2016: Un aggiornamento sulle mie considerazioni di un mese fa.

La tecnologia Amp si è dimostrata molto utile per utti i siti di news, iscritti al servizio di Google News, ma per tutti gli altri non vi sono ancora utilità pratiche, in quanto non offre un incremento nel posizionamento organico delle versioni dei contenuti "ampizzati".

Attenzione quindi! Come ho detto in un commento ad un mio articolo su una plugin per Wordpress per generare una versione AMP del contenuto, prima di sviluppare questa tecnologia è opportuno aspettare del tempo e vedere se davvero avrà fini pratici per la SEO o se al contrario non porterà vantaggi.

Agosto/Settembre 2016: le pagine AMP entrano in SERP

Google ci fa sapere ad agosto che incomincerà a mostrare sulla SERP le pagine AMP per tutti i siti, contrassegnandole da una icona particolare nello snippet, e non solamente per quelli dedicati alle news. Questo però non influenzerà il posizionamento, ma potrebbe migliorare il CTR sugli snippet in SERP, dopo che l'utenza che utilizza i device mobile comprenderà che i siti di questo tipo sono più veloci da caricare.