Perché e quando creare pagine AMP: ecco cosa sono e tutti i loro vantaggi

Navigando su Google da dispositivi mobile capita sempre più di frequente di incontrare pagine definite AMP. Questo acronimo sta per Accelerated Mobile Pages, e si tratta di un framework open source sviluppato da Google con l’obiettivo di migliorare le prestazioni del mobile web grazie alla creazione di pagine più leggere ed alla maggiore fruibilità dei contenuti consultati da smartphone e device portatili.

All’imponente progetto hanno partecipato importanti partner commerciali ed editori di fama mondiale ed i suoi risultati in termini navigabilità delle pagine web sono stati accompagnati da migliorate performance in termini traffico organico e user experience. Come funziona esattamente questo sistema? Scopriamolo insieme, analizzando tutti i vantaggi che realizzare pagine AMP può comportare.

• Cosa sono le pagine AMP?
• Come funzionano le pagine AMP: segreti e caratteristiche
• Come si creano le pagine AMP?
• I vantaggi delle pagine AMP

Cosa sono le pagine AMP?

Le Accelerated Mobile Pages fanno parte di un’iniziativa lanciato da Big G nel 2015, incentrata sull’obiettivo di favorire l’incremento della velocità di caricamento delle pagine consultate da dispositivi mobile. Il progetto si basa sull’AMP HTML, ossia un framework aperto e fondato su tecnologie web già esistenti, che permette agli sviluppatori di costruire esperienze di navigazione per il mobile decisamente migliorate: strutture più leggere, codice HTML semplificato e regole CSS facilitate permettono, infatti, la realizzazione di pagine dal caricamento istantaneo, più attraenti e fluide e con un elevato tasso di engagement per gli utenti.

Il programma AMP è stato portato avanti da Google con la cooperazione di un gruppo di editori internazionali, quali il gruppo Condé Nast, The Guardian, El Pais, The New York Times e La Stampa, ed è nato con l’intento di rendere possibile un futuro ottimizzato per l’universo dell’informazione digitale. Il sistema AMP nella sua veste originaria era infatti orientato principalmente ai siti di news e ai magazine online, per i quali la lentezza di caricamento delle pagine è spesso causa di abbandono della navigazione e perdita immediata dell’utente.

Sviluppata in principio in risposta agli Instant Article di Facebook, AMP è diventata però negli anni una potente piattaforma per la distribuzione di contenuti e sono sempre di più i siti web che ne fanno uso costante. Sono numerosi anche i partner tecnologici che partecipano attivamente all’iniziativa AMP, e tra di essi si annoverano Twitter, WordPress.com, Pinterest, Chartbeat, LinkedIn e Adobe Analytics, oltre che molte altre imprese legate all’editoria, alla pubblicità ed al settore e-commerce.

Come funzionano le pagine AMP: segreti e caratteristiche

Le AMP hanno alcune regole e tag specifici che creano restrizioni ed eliminano tutti i fattori che rischiano di rallentare il sito web, alleggerendo notevolmente le singole web pages.

Le Accelerated Mobile Pages sono fino a 4 volte più veloci delle pagine tradizionali, pur mantenendo gli stessi contenuti e permettendo le stesse azioni eseguibili dall’utente in navigazione. Il tempo di caricamento di questa speciale tipologia di contenuti web è incredibilmente basso, pur senza rendere necessaria una rinuncia all’utilizzo di elementi video o grafici, animazioni o smart ads: tutti gli elementi della pagina AMP che viene aperta vengono caricati simultaneamente e visualizzati dal lettore in maniera rapida, indipendentemente oltretutto dalla tecnologia che utilizza sul suo dispositivo e dal modello o marca del device mobile tra le sue mani.

Ci sono alcune caratteristiche chiave che contraddistinguono le pagine AMP e che servono a ridurre la velocità di caricamento dei contenuti statici.

• Il formato HTML AMP: rispetto al classico HTML, questo codice utilizza alcuni tag simili ma ne sostituisce altri con tag specifici AMP, divenendo in grado di creare contenuti con una formattazione più ricca ma contemporaneamente più performante.
• la library AMP JavaScript rende possibile il rendering rapido delle pagine HTML AMP, gestisce il caricamento delle risorse e fornisce i tag di codice personalizzati. Tra le modalità di ottimizzazione principali si annoverano ad esempio l’asincronia nel caricamento delle risorse esterne, la disabilitazione di selettori CSS troppo lenti ed e il caricamento delle risorse solo dopo un calcolo effettuato sul layout complessivo della pagina.
• L’utilizzo della Google AMP Cache, ossia una rete di content delivery proxy-based che carica le pagine AMP HTML e ne velocizza in automatico le operazioni di distribuzione. L’opzione è facoltativa, ma quando è in uso immagini, documenti e file Java Script vengono caricati dalla stessa origine, sfruttando il protocollo HTTP 2.0.

