Introduzione alla tecnologia AMP

Quando si parla di AMP si fa riferimento ad una sigla che sta per Accelerated Mobile Page (Acceleratore di pagine mobile), un linguaggio di creazione siti web che viene derivato dall’HTML ed ottimizzato per fare in modo che i siti vadano a caricarsi in maniera più rapida su smartphone o dispositivi mobile. AMP non è altro che un progetto open-source, sviluppato e lanciato lanciato da Google nel 2015 per migliorare le prestazioni dei dispositivi mobili.

Come funziona AMP

Come funziona AMP | Sito ufficiale amp.dev

Questo progetto ha avuto inizio quando ci si è resi conto che nel mondo attuale il traffico dai dispositivi mobili tendeva a risultare superiore a quello prodotto da computer e desktop creando però problemi a livello grafico. Le impostazioni delle pagine non andavano ad adattarsi in maniera corretta ai display in questione per non parlare della velocità di caricamento e la conseguente esperienza di navigazione estremamente lente e poco funzionali.

Perché è nato AMP?

AMP si pone l’obbiettivo di migliorare l’esperienza di navigazione di coloro che caricano le pagine web su mobile agendo sulla velocità di caricamento e l’adattamento della grafica.

Le pagine AMP nascono con l’intento di programmarsi con un linguaggio proprio, una sorta di variazione dell’HTML con licenza Apache per riuscire a ridurre sensibilmente il caricamento.
I risultati, secondo Google son stati immediati con addirittura una riduzione che ha toccato l’85% e pare inoltre che avere una AMP permette anche di migliorare il posizionamento nei rankings. Questo è un fattore molto importante per i responsabili marketing o coloro che si occupano del SEO perché può risultare determinante per la visibilità di una pagina.

Cos’é AMP e come si usa su WordPress?

Quando si parla di AMP non si vuole intendere un completo stravolgimento della pagina in quanto il sito sarà ancora in HTML, semplicemente con una versione diversa. Queste avranno un etichetta nel codice con un certo attributo che indica a Google dove andare a cercare questa versione e un’altra etichetta che invece sottolinea anche quale è la pagina HTML originale da cui deriva. Esistono anche delle pagine senza versione HTML ma hanno un etichetta diversa per facilitare l’indicizzazione e non sono così comuni.

Wordpress plugins AMP

WordPress plugins AMP

Il funzionamento si basa sostanzialmente nel lavorare per migliorare l’esperienza dell’utenza su una pagina. Esistono svariati studi e sondaggi che confermano che un utente perde la pazienza e si disconnette se non riesce ad accedere ad una pagina web nell’arco di 3-5 secondi. AMP lavora proprio su questo e tenta di ottimizzare il servizio per non perdere la clientela e mettere sul tavolo tutti gli elementi tecnici necessari per facilitare il compito di programmazione dei responsabili web.

Le pagine che utilizzano questo linguaggio risultano più veloci, meglio ottimizzate ed estremamente più funzionali delle normali pagine su dispositivo mobile. La media di caricamento pare, secondo Google, non arrivare nemmeno ad un secondo garantendo quindi dei risultati ottimi. Inoltre nonostante si parla di velocità maggiore il consumo dati è notevolmente più basso riuscendo dunque a diminuire l’utilizzo delle risorse ed evitare di gravare troppo sulla batteria.

Come riconoscere una pagina AMP

Per l’utente medio probabilmente identificare una pagina AMP è una cosa superflua poiché ciò che interessa è sostanzialmente la velocità e la grafica della pagina. Per i programmatori o chi vuole solo conoscere cosa sta dietro questo linguaggio queste pagine possono essere identificate poiché su Google compare il simbolo di un fulmine, se usato tramite smartphone, seguito da delle sigle AMP. Per gli esperti si può inoltre identificare questa tipologia di linguaggio osservato l’URL in quanto all’inizio sarà visibile proprio la caratteristica sigla AMP.

Il linguaggio delle pagine AMP

Come anticipato le pagine AMP utilizzano un linguaggio di programmazione HTML particolare chiamato AMP HTML. Le differenze principali sono:

  • Le etichette utilizzabili sono solo le HTML equivalenti o permesse che solitamente anno peso minore per una velocità di caricamento migliore. Al di fuori di queste, etichette come object non possono essere utilizzate poiché non funzionerebbero.
  • L’uso di Java Script è sempre circoscritto alle sole librerie di AMP HTML
  • L’uso dei CDN è differente e l’implementazione deve seguire solo certe norme che rientrano nelle componenti del solo progetto AMP.
AMP html linguaggio

AMP html linguaggio

La struttura di AMP

Quando si osserva o si crea una pagina AMP solitamente si segue una certa struttura per renderla funzionale ed efficiente. I file che si trovano sono:

  • AMP HTML – come detto prima una sorta di variazione di HTML personalizzato per ottimizzare il rendimento della pagina e velocizzare il caricamento dei contenuti.
  • AMP CDN – una rete di contenuto che lavora per conservare le pagine AMP e andare a salvarle nella cache agendo anche sull’ottimizzazione in automatico.
  • AMP JS – una sorta di framework di Javascript molto funzionale per le pagine mobile che agisce su caricamento e contenuti, fondamentale poiché è l’unico tipo di Javascript permesso.
  • AMP Cache – sistema di distribuzione basato su proxy per contenuti e file per andare a fornire dei documenti AMP funzionali e validi e archiviare così gli HTML del sito. In questo modo si ottimizza e si semplifica la consegna poiché tutti gli archivi sono caricati dalla medesima origine.

