Guida alle pagine AMP

Il WEB è sempre più mobile, con nuove regole ed esigenze, avere pagine responsive non è più sufficiente, diventa necessario avere pagine sempre più veloci e semplici, utilizzare la tecnologia AMP può portare grossi benefici, e in questo articolo ti spiego in cosa consiste.

Cos’è AMP (Accelerated Mobile Page)

La pagina ufficiale del progetto www.ampproject.org definisce AMP un’iniziativa open source che mira a rendere il web migliore per tutti. Il progetto consente la creazione di siti web e annunci veloci, belli e preformanti su dispositivi e piattaforme mobili.
Per chi lavora sul web invece AMP consiste in una tecnologia che ha lo scopo di eliminare tutto il superfluo da un contenuto web (funzioni, banner, popup, stili grafici ed immagini) ed ottenere pagine semplici e velocissime nel caricamento.
Il progetto nasce dalla volontà di Google di risolvere diverse problematiche legate all’utilizzo dei dispositivi mobili (Smartphone, Tablet) nel web, come ad esempio l’ottimizzazione grafica e la velocità di caricamento.
Il progetto viene ufficializzato nell’ottobre 2015 e agita subito gli animi dei webmaster che si trovano a dover valutare l’implementazione di un sistema che nella versione mobile elimina la quasi totalità delle implementazioni grafiche e funzionali. Nonostante le ansie iniziali però il progetto procede e come viene indicato in un comunicato di ottobre 2017 2 anni di AMP i risultati lasciano pochi dubbi sul successo: 4 Miliardi di Pagine in 25 Milioni di domini.

Come funziona AMP (spiegazione semplice)

Il progetto AMP anche se utilizza un sistema tecnologico molto complesso ha un principio di funzionamento semplice quanto le pagine che permette di realizzare.

Come già accennato lo standard AMP permette di produrre pagine composte solo da contenuto ritenuto necessario ad un utente che effettua una consultazione da dispositivo mobile, ovvero logo, titolo e testo.

In questo video Paul Bakaus, sviluppatore AMP spiega in maniera semplice e chiara come hanno fatto ad ottenere questi risultati e far sì che le pagine si carichino in un tempo inferiore ai 3 secondi, tempo dopo il quale se una pagina non si è caricata viene abbandonata dal 53% degli utenti.

i 7 punti che Paul Bakus spiega possono essere tradotti cosi:

1. Priorità al contenuto: la priorità del caricamento viene data al contenuto e vengono seguiti solo codici Javascript asincroni, ovvero script che non vincolano il caricamento della pagina.
2. Dimensioni definite: stabilire il formato e le dimissioni della pagina prima di inviarle al browser, in modo che questo non impieghi risorse per il ridimensionamento delle immagini e dei font.
3. CSS limitato: è consentito solo un foglio di stile che deve avere dimensioni limitate (50 kilobyte) e deve essere incorporato nella pagina.
4. Attivazione dei font: i font hanno un peso importante nelle pagine, AMP fa in modo di dare priorità al download dei font per costruire la pagina.
5. Ridurre i ricalcoli di stile: il sistema esegue prima la lettura totale della pagina e poi la scrittura impostando fin da subito il layout definitivo, evitando di perdere tempo nel riposizionamento dei contenuti.
6. Animazioni solo con GPU: vengono eseguiti solo le animazioni che può gestire la GPU (unità dedicata all’elaborazione grafica) scaricando cosi il lavoro della CPU.
7. Scelta delle priorità nel caricamento: AMP attribuisce un valore di priorità alle varie risorse della pagina in base al tipo (immagini o annunci) e posizione (visibile a schermo o meno), evitando l’immediato caricamento dei contenuti se non indispensabili, ma solo al mento dell’utilizzo.

Come utilizzare le Accelerated Mobile Page sul proprio sito

Per come strutturato il progetto AMP è possibile realizzare siti unicamente in versione accellerata, ma la soluzione attualmente più diffusa è comunque l’abbinamento tra un sito classico affiancato alla versione AMP, creando uno stesso contenuto nelle due versioni in modo tale da poter essere fruito con l’esperienza migliore possibile in base al dispositivo.
Sul mercato esiste uno svariato numero di soluzioni e piattaforme con cui creare pagine web, di conseguenza esistono altrettante implementazioni per usare AMP sul proprio sito. Se ad esempio utilizzi WordPress puoi leggere la guida integrare AMP in WordPress.
Tuttavia il principio di funzionamento rimane invariato in qualsiasi soluzione si utilizzi.
Che si decida di creare attraverso software o con codice il processo di creazione di una pagina prevede la creazione di un file in formato HTML composto da una struttura con tag specifici AMP derivati dal linguaggio HTML.

Requisiti minimi delle pagine AMP

• • iniziare con la definizione della tipologia <!doctype html>
  • avere il tag <html amp>
  • contenere il tag head e body
  • fare riferimento alla pagina originale html se presente o a se stessa se non presente la versione html standard attraverso il tag rel=canonical
  • indicare la codifica caratteri
  • Contenere un tag <meta name=”viewport” content=”width=device-width,minimum-scale=1″>
  • Contenere un tag <script async src=”https://cdn.ampproject.org/v0.js”></script> per includere la libreria AMP JS
  • Contenere nell’intestazione il codice: <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>

Riconoscere le pagine AMP

Le Accelerated Mobile Page sono riconoscibili nelle SERP da mobile attraverso il simbolo di un fulmine, logo del progetto

In oltre le pagine AMP hanno un layout più scarno rispetto alle classiche pagine standard

Svantaggi e svantaggi delle pagine Accelerate

Le pagine AMP hanno lo scopo di migliorare la velocità delle pagine, ma per fare ciò richiedono l’accettazione di compromessi con un forte impatto sul sito.
I vantaggi che introduce questa tecnologia sono:

• Velocità di caricamento della pagina
• Miglioramento indiretto del posizionamento
• Facilità nell’implementazione e conversioni di articolo già esistenti
• Riduzione del carico di lavoro del server

Gli svantaggi:

• perdita dell’impronta grafica originale
• perdita di alcune funzioni realizzate tramite script

Prestazioni di a confronto

Per verificare l’effettivo miglioramento di performance ho misurato le prestazioni di alcune pagine mettendo a confronto le varie versioni.

Il tool utilizzato è GTmetrix , impostando come parametri il server a Londra e il browser Chrome.

Legenda

Page speed score di Google e Yslow di Yahoo sono due algoritmi per valutare la velocità delle pagine, restituiscono un risultato in percentuale e un voto da A (Ottimo) a F (scarso).

Page load time è il tempo di caricamento della pagina espresso in secondi, stando alle ultime linee guida si consiglia di avere per le versioni mobile un tempo inferiore ai 3 seconsi.
Total page size è la dimensione/peso della pagina espresso in kb.
Request sono le richieste HTTP/HTTPS fatte dalla pagina, più è alto questo valore più tempo impiegherà la pagina a caricarsi.

Si evidenzia un netto miglioramento delle performance generato dalla riduzione delle dimensioni della pagina e dal numero di richieste.

Spero che questo articolo ti sia stato utile e ti abbia aiutato a capire un po’ di più il mondo AMP, se hai dubbi o precisazioni lasciami un commento o scrivimi alla pagina Contattami.