Il metodo di AMP di ottimizzazione si basa quindi sui cardini centrali quali appunto:

• l’esecuzione di soli script asincroni;
• la definizione delle dimensioni delle risorse in modo statico;
• l’utilizzo di stili incorporati per il codice CSS;
• l’attivazione efficiente dei font;
• l’esecuzione di animazioni con accelerazione GPU;
• la riduzione dei calcoli di stile;
• il divieto ai meccanismi delle estensioni di bloccare il rendering.

e altri simili trucchi per ottenere un caricamento dei contenuti istantaneo ed efficiente.

Il sistema alleggerisce quindi le pagine concentrandosi sui contenuti delle stesse e sulle funzionalità che si propongono. Quando un utente effettua una ricerca su Google, se il risultato è disponibile in versione AMP il motore di ricerca restituisce in automatico la pagina accelerata nel momento in cui si clicca sul link nella SERP. Il codice sorgente del progetto è in costante mutamento e miglioramento.

Come si creano le pagine AMP?

I CMS e le tecniche che permettono la realizzazione della struttura di un sito web sono molteplici, e per ognuno esistono specifici plugin ed estensioni che permettono di creare pagine AMP. Sul sito ufficiale di AMP Project è possibile reperirli tutti ed avere una panoramica completa sulle informazioni necessarie per imparare a dare vita alle proprie Accelerated Mobile Pages.

Chi utilizza WordPress può generare in automatico pagine AMP partendo da una pagina tradizionale, ed anche modificarla per renderla simile alle pagine desktop in termini di esperienza utente. Tra i plugin più apprezzati per lo scopo c’è quello chiamato AMP for WordPress. Per chi si avvale invece del CMS Joomla, può utilizzare l’estensione JAmp, per dare vita in modo semplice ad accelerate mobile pages. Per Drupal invece si può scaricare il modulo AMP che permette di trasformare automaticamente in AMP le pagine di ogni sito.

Una volta creata una pagina AMP è possibile, nonché consigliabile, testarla direttamente nella Search Console messa a disposizione da Google stesso. Sia testando una singola pagina che più pagine all’interno di un sito, Google genera un rapporto sulle pagine AMP che mette in luce eventuali problemi legati al codice o alla visualizzazione finale del contenuto.

I vantaggi delle pagine AMP

L’efficacia delle AMP si può misurare innanzitutto dalla velocità di caricamento incredibilmente efficiente dei siti che utilizzano la tecnologia, la quale porta oltretutto ad un risparmio dati da parte degli utenti finali.

Coloro che si occupano di SEO e di mobile SEO sembrano concordare nell’affermare che un sito web AMP ben strutturato abbia vantaggi in termini di traffico organico, engagement e ranking. Innanzitutto le pagine AMP riportano fondamentalmente l’attenzione sui contenuti dei siti web e, dato che la maggior parte di quelli presenti in rete sono statici, le aziende che hanno scelto di implementare pagine mobili accelerate hanno riscontrato rilevanti incrementi di traffico con fonte ricerca organica.

Si rende sempre più evidente inoltre la relazione tra utilizzo della tecnologia AMP ed aumentate performance su Google. Il motivo può essere rilevato nel fatto che l’user engagement sui siti AMP è decisamente maggiore rispetto ai siti non AMP, e che le conversioni derivanti da esperienze mobili più veloci sono decisamente maggiori.

Gli studi effettuati sui siti online che attualmente utilizzano AMP, evidenziano nella maggior parte dei casi infatti un traffico organico aumentato, SERP impression in salita e CTR da SERP nettamente cresciuto. Non sono solamente i siti editoriali a beneficiare di questi risultati, ma anche i portali e-commerce, pur se con risultati e miglioramenti diversi sui tre fattori menzionati. Ottime performance quindi, che spingono sempre più programmatori ad addentrarsi nel mondo delle Accelerated Mobile Pages.