Come creare pagine AMP

Su internet si possono trovare molti consigli sulla realizzazione di pagine AMP poiché seppur semplificato bisogna fare attenzione a dove focalizzarsi per svolgere un buon lavoro. I consigli principali sono:

  • Concentrarsi sul titolo, sicuramente uno degli elementi più importanti per coinvolgere il visitatore e catturare la sua attenzione. Per ottenere dei buoni risultati questo dovrebbe essere diretto ed immediato, quasi persuasivo.
  • Concentrarsi sull’immagine, tentare di ottenere o cercare un disegno originale che vada subito a colpire l’utente e costringerlo a restare sulla pagina per osservare i contenuti
  • Lavorare sulle prime 100 parole, queste sono infatti fondamentali per ottenere visualizzazioni e conquistare il visitatore. La parte iniziale è quella che può realmente fare la differenza e delineare il contenuto in maniera originale e accattivante.

 

AMP lite e RAISR: cosa sono?

Questi due strumenti sono le cosiddette nuove armi di Google, sviluppate negli ultimi anni, per puntare alla massima velocità di navigazione possibile a parità di connessione. Sempre basati sul miglioramento dell’esperienza web mobile per gli utenti punta il suo focus su coloro che non sfruttano una connessione veloce o stabile. Questa versione più leggera di AMP riesce addirittura a ridurre e migliorare del 45% il consumo dei dati in confronto alla sua versione madre e va a comprimere le informazioni in un formato differente, WebP, tramite dei browser che risultano compatibili.

Google AMP

Google AMP

Tutto questo funziona grazie ad un algoritmo chiamato RAISR lanciato da Google ed in grado di ridurre il peso delle immagini in maniera consistente (si parla del 75%). In questo modo si va certo a perdere qualità ma in maniera quasi impercettibile, soprattutto tenendo conto di quanto si va a migliorare l’esperienza web dei visitatori da mobile.

Tutto ciò è stato reso possibile da una grande collaborazione tra i migliori sviluppatori e siti web gestiti e diretti da Google e aziende tecnologiche del settore. Fino ad ora AMP sta riscontrando un grande successo e le previsioni sono che continuerà a salire e migliorare.

AMP: offre solo vantaggi?

Vi è anche da riconoscere che questo nuovo linguaggio permette sì di caricare più rapidamente e in maniera più funzionale le pagine da mobile ma ha anche dei punti deboli. Le pagine AMP hanno URL complesse per cui rende il SEO meno intuitivo, è un modello molto chiuso poiché non ti permette di uscire da questo ecosistema e visivamente a volte risultano anche troppo semplici.

Spesso si punta più sulla velocità che sull’esperienza totale per il visitatore e questo può portare ad alcuni risvolti negativi.

Un altro problema è quello che ogni volta si genera una nuova pagina ma per lo stesso contenuto, quindi si ha una normale e una AMP, oltre a quella mobile per un totale di 3 pagine a contenuto.

 

Tenendo comunque conto di quelli che potrebbero essere gli svantaggi o i punti deboli di un servizio comunque molto funzionale, l’Accelerated Mobile Pages si presenta come un progetto interessante e innovativo per migliorare sostanzialmente l’esperienza di navigazione. Tramite il suo linguaggio riesce a rendere più rapide le pagine da mobile e ottimizzarle per i dispositivi andando a lavorare su una grafica base. Questo risulta fondamentale nel settore del marketing e per chi lavora tanto con il SEO e rappresenta una svolta senza precedenti.

Quali temi utilizzano AMP?

Tra i migliori bisogna chiaramente citare Kadence WP, un brand che si è specializzato nella creazione di temi WordPress professionali e precisi, accattivanti e di impatto per aiutare i creatori di siti web ad avere delle pagine di grande impatto. Un’altro strumento molto importante per sfruttare le funzionalità del linguaggio AMP è “AMP Plugin” ufficiale per WordPress, questo è studiato per lavorare sulla creazione di AMP content da integrare in maniera semplice e veloce.

Una volta caricato e installato questo plugin questo andrà ad occuparsi da solo di lavorare su versioni AMP dei contenuti in questione e basterà semplicemente aggiungere la dicitura “amp/” nell’URL, alla fine, per ottenere la versione ottimizzata.

Sto preparando una bella guida su questo nuovo tema ultra veloce basato sui blocchi di gutenberg, quindi continua a guardare il blog.

Kadence theme AMP

Kadence theme AMP

Logicamente anche con questo plugin, raffrontando le due versioni quella AMP risulterà molto povera a livello grafico, o quanto meno più schematica ma questo è normale se si vuole garantire maggiore velocità, minor peso e soprattutto minor consumo di dati e batteria. Sostanzialmente si avrà un diverso lavoro sul content grafico da parte degli sviluppatori per riuscire comunque a catturare e colpire il visitatore concentrandosi sugli elementi principali. Anche in questo caso Google, tramite il plugin, si preoccupa di lavorare sulla duplicazione dei contenuti perché le considera solo ottimizzazioni mobile senza penalizzazioni sul SERP.

Secondo molti esperti questa tipologia e integrazione andrebbe addirittura ad avvantaggiare gli articoli fatti in questo modo rispetto agli originali a livello di indicizzazione, ma queste non sono considerazioni confermate da Google, solo osservazioni da chi lavora nel settore.