Le pagine AMP: ottimizzazione mobile


Guida in-depth alle Accelerated Mobile Pages

15/02/2018

 

Da quando Google ha lanciato il suo aggiornamento riguardante il mobile friendly, con la sua definitiva promozione a “fattore di ranking“, è diventato di fondamentale importanza l’ottimizzazione mobile dei siti web.

Creare pagine dal layout responsive non è più stato quindi una condizione sufficiente alla buona resa di un portale web. Una versione mobile infatti deve tenere conto soprattutto delle prestazioni poichè una carenza in questo senso scoraggia la navigazione e riduce l’interesse da parte dei visitatori, non disposti ad aspettare a lungo il caricamento di un contenuto.

Qual’è la soluzione a questo problema? Le AMP.

Cosa significa AMP?

AMP, in inglese Accelerated Mobile Pages, è in sostanza un progetto open-source ideato per migliorare le prestazioni mobile delle pagine web. Ciò consiste in poche parole nel prendere una pagina mobile-friendly e renderla ancora più veloce nel caricamento, riducendola ad una struttura basilare.

Puoi visitare la pagina principale del progetto AMP.

AMP è l’esempio perfetto dell’impegno di Google nel focalizzare la propria attenzione sul lato utente. Anche se il fine ultimo è quello monetario (più è felice l’utente più esso esegue ricerce su Google e quindi più alto diventa il guadagno pubblicitario), in generale l’esperienza utente ne riceve beneficio.

Come funzionano le AMP?

La struttura delle AMP è divisibile in 3 parti principali:

  • AMP HTML: una sottocategoria dell’HTML che possiede alcuni tag e proprietà custom, ma con diverse limitazioni.
  • AMP JS: uno speciale framework per le pagine mobile. Si occupa principalmente di gestire le risorse e i caricamenti asincroni. Bisogna ricordare che il JavaScript da risorse esterne (terze parti) non è compatibile con AMP.
  • AMP CDN: una rete di gestione dei contenuti opzionale (Content Delivery Network) che si occupa principalmente della gestione delle cache.

In sostanza le AMP si basano sul render semplificato delle pagine mobile, ottenuto snellendo l’HTML riproducendo solo le parti necessarie all’utente mobile. Ciò che rende lento il caricamento delle risorse mobile viene eliminato. Ad esempio se del codice JavaScript è incluso in una pagina AMP, esso non viene renderizzato.

  • Bisogna inoltre ricordare che in AMP:
  • Si ha una versione inline del CSS.
  • Si possono usare soltanto librerie prestabilite di JavaScript.
  • Per funzionare, i siti web devono essere validati.
  • Non sono permessi form.
  • Non sono permessi custom font.
  • Altezza e larghezza delle immagini devono essere dichiarate.
  • Per il caricamento di risorse video è necessario utilizzare delle estensioni fornite da AMP.

Lo scopo delle AMP è rendere le pagine più leggibili e non più condivisibili (basti pensare che i social plugins potrebbero non venir nemmeno renderizzati).

Quali benefici portano le pagine AMP?

Per parlare dei benefici delle AMP è importante ricordare che c’è una significativa correlazione tra velocità di caricamento, visualizzazioni di pagina e posizionamento nei motori di ricerca.

Ad esempio uno dei fattori principali interessati dalle AMP è la frequenza di rimbalzo (Bounce Rate). Se le pagine si caricano più velocemente, l’utente è invogliato a visitarne di più prima di abbandonare il sito web. Quando la frequenza di rimbalzo resta bassa (preferibilmente sotto il 30%), la pagina viene vista positivamente da Google.

I principali benefici delle AMP sono:

  • Incredibile riduzione dei tempi di caricamento delle pagine: la velocità è la linfa vitale delle pagine mobile. I contenuti sono importanti, ma se non sono accessibili, non verranno presi in considerazione dall’utente.
  • Aumento di visibilità per i contenuti mobile e conseguente beneficio marketing: Google ha cominciato a dare importanza alle AMP nei risultati di ricerca, dandogli evidenza con un simbolo verde. Ciò aumenta sicuramente l’engagement e il click through rate (l’indice di click su un link).
  • Miglioramento del posizionamento: come detto prima, le pagine mobile-friendly sono viste di buon occhio da Google, specialmente se ottimizzate.
  • Flessibilità e compatibilità: la semplicità delle AMP fa si che esse siano compatibili con tutte le piattaforme e siano riproducibili correttamente in tutti i dispositivi mobile.
  • Facile tracciamento degli utenti: grazie alle librerie rese disponibili da AMP è molto semplice l’integrazione con Analytics, facilitando l’analisi del traffico di utenti.

NOTE: se sei un utente WordPress, basta installare il plugin dalla dashboard del CMS. Una volta installato correttamente per vedere la versione AMP di una pagina va aggiornato l’url della stessa aggiungento alla fine il codice /amp. ES. www.miosito.it/blog/art1/amp.

Scopri tutta la documentazione ufficiale QUI.

Conclusioni

AMP è uno strumento potente, versatile e moderno. Esso ci permette di soddisfare le richieste di Google nel campo dell’ottimizzazione mobile. In futuro inoltre avrà anche importanti risvolti nell’interazione coi Social Media, grazie alla sua semplicità e alla sua accessibilità. E’ quindi importante preparare e creare le pagine mobile AMP per essere pronti ai cambiamenti che coinvolgeranno gli algoritmi di ricerca.