¿Qué es AMP HTML? Acelera tus aplicaciones web y móvil

15 abril, 2016

¿Qué es AMP HTML? – Acelera tus aplicaciones web y móvil

Hace ya algunos meses, Google lanzaba una nueva iniciativa Open Source, denominada AMP HTML – Accelerated Mobile Pages, con la idea de mejorar la experiencia final del usuario móvil, proveyendo de sistemas a través de los cuales mejoraría en un alto porcentaje la velocidad de carga de la información cuando se hace uso de dispositivos móviles.

El uso de los dispositivos móviles, ya sean smartphones o tablets, se ha disparado en los últimos años debido al avance de la tecnología. Haciendo uso de tecnologías como el “responsive design”, se ha conseguido adaptar el contenido del sitio, de forma que la lectura fuera más cómoda y adaptada al dispositivo. Aún así, una web llena de recursos, ya no solo imágenes y texto, hacía que fuera dura la tarea de cargar la web en un smartphone o similar, perdiendo así lectores y suscriptores en los diferentes sitios web.

Con el objetivo de mejorar esta velocidad de carga, nació el framework AMP HTML, un formato abierto construido a partir de tecnología web ya existente, el cual permite a los desarrolladores crear versiones ligeras de sus sitios webs. Está claro que será la tecnología de este año 2016, y de la que todo el mundo ya está hablando. Echando un ojo a la web oficial del proyecto, podemos ver que algunos grandes como BBC, Sport, EL PAÍS,… ya hacen uso de esta tecnología. Los grandes medios fueron los primeros involucrados en la idea, debido a la necesidad de cargar toda la información en el menor tiempo posible. Así que liderado por Google y junto a los grandes de las tecnologías como Twitter, LinkedIn,… dieron comienzo al proyecto.

¿Cómo funciona AMP Html?

Aparentemente, AMP puede funcionar como una web HTML corriente, pero a su vez está limitada a una serie de funcionalidades técnicas definidas por las especificaciones AMP. AMP HTML cargará en cualquier navegador moderno o vista HTML en aplicaciones móviles, al igual que puede hacerlo cualquier web. El proyecto ya ha puesto disponible un tutorial el cual podrás seguir para poner en marcha tu propio proyecto.

Algunas de estas limitaciones pueden ser:

Solo permite javascripts asíncronos.
Los recursos tales como imágenes, iframes, anuncios… deben indicar su tamaño.
No permite ninguna extensión que pueda impedir el renderizado de la página.
Sólo están permitidos los estilos en línea y están limitados a 50kb.
HTML y CSS minificados.

Una web HTML simple en AMP podría verse de la siguiente forma:

<!doctype html>
<html amp lang="en">
  <head>
    <meta charset="utf-8">
    <title>Hello, AMPs</title>
    <link rel="canonical" href="http://example.ampproject.org/article-metadata.html" />
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <script type="application/ld+json">
      {
          "@context": "http://schema.org",
        "@type": "NewsArticle",
        "headline": "Open-source framework for publishing content",
        "datePublished": "2015-10-07T12:02:41Z",
        "image": [
          "logo.jpg"
      ]
      }
    </script>
    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
  </head>
  <body>
    <h1>Welcome to the mobile web</h1>
  </body>
</html>

Y está formado por:

La librería AMP escrita en JavaScript
- Esta librería será la encargada de gestionar toda la web así como la carga de recursos externos y la óptima carga de la aplicación.
Validador AMP
- Permitirá validar e identificar de forma fácil si el código cumple con las especificaciones AMP.
Componentes AMP
- Estos nuevos componentes AMP sustituirán a los elementos básicos HTML5 actuales con la idea de permitir una carga rápida y fiable.

Debido a estas limitaciones, la web cargará hasta 4 veces más rápida a lo que lo hace actualmente.

Como añadido a estos requisitos, los archivos AMP podrán almacenarse en una caché en la nube. ¿Qué quiere decir esto? Que mejoraremos aún más la velocidad de carga de la página. Google asegura que proporcionará recursos para ello, de forma gratuita y haciendo uso del protocolo HTTP 2.0. No obstante, se podrán disponer de servidores propios o de terceros para hacer uso de esta caché web.

Si limitan los archivos javascript, ¿Qué pasa con la publicidad móvil?

Desde el proyecto AMP, se asegura que se está trabajando para poder asegurar el uso y funcionamiento de acciones publicitarias de forma efectiva y centrada en el usuario.

Ventajas de implementar AMP en tu Web

Son muchos los estudios que demuestran que a mayor tiempo de carga de la página, mayor es el porcentaje de rebote de tus usuarios. AMP hará que la carga de tu página sea casi inmediata, combinándola con una navegación cómoda y adaptada a los dispositivos móviles.

El contenido móvil de tu sitio web será mucho más accesible, por lo que google premiará tu sitio y mejorará tu SEO.

Será una web adaptada al móvil 100%.

Estamos seguros de que AMP ha llegado para quedarse.

Autor: Francisco Redondo. Antes Desarrollador Full Stack en Yunbit.

Valora el artículo: