<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=351110188613778&amp;ev=PageView&amp;noscript=1">

AMP: le pagine super veloci per dispositivi mobili

Per chi ancora non lo sapesse, AMP è un’acronimo che sta per “Accelerated Mobile Pages”: letteralmente pagine mobili accelerate.

Si tratta di una libreria open source nata dalla necessità di migliorare l’ecosistema dei contenuti per dispositivi mobile. AMP nasce dal fatto che molti siti sono male ottimizzati, sono lenti o unresponsive, insomma danno una cattiva user experience. Il fine ultimo di AMP è infatti quello di realizzare siti web veloci, belli e performanti su tutti i vari dispositivi e piattaforme utilizzati per navigare sul web.

 

A COSA SERVE AMP?

APM è uno strumento utile per costruire una buona user experience:

  • Caricamento quasi istantaneo delle pagine web: l’esperienza utente è in questo modo più agevole e coinvolgente.
  • Scorrimento della pagina uniforme (senza blocchi o popup);
  • In ogni caso, con la possibilità di aggiungere il tuo stile e il tuo brand (non è una pagina anonima);


AMP indirettamente migliora anche il tuo ranking nei risultati di ricerca di Google, poiché Google premia i siti più “veloci”. Nei risultati ricerca dell’utente tramite il suo device, infatti, i siti che adottano AMP vengono visualizzati per primi e vengono segnalati con il simbolo del fulmine. 

amp-pages

 

Inoltre, i primi risultati sono inseriti all’interno di un carosello.

 

 

amp-carosello

 

Migliora le conversioni: un sito più veloce fa si che un utente abbandoni lo stesso sito più difficilmente, un sito più veloce rende un utente più propenso ad utilizzare ed a interagire con il tuo sito web.

 

MA COME FUNZIONA AMP?

Le pagine AMP sono costituite da 3 componenti:

 

  • AMP HTML: è un formato html alleggerito e limitato per garantire velocità e affidabilità nella pagina. Può essere arricchito da diversi componenti che hanno una formattazione più ricca rispetto all’HTML di base.
  • LIBRERIA AMP JS: rende operative le funzioni delle pagine AMP e ne assicura un rendering veloce. È l’unica libreria JS ammessa nelle pagine AMP.
  • AMP CACHE: è la rete di distribuzione delle pagine HTML AMP gestita da Google. Se un utente effettua una ricerca su google, esso accede alla pagina AMP tramite questa cache. Per fare sì che la vostra pagina venga inserita nella cache, è previsto un sistema di convalida per confermare che il markup della stessa sia conforme alle specifiche AMP.

 

PERCHÉ AMP È COSÌ VELOCE?

Oltre a quanto detto sopra, possiamo vedere qui di seguito come e perché AMP riesce ad essere così veloce rispetto al sito “tradizionale”:

  • Utilizzo di soli script asincroni: eventuali javascript aggiuntivi sono possibili nelle nostre pagine AMP solo se eseguiti in modo asincrono. Questi vengono scaricati ed eseguiti solo al termine del rendering della pagina. Eventuali librerie di terze parti in realtà anch’esse possono essere utilizzate, ma solo tramite iframe (asincroni).

  • Web Font: solitamente i file dei font sono molto più “pesanti” rispetto ai CSS e ai JS. Proprio per questo in una pagina AMP le prime risorse che vengono scaricate sono quelle dei font e solo successivamente vengono scaricate le risorse javascript. Questo perché gli script possono solo essere richiamati in modo asincrono, come spiegato sopra.

  • Le risorse esterne (ad esempio immagini) devono dichiarare le proprie dimensioni nell’HTML, in modo che vengano determinate prima di essere scaricate. Solitamente, un’immagine senza altezza e larghezza definiti, deve essere scaricata dal browser prima di conoscere le sue dimensioni, e solo dopo il browser aggiusta il layout per inserirla. Al contrario, determinando subito queste dimensioni il browser riesce subito ad interpretare ed a inserire correttamente le risorse.

  • CSS Inline: tutto il codice CSS è in linea e di dimensoni limitate (max 50 kb). Non sono consentite richieste a CSS esterni (per eliminare richieste http aggiuntive).

  • Non è possibile utilizzare elementi che bloccano il rendering (ad esempio, dei widget di facebook o twitter, delle lightbox per le gallerie): Questi elementi rallentano il rendering della pagina e devono essere caricati tramite il componente “amp-iframe” per massimizzare le prestazioni della pagina ed impedire che ne rallentino il caricamento.

  • Animazioni GPU: le animazioni CSS permesse all’interno delle pagine AMP sono solo quelle che sfruttano la scheda video (Graphic Processing Unit). Quest’ultima è molto più efficiente nel gestire animazioni rispetto al processore del nostro computer. Facendo gestire alla GPU queste animazioni, liberiamo importanti risorse della nostra CPU che si può concentrare maggiormente nel rendering della nostra pagina. Di fatto, le animazioni CSS permesse che utilizzano questo metodo sono quelle create tramite le proprietà css transform e opacity.

  • Ricalcoli di stile: AMP consiglia di ridurre il più possibile i ricalcoli di stile, cioè di evitare di caricare in pagina stili doppioni o non utilizzati se non in quella determinata pagina. È un’ottimizzazione che andrebbe fatta in generale: evitare questi ricalcoli serve ancora una volta ad ottimizzare ed a rendere migliore il codice del nostro sito e nello specifico della nostra pagina.
  • Il caricamento delle risorse avviene in modo dinamico e prioritario: viene data maggiore importanza alle parti visibili della pagina (above the fold). È sostanzialmente un metodo che permette di caricare solo la parte che viene utilizzata al momento. In questo modo il processo di caricamento è più rapido ed importanti risorse del nostro device restano “libere” per caricare successivamente le parti successive della pagina, non appena vengono visualizzate.

 

