MENU
Partner with us on your next project.
Get in touch Call us on 01273 022798
01273 022798 Get in touch
Blog.

Why we should implement AMP ASAP

A few months ago I was moving house and I was desperately looking for a mattress or I should have slept on the floor. Since I had literally no time, I did not make my researches at home and I relied on the technology: I have an iPhone, we live in the future where everything is smart, connected and super fast.

Well, if you are looking for strong emotions and want to go beyond your limits, you need just two things: rush and a slow, very very slow connection.


via GIPHY
This kind of frustration is more and more common among mobile users, especially now that most of the content is delivered through videos.
Last year mobile searchers overtook desktop for the first time worldwide and with more powerful and larger smartphones, tablets and PCs sales are not growing.
As the majority of users are mobile searchers, during the last month of 2016 Google has been testing mobile-first index that separates mobile and desktop results.With mobile first indexing, now Google lists and ranks search results by using the mobile version of the content, crawling the web no longer from a desktop browser perspective. In other words, Google prefers the mobile version of a site rather than its desktop version.
In the meanwhile, since 2015  the AMP markup has been conceived to improve web pages load speed and users are starting to see content in search results with the AMP lightning bolt logo.

What is AMP?

The Accelerate Mobile Page (AMP) project is an open source initiative to which companies like Reddit, Bing, eBay, WordPress, Twitter, Pinterest, collaborated in order to improve user searching experience which helps publishers better reach their audience across the world, across every platform and device. It is based on existing web technologies and it is a subset of HTML for authoring content pages, developed to optimise the page load speed of websites mobile versions. Also, AMP allows to create light-weight web pages in order to upload and download content at a very high speed. Once the content is created and optimised, it can be loaded everywhere instantly.

How it works

AMP HTML is an extension of the HMTL language, which has dedicated tags. To optimise a page with AMP it is necessary to replace some HTML tags with AMP-specific tags called AMP HTML components. For example, the HTML tag <video> will be replaced with <amp-video>.
How to optimise a web page:
-Implement HTML AMP (GitHub guide here)
-Implement AMP JS: the fast rendering of AMP HTML pages is ensured by the AMP JS library
he AMP JS library ensures the fast rendering of AMP HTML pages. The Google AMP Cache can be used to serve cached AMP HTML pages.

Le librerie di AMP JS offrono la possibilità di utilizzare del codice javascript ottimizzato per migliorare le prestazioni, gestire meglio il carico di download degli script e il supporto per i tag AMP HTML. Tutte le risorse, ad esempio, sono caricate esternamente e in maniera asincrona, in modo tale da non bloccare la visualizzazione dei contenuti nel processo di rendering della pagina.

Sempre su GitHub è possibile scaricare o visualizzare il codice Javascript AMP JS.

-In maniera facoltativa utilizzare un servizio per il download di contenuti ottimizzato mediante AMP CDN.
AMP HTML is HTML with some restrictions for reliable performance and some extensions for building rich content beyond basic HTML.
 

AMP JS

Come fa AMP a velocizzare le perfomance di un sito web

Andiamo a vedere alcune delle soluzioni che utilizza il codice AMP per migliorare la visualizzazione di una pagina HTML, per la lista completa delle funzionalità vi rimando all’articolo dedicato.

Vengono eseguiti solo script JS asincroni

Without Javascript would not be possible to implement functionalities in webpages, some essentials, others estethical togheter with the dynamic rendering of the content. However, this requires the loading and the execution of functions that reduce the page speed. Asynchronous javascript allows to avoid these problems because it only executes certain functions o

 Javascript offre delle soluzioni per rendere più elegante e funzionali le pagine di un sito web, mediante animazioni e effetti, oltre al rendering dinamico dei contenuti. Questo però richiede il caricamento e l’esecuzione di funzioni che rallentano la velocità con cui la pagina viene visualizzata. Il codice JS asincrono evita questi problemi, eseguendo i processi che rallentano la visualizzazione dei contenuti solo dopo che questi sono stati mostrati agli utenti. Nel caso di una pagina costruita secondo la logica AMP è possibile utilizzare del codice Javascript di terze parti, non ottimizzato per la velocità, ma solo se questo viene caricato in un iframe, non impedendo così il rendering della pagina.

Carica solo le risorse necessarie

Indicando le dimensioni degli elementi nel codice HTML, AMP in funzione della risoluzione del monitor utilizzato per visualizzare il layout costruito secondo queste specifiche, scaricherà solo gli elementi (immagini, iframe e annunci ad esempio) ottimizzati per la pagina.

E’ permesso solo l’uso di CSS in linea

Per evitare che il caricamento degli stili degli elementi influisca sulla velocità di visualizzazione della pagina AMP permette l’uso solamente di CSS in linea e che la somma delle istruzioni CSS non pesi più di 50 kilobite.

Ottimizza l’uso del prefetching

Come nel responsive web design AMP analizza quali elementi verranno scaricati e ne effettua il download inserendoli in una coda a differente priorità. Quindi le immagini e gli annunci sponsorizzati verranno caricati solamente se l’utente li visualizzerà, in seguito o sul momento.

 

Benefits

  • AMP pages are 4x faster, use 10x less data compared to non-AMP pages
  • On average AMP pages load in less than one second
  • 90 percent of AMP publishers experience higher CTRs
  • 80 percent of AMP publishers experience higher ad viewability rates

Google sees the open-source AMP initiative as a way to boost the mobile web (and search) and to deal with consumer objections to aspects of the mobile user experience, such as slow-loading pages and annoying ad formats. AMP competes with Facebook Instant Articles and Apple News; however it has expanded well beyond news into other categories including e-commerce.