AMP Project

AMP Project

What is AMP?

It is a framework created for the development of mobile websites in order to be extremely fast when uploading without adding extra complexity in implementation.

Motivation

In recent years navigation from mobile devices has increased enormously and we not only consume plain text, but also multimedia content either graphics or videos. These formats are quite heavy which causes the web sites take time to load completely and the user experience is affected to the point that users decide to leave the site. In the chart below we can see an estimate:

imagen2

Companies with AMP content:

How does it work?

Basically it works like any other HTML page but only supports a slightly more limited set of features, which are defined in the documentation.

On the web a lot of JavaScript is used and nowadays there are many frameworks that simplify the development, but frequently its selection and its correct use so that it does not affect the performance of the site, is not trivial and requires a team with many skills and experience. In some way, AMP simplifies all this process, allowing to quickly and easily deploy sites that load content very quickly.

AMP defines its own HTML tags which are increasingly offering a variety of possibilities, such as the addition of multimedia content and publication in social networks, showing advertising, etc.

In which type of pages is it used?

It is widely used in major sites blogs, articles, news, etc. In these sites is essential the loading speed so that the reader does not leave the site.

Some pages that use it:

AMP Page Sample

imagen3

https://www.ampproject.org/docs/tutorials/create

  • HTML open tag is replaced by <html ⚡ > or  <html AMP>
  • Metadata

imagen4

  • AMP JavaScript library is imported:

imagen5

  • Addition of a customized component:

imagen6

  • Some HTML Tags are replaced by their AMP version, instead of <img /> we have

<amp-img src=sample.jpg width=300 height=300></amp-img>

  • On the other hand, some new tags are introduced, in this case for the ADS display

<amp-ad width=300 height=250 type=”a9″ data-aax_size=”300×250″ data-aax_pubname=”test123″ data-aax_src=”302″>

Complete list of AMP tags:

https://www.ampproject.org/docs/reference/components

Sources:

https://carlosazaustre.es/blog/que-es-el-projecto-amp-una-web-mobile-mas-rapida-y-abierta/

https://en.wikipedia.org/wiki/Accelerated_Mobile_Pages

https://www.ampproject.org

 



¿Qué es?

Es un framework creado para el desarrollo de sitios web móviles con la finalidad de que estos sean extremadamente rápidos al cargar y sin agregar complejidades extra en la implementación.

Motivación

En los últimos años la navegación desde dispositivos móviles se ha incrementado enormemente y no solo consumimos texto plano, sino que también contenido multimedia ya sean gráficos o video. Estos formatos son bastante pesados lo cual hace que los sitios web tarden en cargarse completamente y la experiencia de usuario se vea afectada a tal punto que el usuario decida abandonar el sitio. En la siguiente gráfica tenemos un estimativo de esto.

imagen2

Empresas con contenido AMP

¿Cómo funciona?

Básicamente funciona como cualquier otra página HTML pero solo admite un conjunto un poco más acotado de funcionalidades, que están definidas en la documentación.

En web se utiliza mucho JavaScript y hoy en día existen muchos frameworks que facilitan el desarrollo, pero muchas veces la elección de uno y su correcta utilización de modo que no se vea afectada la performance del sitio, no es algo trivial y necesita de un equipo con muchas habilidades y experiencia. De cierta forma AMP simplifica todo esto, permitiendo implementar fácil y rápido sitios que cargan contenido muy rápidamente.

AMP define sus propias etiquetas HTML las cuales cada vez son más ofreciendo variedad de posibilidades, como por ejemplo la inserción de contenido multimedia y publicación en redes sociales, mostrar publicidad, etc.

A su vez los archivos AMP se pueden almacenar en caché en la nube, lo cual reduce también el tiempo de carga.

Google ofrece una caché que puede utilizar todo el mundo sin coste alguno, se trata de Google AMP Cache .

¿En que tipo de páginas se utiliza?

Es muy utilizado en importantes sitios de blogs, artículos, noticias, etc. En estos sitios es primordial la velocidad de carga para que el lector no abandone el sitio.

Algunas páginas que lo utilizan:

Ejemplo de página AMP

imagen3

https://www.ampproject.org/docs/tutorials/create

  • El tag HTML de apertura se reemplaza por <html ⚡ > o  <html AMP>
  • Metadatos

imagen4

  • Se importa la librería JavaScript de AMP

imagen5

  • Aquí tenemos la adición de un componente customizado de la siguiente forma.

imagen6

  • Luego vemos que algunas etiquetas HTML son reemplazadas por su versión AMP, en vez de <img /> tenemos

<amp-img src=sample.jpg width=300 height=300></amp-img>

  • Mientras que por otro lado se introducen algunas nuevas, en este caso para el display de ADS

<amp-ad width=300 height=250 type=”a9″ data-aax_size=”300×250″ data-aax_pubname=”test123″ data-aax_src=”302″>

Listado completo de tags AMP:

https://www.ampproject.org/docs/reference/components

 

Fuentes:

https://carlosazaustre.es/blog/que-es-el-projecto-amp-una-web-mobile-mas-rapida-y-abierta/

https://en.wikipedia.org/wiki/Accelerated_Mobile_Pages

https://www.ampproject.org

Share This
Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn

Previous post