En 2015, el tiempo máximo que un usuario esperaba para cargar una página web en su dispositivo móvil eran 5.4 segs. En 2018 ese tiempo se redujo a 3.3 segs. La relación entre tiempo de carga y conversión es cada vez más estrecha. El proyecto de Accelerated Mobile Pages (AMP) promete entregar páginas móviles en menos de un segundo.

La historia de AMP (Accelerated Mobile Pages) tiene su origen en el mundo de las noticias: cuando ocurre una noticia importante (elecciones, desastres naturales, muerte de una celebridad, etc.) mucha gente busca en sitios de noticias para obtener más información, ocasionando en muchas ocasiones que los servidores de esos servicios se saturen por el exceso de tráfico, creando una mala experiencia en sus visitantes al tiempo que dejan de cumplir su función de comunicar e informar.

Pensando en una solución para este problema, Google anunció el proyecto AMP en octubre de 2015 con el respaldo de los miembros de la Digital News Initiative, cerca de 80 casas editoriales de todo el mundo y compañías de contenido digital como Twitter, Pinterest, LinkedIn y WordPress.

Las páginas de AMP aparecieron por primera vez en el buscador de Google a principios de 2016 en los resultados de búsqueda móvil únicamente. Los enlaces a las páginas de AMP estaban entonces restringidos a una sección en formato de carrusel llamado «Historias destacadas (Top Stories)» en el encabezado de los resultados de búsqueda orgánica.

El carrusel de noticias de Top Stories en el buscador de Google, con páginas AMP.

Google comenzó a mostrar en septiembre de 2016 el contenido de AMP en el área principal de resultados de búsqueda móvil. Los enlaces de AMP en el buscador de Google se identifican con un icono en forma de relámpago dentro de un círculo.

Desde entonces, AMP es un factor importante para el posicionamiento de páginas en el buscador de Google (SEO).

Al poco tiempo, Microsoft anunció soporte para AMP en las aplicaciones de su buscador web Bing para iOS y Android, y Twitter en sus apps móviles para mostrar páginas web.

En mayo de 2017, Google anunció que más de 900,000 dominios web ya publicaban páginas AMP con más de dos mil millones de páginas publicadas a nivel mundial.

«Estamos comprometidos a mejorar la velocidad en todas las plataformas. Si nuestro sitio demora mucho tiempo en cargarse, no importa qué tan bueno sea nuestro periodismo, algunas personas abandonarán la página antes de ver qué hay allí».


David Merrell, Senior Product Manager del Washington Post

Actualmente el proyecto AMP es un proyecto opensource gestionado por un grupo de proveedores de contenido y que cualquier sitio puede implementar -sea de noticias o no- para reducir el tiempo de carga de sus páginas web en dispositivos móviles.

Cómo funciona AMP

AMP es una plataforma de desarrollo y diseño web basada en HTML, CSS y JavaScript, optimizada para dispositivos móviles con funcionalidades limitadas. Las páginas AMP se colocan junto a las páginas HTML originales a partir de las cuales fueron generadas.

Modelo de funcionamiento de AMP

Cuando el buscador de Google es notificado, hace una copia de las páginas AMP en Google AMP Cache, una red de distribución de contenido estático de alta velocidad (Content Delivery Network o CDN). Las páginas AMP son optimizadas y se entregan a dispositivos móviles en el navegador web o en una app donde son reconstruidas y mostradas al usuario para que interactúe con ellas.

Este proceso de optimización permite entregar páginas a dispositivos móviles en tiempos menores a un segundo, creando una experiencia de uso positiva, aumentando las conversiones de esa página por acciones o publicidad y sin hacer llamadas adicionales al servidor original, permitiéndole atender a más visitantes.

La promesa de AMP es que estas páginas carguen de manera instantánea (en el rango de milisegundos), independientemente del ancho de banda del dispositivo del usuario.

Anatomía de una página AMP

Las páginas AMP se construyen de manera similar a las páginas HTML, con algunos cambios en su arquitectura y etiquetado. Esta es una plantilla básica de AMP:

 <!DOCTYPE HTML>
 <html ⚡>
   <head>
   <meta charset="utf-8">
   <link rel="canonical" href="hello-world.html">
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
   <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>
   <script async custom-element="amp-geo" src="https://cdn.ampproject.org/v0/amp-geo-0.1.js"></script>
   <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
 </head>
 <body>
   <amp-geo layout="nodisplay">
     <script type="application/json">
       {
         "AmpBind": true
       }
     </script>
   </amp-geo>
   <h1>¡Hola en <span [text]="country">...</span>!</h1>
   <button on="tap:AMP.setState({'country': ampGeo.ISOCountry.toUpperCase()})">¿dónde estoy?</button>
 </body>
 </html>
  • Renderizado de página AMP
  • Geolocalizació y data binding con AMP

El HTML de AMP es HTML con algunas restricciones para un rendimiento optimizado.

Componentes de AMP

Aunque la mayoría de las etiquetas en una página HTML de AMP son etiquetas HTML normales, algunas etiquetas son reemplazadas con etiquetas específicas de AMP. Estos elementos personalizados, llamados Componentes HTML de AMP hacen que los patrones comunes sean fáciles de implementar de una manera más eficiente.

Por ejemplo, la etiqueta amp-geo proporciona una interfaz de geolocalización aproximada a nivel de país, sin necesidad de Javascript ni de implementar múltiples versiones de la función de geolocalización para asegurar compatibilidad en diferentes navegadores:

<amp-geo layout="nodisplay">
     <script type="application/json">
       {
         "AmpBind": true
       }
     </script>
</amp-geo>

<h1>¡Hola en <span [text]="country">...</span>!</h1>
   <button on="tap:AMP.setState({'country': ampGeo.ISOCountry.toUpperCase()})">¿dónde estoy?</button>

AMP cuenta con una colección robusta y completa de componentes que cubren los casos de uso más comunes de páginas de contenido para móviles. Por ejemplo, para implementar un carrusel de imágenes con AMP, se escribe de esta manera:

<amp-carousel height="300"
   layout="fixed-height"
   type="carousel">
   <amp-img src="/static/samples/img/image1.jpg"
     width="400"
     height="300"
     alt="a sample image"></amp-img>
   <amp-img src="/static/samples/img/image2.jpg"
     width="400"
     height="300"
     alt="another sample image"></amp-img>
   <amp-img src="/static/samples/img/image3.jpg"
     width="400"
     height="300"
     alt="and another sample image"></amp-img>
 </amp-carousel>

Casos de uso de AMP

AMP se ha diversificado desde su primera versión y se puede utilizar para crear contenido en casos de uso específicos con la ventaja de su carga acelerada. Se puede utilizar para crear:

Referencias

AMP ha madurado rápidamente gracias a las aportaciones de los medios de comunicación y la participación de la comunidad alrededor del proyecto. Conocer e implementar AMP es un proceso sencillo si ya se está familiarizado con desarrollo web con HTML, aunque hay recursos para acelerar el proceso de integración con sitios web ya existentes.

  • AMP by Example es un sitio que contiene una colección de soluciones ya hechas, desde una guía completa de los componentes básicos de AMP hasta componentes más complejos para publicar noticias, crear páginas de e-commerce o colocar audio, video y elementos interactivos como carruseles, carritos de compra o formularios.
  • AMP Start es una colección de plantillas completas para páginas en AMP para descarga que se pueden personalizar después con enfoques para sitios de contenido, noticias, comercio electrónico o historias.
Plantillas AMP para sitios web en AMP Start
  • AMP para WordPress es un plug-in desarrollado para crear páginas AMP de manera automática en un blog o sitio creado con WordPress.
  • AMP Validator es una herramienta de análisis semántico para revisar que las páginas creadas con AMP funcionen correctamente.

El proyecto AMP no ha estado exento de críticas fuertes por parte de la industria de contenidos, que ha acusado a Google que querer cooptar sus sitios al crear su propia versión de estándares web que solo ellos controlan, poniendo en riesgo la apertura de la web y la independencia de los medios y de los creadores.

En respuesta, Google ha cambiado el licenciamiento de AMP y ha creado un grupo de gestión sobre el proyecto que se espera se convierta en una fundación para que sea auténticamente independiente y contribuya a crear una web más rápida y eficiente para todos.

Artículos relacionados:

Publicado por Mauricio Angulo S.

Mauricio es diseñador de experiencia de usuario desde el año 2004. Es front-end developer, sprintmaster y entusiasta de AI. Es mentor en el programa Google for Startups y parte de la iniciativa de Microsoft Regional Director como mentor para corporativos y startups en diseño de experiencia de usuario, usabilidad y desarrollo de software. Es co-fundador de UX Nights. También es escritor, ponente internacional y profesor.