Google AMP, le pagine accelerate

A quanti di noi è capitato, navigando nel web da dispositivi mobile, di attendere diversi secondi per poter visualizzare il contenuto della pagina? La navigazione da mobile può essere infatti un esperienza frustrante, le pagine sono spesso lente e pesanti in altre parole non ottimizzate per dispositivi mobile.

Un sito web risulta tanto più piacevole da visitare quanto veloce e snelle sono le pagine contenute in esso. Spesso e volentieri infatti gli utenti abbandonano il sito quando devono attendere troppo tempo per potere vedere il contentuto della pagina caricata.

Per cercare di risolvere questi problemi sono state messe in campo diverse soluzioni come Facebook Instant Articles ed Apple News.

Anche Google ha cercato di rispondere a questi problemi sviluppando il progetto AMP, presentato nell’ottobre 2015 e realizzato in collaborazione con importanti editori internazionali tra cui The New York Times, The Guardian, El Pais e La Stampa.
Il progetto si basa su AMP HTML, un framework open source il cui codice è rilasciato su GitHub.

Noi abbiamo recentemente integrato le pagine AMP per calciomercato.com

Le caratteristiche principali di AMP HTML

AMP HTML mira a rendere più veloci le pagine HTML spogliandole degli elementi superflui e potenzialmente dannosi alle performance. AMP impone di rispettare alcune regole, ad esempio non permette di inserire direttamente codice Javascript, banner pubblicitari che possono bloccare il rendering della pagina oppure immagini senza specificarne le dimensioni. Queste limitazioni consentono di trarre benefici in termini di performance.

AMP HTML è un subset di HTML, ovvero una versione di HTML con alcune limitazioni ed alcune nuove estensioni. Il markup AMP HTML è composto da un insieme estremamente limitato di tag, alcuni tag sono vietati mentre alcuni nuovi tag sono stati introdotti, in parte per sostituire quelli non consentiti e in parte per incapsulare funzionalità.

Di seguito un elenco di tag non consentiti:

• script
  È possibile includere solo gli script di AMP runtime e delle estensioni AMP, inoltre è consentito includerli solo in modo asincrono attraverso l’attributo async .
  Non è permesso inserire script eseguibili direttamente in pagina.
  È inoltre ammesso l’uso del tag per definire dati JSON-LD.
• base
• form
• iframe
• frame, frameset
• img, audio, video
• embed, object, param, applet

Ecco alcuni dei nuovi tag definiti da AMP:

• amp-img sostituisce il tag img
• amp-form sostituisce il tag form
• amp-iframe, sostituisce il tag iframe
• amp-ad per mostrare annunci pubblicitari
• amp-analytics
• amp-pixel
• amp-twitter
• amp-instagram
• amp-youtube

Alcune delle caratteristiche di AMP HTML:

• non è possibile includere CSS esterno attraverso <link rel="stylesheet"> ad eccezione dei custom fonts.
• tutto il CSS deve essere definito nell head della pagina all’interno del tag <style amp-custom>
• non è possibile utilizzare gli stili CSS in linea
• nella definizione di risorse esterne come immagini, ads, iframe, devono essere specificate le relative dimensioni

Molti dei tag e dei componenti AMP HTML sono in fase di sviluppo per cui potrebbero esserci incoerenze tra la documentazione aggiornata ed il post.

Qui un esempio di una pagina AMP HTML.

Dati Strutturati

Altro elemento importante sono i Dati Strutturati, questi infatti permettono di dare informazioni ai crawler e di rendere visibile la pagina nel carosello dei risultati di ricerca AMP.

Esempio di dati strutturati di una pagina AMP di Calciomercato visibile qui:

