AMP: Accelerated Mobile Pages Project

Logo AMP accelerated mobile pages project

AMP velocità e performance

Il logo AMP la dice tutta, flash! Si perchè in ambito seo, un must è proprio quello della velocità ci fruizione di un contenuto; velocità di risposta e abbandoni sono direttamente proporzionali.

AMP nasce per rispondere alle nuove esigenze degli utenti con dispositivi mobile, di fatto i siti di informazione accolgono quotidianamente più visitatori da tablet e smartphone che da desktop.
Spesso tablet e smartphone, se non connessi a WI-FI ma connessi a intenet con SIM hanno limitazioni di banda, problematica che sommata a quella di portali che rispondono malissimo ai browser rendono un contenuto molto lento e poco fruibile.

Cos’è AMP

AMP, sponsorizzato da Google, è un nuovo modo di creare pagine web basate su contenuti statici, principalmente basato su tre componenti:

  • AMP HTML, è  HTML con alcune restrizioni per garantire affidabilità e velocità di una pagina web più alcune estensioni per la costruzione di contenuti ricchi
  • AMP JS, la libreria JS che garantisce il rendering delle pagine AMP HTML. E’ questa libreria che fa il sandboxing di tutti gli iframe, precalcola il layout di tutti gli elementi all’interno della pagina AMP HTML e disabilita i selettori lenti nei CSS
  • Google AMP Cache, l’infrastruttura di caching delle pagine AMP HTML

Lo scopo di AMP

Lo scopo di AMP Project è quello rendere più veloce il caricamento da smartphone e tablet attraverso una tecnologia che ottimizza i contenuti. L’ambizione progetto di Google ha coinvolto una trentina di gruppi editoriali in tutto il mondo

Come AMP accelera le prestazioni

La combinazione delle seguenti ottimizzazioni rende AMP veloce, quasi istantaneo:

  • consente solo script asincroni, fa si che se una risorsa è lenta o bloccata non rallenta o blocca anche il caricamento della pagina
  • rende le risorse statiche, annullando così i tempi di elaborazione lato server di una richiesta
  • non consente estensioni per meccanismi di blocco nel rendering di una pagina
  • i javascript di terze parti al di fuori del percorso critico
  • css in linea e di dimensioni ottimizzate
  • innesco efficiente dei font
  • riduce al minimo il calcolo degli stili
  • animazioni eseguite solo da accelerazioni GPU
  • prioritizzazione del caricamento delle risorse
  • caricamento istantaneo delle pagine

E’ anche a disposizione test di validazione di una pagina HTML ottimizzata con AMP.

AMP in ottica SEO

Fin qui sembra tutto bello, ma in ottica SEO cosa cambia? Si ottiene un miglior posizionamento su Google utilizzando AMP?

Abbiamo parlato dello scopo e della tecnologia che sta dietro, ora andiamo ad analizzare come si presenta un sito AMP sul motore di ricerca di Google. Di seguito uno screenshot di una ricerca effettuata con uno smartphone e browser Chrome per mobile:

Effetti dell'utilizzo AMP, la notizia sul carosello di Google
Effetti dell’utilizzo AMP, la notizia ottimamente posizionata in prima pagina sul carosello di Google

Come si può notare, a fronte di una ricerca, in prima pagina appare un carosello che mostra i risultati con le pagine HTML AMP, marchiati con l’icona del Flash di AMP.

A prima impressione, per i non addetti ai lavori potrebbe sembrare che le pagine AMP beneficiano di un super ranking, ma in realtà è un posizionamento che trae beneficio dal carosello che mostra i risultati AMP e che sicuramente è in ottima posizione.

Andiamo ad analizzare e scomporre come è fatto il link, in rosso i punti di attenzione:

https://www.google.it/amp/www.ilsussidiario.net/mobile/Calcio-e-altri-Sport/2016/4/7/Diretta-Juventus-Inter-Primavera-info-streaming-video-e-tv-risultato-live-Coppa-Italia-finale-andata-oggi-7-aprile-2016-/693670/AMP/#

al click su questo link, non si accede alla sito del sito ilsussidiario.net che è l’onwer del contenuto ma è direttamente Google che espone il contenuto tramite Google AMP Cache, quindi in soldoni al click non si atterra sul sito ma si rimane su Google. Accedendo allo stesso link col browser su una postazione desktop collegata a WI-FI (e quindi non mobile) si viene rediretti sul sito. In questo caso, ilsussidiario.net propone 2 pagine che mostrano lo stesso contenuto, la prima HTML normale, la seconda ottimizzata con HTML AMP:

  1. www.ilsussidiario.net/mobile/Calcio-e-altri-Sport/2016/4/7/Diretta-Juventus-Inter-Primavera-info-streaming-video-e-tv-risultato-live-Coppa-Italia-finale-andata-oggi-7-aprile-2016-/693670/

con <link rel=”canonical href=”http://www.ilsussidiario.net/News/Calcio-e-altri-Sport/2016/4/7/Diretta-Juventus-Inter-Primavera-info-streaming-video-e-tv-risultato-live-Coppa-Italia-finale-andata-oggi-7-aprile-2016-/693670/” ></link> <link rel=”amphtml href=”http://www.ilsussidiario.net/mobile/Calcio-e-altri-Sport/2016/4/7/Diretta-Juventus-Inter-Primavera-info-streaming-video-e-tv-risultato-live-Coppa-Italia-finale-andata-oggi-7-aprile-2016-/693670/AMP/” />

  1. www.ilsussidiario.net/mobile/Calcio-e-altri-Sport/2016/4/7/Diretta-Juventus-Inter-Primavera-info-streaming-video-e-tv-risultato-live-Coppa-Italia-finale-andata-oggi-7-aprile-2016-/693670/AMP/#

con <link rel=”canonical href=”http://www.ilsussidiario.net/News/Calcio-e-altri-Sport/2016/4/7/Diretta-Juventus-Inter-Primavera-info-streaming-video-e-tv-risultato-live-Coppa-Italia-finale-andata-oggi-7-aprile-2016-/693670/” ></link>

Tutto semplice e chiaro no??  🙂

Per concludere, il progetto AMP che ricordiamolo è Open, dimostra e rafforza il grandissimo interesse di BigG per il settore delle news, da sempre dimostrato anche con il servizio Google News.

Per approfondimenti sul progetto AMP e per scaricare i sorgenti puoi visitare github ampproject

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *