Accelerated Mobile Pages

Markup Accelerated Mobile PAges

Il 24 febbraio 2016 Google ha ufficializzato l’inserimento nei risultati di ricerca da mobile di un nuovo tipo di contenuto chiamato “Top Stories”, facendo così in modo che le pagine realizzate secondo il nuovo standard AMP (Accelerated Mobile Pages) appaiano in una posizione privilegiata nelle SERP da mobile, evidenziando quindi i risultati con il marchio AMP.

Per il momento in Italia è possibile visualizzare solamente la demo di questa nuova implementazione (la nuova sezione da noi è chiamata “Prima pagina”) visitando dal proprio smartphone il link g.co/ampdemo.

Che cosa sono le AMP?

AMP mobile SERPIl Progetto AMP nasce per rendere il web da mobile più veloce, muovendo dalla considerazione che il 40% degli utenti abbandona un sito dopo 3 secondi di attesa per caricamento della pagina. Le pagine AMP (Accelerated Mobile Pages) sono quindi pagine speciali, molto leggere, strutturate in modo da caricarsi velocemente sui dispositivi mobili.

L’AMP non è un nuovo linguaggio per scrivere le pagine web quanto piuttosto uno standard basato sui formati esistenti, HTML, CSS e JS.

Il cuore della nuova tecnologia è un framework JS e HTML rilasciato sotto licenza GNU, e quindi open source, che definisce degli standard di sviluppo per le pagine mobile. Tutte le specifiche e i codici sorgente sono disponibili sulla pagina ufficiale del progetto AMP: www.ampproject.org.

Il progetto si basa su tre pilastri che lavorano in maniera integrata per servire le pagine web nella maniera più veloce possibile:

  • AMP HTML. Identifica lo standard HTML stabilito per lo sviluppo delle pagine mobile, fissando dei limiti nell’utilizzo dei tag html. L’AMP HTML è il normale HTML esteso con alcune proprietà specifiche per AMP da un lato, ma con alcuni tag proibiti dall’altro. La maggior parte dei tag utilizzati sono comuni tag HTML, ma ve ne sono alcuni specifici, riservati per le pagine AMP che vanno ad aggiungersi o a sostituire i tag tradizionali, come ad esempio il tag <amp-img> che sostituisce il tradizionale tag <img>.
  • AMP JS. La libreria AMP JS è ciò che fa sì che il caricamento delle pagine venga effettivamente velocizzato e ottimizzato per il mobile, implementando una serie di best practice per il caricamento dei contenuti, come il loro caricamento asincrono degli elementi esterni alla pagina (immagini, video, script, ecc), ma anche permettendo che lo spazio ad essi riservato sulla pagina venga definito in via prioritaria evitando i fastidiosi riadattamenti delle pagine man mano che si caricano i contenuti. Le operazioni essenziali eseguite da AMP JS riguardano:
    • caricamento asincrono di tutte le risorse esterne alla pagina
    • sandboxing degli iframe
    • pre-calcolo del layout della pagina
    • disabilitazione dei selettori CSS più lenti
  • Google AMP Cache. Si tratta sostanzialmente di un’immensa rete CDN messa a disposizione direttamente da Google per memorizzare in cache e servire in maniera estremamente veloce le pagine ottimizzate AMP. È un servizio opzionale offerto da Google che mette a disposizione i propri server di cache affinché possano essere usati gratuitamente da chiunque. Tutte le pagine AMP validate possono beneficiare della rete CDN di Google appositamente dedicata.

I vincoli imposti dallo standard AMP non sono pochi. Le novità più salienti riguardano da un lato i tag HTML che possono essere utilizzati. Non è consentito ad esempio utilizzare il tag form e tutti gli elementi di input, mentre sono stati creati dei nuovi tag appositi per i contenuti multimediali come <amp-img>, <amp-video> e <amp-audio>, studiati proprio per ottimizzare il caricamento delle risorse esterne alla pagina.

Nello standard AMP non è consentito utilizzare nemmeno i fogli di stile esterni: tutte le regole di stile vanno inserite all’interno di un unico tag <style amp-boilerplate> all’interno della sezione head della pagina.

Non è possibile utilizzare nemmeno script javascript propri o di terze parti, né gli eventi del dom (onclick, onmouseover, ecc.). Affinché la pagina sia validata come AMP possono essere utilizzati solo script approvati dallo standard AMP e caricati in maniera asincrona nella pagina.

Così definito lo standard AMP manderebbe in soffitta sostanzialmente i siti responsive che tanto sono stati promossi da Google in passato, in favore del meno pratico sdoppiamento del sito con una versione per desktop e una per i dispositivi mobile. Prova ne è l’obbligatorietà secondo lo standard AMP di inserire il link canonical alla pagina standard relativa (ovvero a sé stessa nel caso non sia presente una versione desktop “normale” della stessa pagina).

Chi verrà effettivamente influenzato dalle nuove Accelerated Mobile Pages?

Lo standard AMP è pensato sostanzialmente per siti di contenuti che utilizzano pagine statiche composte da testi, immagini e video e tendono generalmente a caricare innumerevoli script e regole css solo per effetti e animazioni di cui potrebbero fare tranquillamente a meno da mobile.

La sensazione è che le AMP siano – per il momento – rilevanti soprattutto per i siti di news e un po’ meno per siti con contenuti altamente dinamici come gli e-commerce, o anche siti istituzionali. Il fatto che non sia possibile implementare javascript e form nelle AMP fa in modo che queste siano di fatti poco utili per utenti in cerca di prodotti da acquistare online (visto che non sarebbe implementabile una funzionalità di carrello ad esempio) o che volessero in qualche modo interagire con la pagina web (come inviare un form per richiedere assistenza, oppure filtrare dei contenuti in base a certi parametri).

Tool utili per lo sviluppo delle AMP

  • AMP Boilerplate. Una struttura standard da cui partire per la costruzione delle proprie AMP, disponibile su GitHub con licenza GNU.
  • AMP Reference. Disponibile sul sito ufficiale del progetto AMP con la spiegazione completa di tutti i tag e del loro utilizzo.
  • AMP Validator. E’ un tool disponibile nativamente su Google Chrome. per testare se le proprie pagine sono ottimizzate secondo lo standard AMP e gli eventuali errori è sufficiente aggiungere alla fine dell’url, nella barra degli indirizzi, la stringa #development=1
  • Gestione delle AMP in Search Console. Il tool messo a disposizione da Google per controllare lo stato delle proprie AMP, che mostra il numero di pagine AMP indicizzate correttamente e il numero di pagine con errori.
Scritto da    |   marzo 7th, 2016   |   Nessun commento
Gianpaolo Pavan
Gianpaolo Pavan

Lascia un commento