{
        "@context": "http://schema.org",
        "@type": "NewsArticle",
        "mainEntityOfPage": {
           "@type": "WebPage",
           "@id": "http://www.calciomercato.com/news/inter-il-surreale-inverno-di-gabigol-un-incontro-ha-spiazzato-tu-51708"
        },

        "headline": "Inter, il surreale inverno di Gabigol: un incontro ha spiazzato tutti, i retroscena",

        "datePublished": "2017-02-20T09:00:00+01:00",
        "dateModified": "2017-02-20T18:47:57+01:00",

        "author": {
          "@type": "Person",
          "name": "Fabrizio Romano"
        },

        "publisher": {
          "@type": "Organization",
          "name": "Calciomercato",
          "logo": {
            "@type": "ImageObject",
            "url": "http://cdnweb.calciomercato.com/new-site-assets/img/theme/logo-calciomercato.png",
            "height": 60,
            "width": 600
            }
        },
        "image": {
          "@type": "ImageObject",
          "url": "http://cdn.calciomercato.com/images/2017-02/SOFFIATA.INTER.GB.750x450.png",
          "height": 450,
          "width": 750
        }
      }

Si può vedere che vengono indicate diverse informazioni come:

• titolo
• l’immagine principale dell’articolo
• la data di pubblicazione e di ultima modifica
• l’autore
• il nome del publisher
• il logo del publisher

È possibile effettuare la validazione dei dati strutturati attraverso lo strumento ufficiale di Google.

Questo il risultato nella SERP di Google:

Validazione Pagine

Affinché siano visualizzate nei risultati di ricerca le pagine AMP devono essere valide, per controllare la validità delle pagine AMP esistono diversi modi.

Il più semplice è appendere all’URL #development=1, aprire la DevTools console di Google Chrome e controllare l’output. La libreria AMP JS, il core di AMP, integra al suo interno la validazione.

Esistono altri modi per validare le pagine, sono infatti disponibili estensioni per browser e la validazione attraverso pagina Web.

Cosa fare per rendere visibili le pagine AMP

Per fare sapere ai crawler di Google che esiste una pagina in versione AMP è sufficiente inserire riferimenti alla pagina.

Ad esempio nella nostra pagina non AMP inseriamo un riferimento alla pagina AMP in questo modo:

<link rel="amphtml" href="https://amp.calciomercato.com/news/inter-il-surreale-inverno-di-gabigol-un-incontro-ha-spiazzato-tu-51708">

mentre nella pagina AMP inseriamo un riferimento alla versione canonica non AMP:

<link rel="canonical" href="http://www.calciomercato.com/news/inter-il-surreale-inverno-di-gabigol-un-incontro-ha-spiazzato-tu-51708">

Pre-rendering

Quando clicchiamo su una pagina AMP del carosello dei risultati di ricerca, l’apertura della pagina appare quasi istantanea.

Quello che succede dietro le quinte è che viene effettuato un pre-rendering delle pagine AMP presenti nel carosello. In altre parole quando viene visualizzata una pagina di ricerca con risultati AMP, il componente Javascript AMP Viewer effettua il caricamento di iframe nascosti all’interno di una lista, un iframe per ogni pagina AMP del carosello.

A questo punto AMP JS, il core di AMP che è incluso in ogni pagina AMP, effettua il rendering della singola pagina. In questo modo cliccando su un risultato del carosello viene mostrato il corrispondente iframe, dopodiché AMP JS si occupa di scaricare le risorse come immagini, banner, etc.

Con questo approccio il caricamento di una pagina AMP appare quasi istantaneo.

Considerazioni

AMP risulta sicuramente molto utile agli editori, che hanno notizie nuove ed aggiornate e quindi la possibilità di comparire nel carosello dei risultati di ricerca di Google.

Su Calciomercato AMP è andato online i primi giorni di settembre 2016 e dal punto di visto del traffico generato ha dato buoni risultati.

Da un analisi del traffico dell’ultimo quadrimestre 2016 è emerso che sul totale delle sessioni mobile da ricerca organica Google il 25,32% delle visite è avvenuto su pagine AMP e il rimanente 74,68% sul sito mobile. L’introduzione delle pagine AMP non ha sottratto visite al sito mobile anzi c’è stato un aumento del 12% delle sessioni da ricerca organica di Google non transitate da AMP.

Inoltre AMP ha reso possibile posizionarsi nelle SERP di Google per keywords con le quali prima non si era posizionati.

AMP è un progetto davvero interessante, open source ed in continua evoluzione… da tenere sott’occhio.