Uno dei principali problemi del mobile web e, in generale, dell’utilizzo e consultazione di Internet tramite smartphones e telefonini riguarda la velocità di fruizione – e proprio questo problema si propone di risolvere il progetto “Accelerated Mobile Pages” di Google.

Il compromesso fra velocità di caricamento e nitidezza delle immagini, framework per mostrare belle animazioni o complessità delle pagine vede quasi sempre la velocità soccombere, schiacciata da librerie JavaScript di centinaia di Kb e immagini così definite da spaccare la retina dell’utente e pesare qualche mega.

Il risultato di queste (brutte) abitudini è che i siti e le app “mobili” (che spesso tali non sono anche se lo sembrano, ad esempio perché responsive e quindi degli accrocchi, superficiali adattamenti di una cosa che non era fatta per mobile) hanno la fama di “non funzionare”, “essere troppo pesanti” e risultare spesso ai limiti dell’inutilizzabilità pratica sia perché troppo lenti a caricare sia perché troppo difficili da  processare per dispositivi che sono inevitabilmente limitati nella potenza di calcolo e di memoria.

Per cercare di limitare questo problema Google sta lavorando ad un progetto chiamato “Accelerated Mobile Pages” (o “AMP Project”). Di che cosa si tratta? In breve, è un insieme di nuovi elementi (pseudo)HTML che vengono interpretati da un parser JavaScript per rendere più veloce il caricamento delle pagine scritte con questo markup sui dispositivi mobili.

Alcune delle ottimizzazioni che vengono applicate alla pagina e ai contenuti sono:

  • precaricare le immagini e tenerle in una cache o CDN globale
  • caricare le immagini se above-the-fold (e le altre solo al loro apparire nel viewport)
  • minimizzare HTML e CSS

L’anatomia delle Accelerated Mobile Pages

Visto che noi siamo tecnici e smanettoni, piuttosto che fare tanti giri ed elucubrazioni teoriche vediamo subito come è fatta una pagina AMP e cerchiamo di capire da lì quali ne sono le caratteristiche e il funzionamento.

Un esempio estremamente semplice di pagina scritta utilizzando il subset di elementi e codifica HTML è questo (preso dal repository GitHub ufficiale):

Vediamone subito le peculiarità.

 

Prima di tutto, invece del solito <html> è necessario aggiungere il testo “amp” alla dichiarazione di inizio HTML

 

Con questo tag si definisce la URL della pagina “regolare”, cioè quella che non utilizza AMP. Obbligatorio, se non esiste una pagina normale bisogna inserire l’URL della pagina AMP (cioè di sé stessa).

 

Se vogliamo aggiungere del CSS (nell'<head>) dobbiamo aggiungere la keyword “amp-custom”

 

Stile obbligatorio dell’opacità del body

 

Questo è un po’ il cuore di tutto perché include la libreria che fa il parsing e trasforma la pagina AMP in una pagina HTML normale ma “accelerata”

 

Ecco un primo elemento “accelerato” della pagina : un’immagine, il cui tag deve avere il prefisso “amp-” e le cui dimensioni devono essere sempre specificate esplicitamente.

Presente, futuro e risorse

Se il progetto sembra interessante, soprattutto nelle intenzioni, si tratta di un’iniziativa ancora a livello embrionale e quindi soggetta a errori, problemi, cambiamenti e aggiustamenti.

Per vedere un primo esempio del meccanismo si può andare su g.co/ampdemo (con uno smartphone, ovviamente) e ad esempio cercando “La Stampa” (uno dei partner di test in Italia) si vedrà come le notizie principali vengono subito mostrate alla ricerca e gli articoli sono accessibili molto velocemente:

Esempio di Accelerated Mobile Pages in Italia per La Stampa

 

Infine, proprio a detta di Google il progetto è “open” e saranno bene accette critiche, suggerimenti e codice: chiunque sia interessato a collaborare può partire dal repository GitHub e dire la sua, sia a parole che in codice.

 

The following two tabs change content below.
Silvio Porcellana
Silvio Porcellana è il fondatore di mob.is.it, il tool che centinaia di agenzie e professionisti di tutto il mondo utilizzano per creare con semplicità siti mobili e applicazioni native per i loro clienti. Tiene anche un podcast dove racconta ogni venerdì le sue avventure imprenditoriali, senza veli o segreti: Opus Digitalis