Google AMP, le pagine accelerate

Google AMP, le pagine accelerate

N.B. Questo contenuto è stato prodotto e pubblicato la prima volta da Flowing, società che da luglio 2022 è confluita in Claranet Italia. Insieme a essa sono confluite riflessioni, temi, metodologie e spunti, ampiamente condivisi e orgogliosamente riproposti all’interno di questo blog. ©claranet

PUBBLICATO IL 26/02/2017 DA

Marco

Development

IN SINTESI
Amp

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  ad eccezione dei custom fonts.
  • tutto il CSS deve essere definito nell head della pagina all’interno del tag