web veloce

Sono stati scritti centinaia di libri, sono state pronunciate migliaia di parole, sono state dedicate intere conferenze, le performance sul web non sono di certo qualcosa di nuovo agli occhi dei più esperti. Tutto il tempo dedicato a questo argomento non sembra essere bastato, gli utenti navigano ancora in siti web con perfomance insufficienti.

Le pagine che vogliono visitare non caricano rapidamente e anche se visualizzano il contenuto testuale, mancano all’appello gli elementi di contorno, come immagini, pubblicità e script (funzionali o di analisi). Quante volte ti è capitato di aprire una pagina e di aspettare cinque o più secondi per vedere il contenuto, iniziare a leggere e vedere la pagina che scatta su, poi giù, perché sta caricando a pizzichi e bocconi tutti quegli elementi “superflui” che non permettono una normale fruizione dei contenuti sul dispositivo mobile?

Se devo fare una top 3 degli elementi più fastidiosi in una pagina web caricata da mobile, sicuramente inserirei:

  1. mancanza di una struttura responsive
  2. popup di ogni genere
  3. banner pubblicitari in ogni punto della pagina

Cos’è cambiato nelle ultime settimane che mi spinge a scrivere questo articolo? Alcune aziende più o meno famose, come ad esempio: Google, Twitter, Pinterest, Adobe Analytics e WordPress, stanno collaborando ad un progetto molto ambizioso, ma che, grazie alla forte innovazione del web portata avanti in questi ultimi anni, è perfettamente alla nostra portata. Sto parlando di AMP Project un’iniziativa Open Source guidata dai brand citati precedentemente, il quale ha come obiettivo l’incremento delle web perfomance per far fruire più velocemente, molto più velocemente, i contenuti online via mobile.

Cos’è AMP Project?

AMP Project o Accelerated Mobile Pages Project è un’iniziativa che ha lo scopo di migliorare l’intero ecosistema mobile a favore di tutti i suoi elementi, come: clienti, editori, creatori, utenti, piattaforme, ecc.

L’aspettativa per questa iniziativa è che il contenuto venga caricato velocemente e che sia al contempo facile da esplorare. Rispetto ad oggi, dove il contenuto ci impiega parecchi secondi a caricare completamente, la tecnologia dietro al progetto è in grado di fornire pagine completamente caricate istantaneamente.

Risultati concreti sono stati già raggiunti e puoi vederli con i tuoi occhi digitando nella barra degli indirizzi g.co/ampdemo (funziona solo tramite mobile).

Non cambia assolutamente niente, ma provate a digitare nel barra di ricerca “La Stampa” (editore italiano selezionato per il progetto). Visualizzerete un carosello di news che potrete consultare nel giro di pochi istanti. Tutto questo è il progetto AMP.

progetto amp

AMP in azione per la query “La Stampa”

Come funziona il progetto AMP?

Le pagine che godono della tecnologia AMP sono come delle classiche pagine HTML, ma con delle limitazioni tecnico funzionali che vengono definite e governate dalle specifiche AMP. Tutti i browser più moderni o le applicazioni con la webview integrata (Facebook, Twitter, Linkedin) sono in grado di caricare e renderizzare le pagine web con tecnologia AMP.

I file utilizzano a proprio vantaggio vari approcci tecnici e architetturali che danno la priorità alla velocità, fornendo un’esperienza più veloce. Viene sottolineato più volte nelle FAQ e nei vari thread sparsi per la rete che l’obiettivo del progetto AMP non è quello di omogeneizzare tutti i contenuti, ma è quello di costruire una base tecnica comune tra le varie pagine web affinché carichino più in fretta.

Fortissime limitazioni su Javascript

Javascript verrà pesantemente limitato, dato che è uno dei principali fattori di rallentamento delle pagine web. Se le pagine del tuo sito presentano caroselli o altri elementi che necessitano forzatamente di Javascript per funzionare non devi allarmarti, AMP ha i suoi assi nella manica e sono: gli elementi personalizzati e i componenti web. La coordinazione di AMP con questi elementi permetterà la loro composizione senza però intaccare le performance.

Il CSS è salvo

Il progetto AMP prevede delle limitazioni non da poco ai codici Javascript, ma non per i codici CSS, sarà infatti possibile personalizzare gli elementi come meglio si crede. Ci sono dei paragrafi interessanti su cosa è possibile usare e su cosa invece è parzialmente o totalmente vietato, trovi il link nelle fonti a fine articolo.

Quanto è effettivamente veloce una pagina in AMP HTML?

Risposta breve: molto veloce.

Le analisi che sono state condotte riportano un incremento delle prestazione che fluttua tra il 15% e l’85%. L’ambiente nella quale è stato condotto l’esperimento prevede una connessione 3G simulata e un Nexus 5 simulato.

Con tutta una serie di procedure che hanno semplificato e alleggerito il pesante processo di pre-rendering, le pagine web sviluppate in AMP HTML sono in grado di renderizzare parzialmente una pagina evitando quegli elementi che possono coinvolgere la CPU, abbassando di conseguenza il tempo di caricamento e aumentandone le performance.

In altre parole, tutte queste peculiarità, permettono uno scambio ristretto di richieste HTTP.

Una pagina web scritta in AMP HTML

Diamo un’occhiata ad una semplicissima pagina scritta in AMP HTML

Analizziamo nel dettaglio il codice riportato qui sopra:

  • come ogni pagina HTML deve iniziare con <!doctype html>
  • l’elemento radice html deve riportare amp (<html amp>)
  • mentre nelle pagine HTML classiche la head e il body sono opzionali in AMP HTML è obbligatorio inserirli
  • il primo elemento figlio della head deve essere <meta chareset=”utf-8″>
  • la versione canonica della pagina, per non risultare un contenuto duplicato, deve essere la versione in HTML classico. Nel caso non esistesse nessuna versione HTML allora deve puntare a se stessa.
  • non deve mancare il viewport
  • bisogna obbligatoriamente inserire la porzione di codice <style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript> nel tag head
  • l’ultimo elemento della head deve essere lo script che richiama la libreria javascript AMP

Molti elementi non hanno subito variazioni tra una versione e l’altra, come ad esempio gli heading (h1, h2, h3, ecc.), ma altri elementi, come ad esempio le immagini, per poter essere utilizzate, dovranno essere scritte in AMP HTML.

Per i nuovi adepti alla disciplina di web designer ricordo che lo script nella head che non ho riportato nella spiegazione precedente sono i microdati.

Conclusioni

La tecnologia dietro al progetto AMP è promettente e se sei interessato a partecipare a questa iniziativa, che ricordo essere Open Source, puoi tranquillamente farlo. Per qualsiasi dubbio o domanda sono a disposizione nei commenti 😉

Fonti e Risorse