MONETIZZARE CON AMP

Come affermato nella pagina dedicata, le ads AMP sono più veloci, chiare e leggere di quelle tradizionali perché utilizzano tutti i sistemi di ottimizzazione visti in precedenza per le pagine AMP. Inoltre, sono annunci più “sicuri” e liberi da malware (perché devono passare la validazione di AMP citata in precedenza). Questo maggiore velocità e sicurezza permette di creare maggiore fiducia nei confronti dei tuoi annunci e di creare una migliore user experience.

Per poterle inserire nei nostri template, la documentazione spiega passo passo come fare.

 amp-ad 

L'immagine ci mostra come siano estremamente più veloci le nuove ADS basate su AMPHTML rispetto agli annunci tradizionali.

 

FRAINTENDIMENTI E “PAURE”

Diverse potrebbero essere le “paure”, dubbi o perplessità su AMP:

 

  • “AMP sostituisce i siti”: in realtà, rispetto ad altre librerie e framework, la grande differenza di AMP consiste nell’approccio “white list”, ovvero quello che si può fare o non fare all’interno del suo ecosistema. AMP non va a sostituire, ma stabilisce degli standard per massimizzare la velocità dei siti web.
  • “AMP limita il mio design”: potrebbe sembrare che AMP limiti la nostra capacità di design, che vada a semplificare tutto il design: al contrario AMP prevede moltissimi componenti come accordion, caroselli, e quant’altro per realizzare un’ottima UX simile se non uguale al sito originale.
  • “Google potrebbe rubare il mio traffico tramite la AMP cache”: certamente il nostro sito verrà mostrato sui server google e non sul nostro, ma è possibile tracciare tutte le visite e tutti i nostri eventi anche su queste pagine ospitate da Google. Inoltre, rispetto al passato, è molto più facile riconoscere e condividere il sito originale da parte dell’utente: il link originale è facilmente riconoscibile in alto.

amp-link

 

CHI UTILIZZA AMP?

Benché inizialmente sembrasse una modalità utile perlopiù a siti di notizie, oggi AMP è ampiamente utilizzato da editori, inserzionisti, ma anche e-commerce, i quali possono trarre benefici da esso. Nei risultati ricerca mobile di google sono ormai numerosi i siti che presentano il simbolo “⚡”, e sembra destinato a diffondersi sempre più. I casi di studio sui benefici di AMP sono sempre più numerosi.

 

 

CONCLUSIONI

Dovremmo utilizzare AMP?

Credo che AMP sia un utile strumento che non può mancare in un moderno sito web.

Ancora una volta, Google ha imposto uno standard che sta prendendo sempre più piede e a cui dobbiamo adeguarci per ottimizzare al meglio il nostro sito. Benché sembri un’imposizione, si tratta di un sistema che mira a rendere il web migliore e, di conseguenza, a rendere migliore l’esperienza utente. Tutti noi, ormai, quando vediamo l’icona di AMP nei risultati di Google, la colleghiamo a velocità, immediatezza. Un utente è spinto a cliccare con maggiore interesse su quest’ultimo link per cercare le informazioni di cui ha bisogno.

 

Le sei strategie per il successo dell'azienda

Scritto da Marco Stocco il 22 maggio 2018

Iscriviti al blog!

Articoli recenti