Introducción a AMP

¿Qué es AMP y cómo funciona?

AMP son las siglas de Accelerated Mobile Pages o en español Páginas para móviles aceleradas, es un proyecto Open Source que permite la carga de sitios web en dispositivos móviles de forma óptima y efectiva.

Historia

AMP (Accelerated Mobile Pages) es un proyecto Open Source lanzado por Google el 7 de octubre del 2015 como competencia de los Instant Articles de Facebook y de Apple News.

AMP nació con la voluntad de mostrar páginas con un tiempo de carga muy bajo en los dispositivos móviles.

Hoy en día es muy importante generar sitios web robustos, de gran contenido y ligeros de carga, que permitan capturar la atención del cliente en pocos segundos y asegurar las visitas al sitio web.

¿Qué es AMP?

Las páginas AMP se programan en un lenguaje propio, una variación del HTML, llamada AMP HTML. Que es un nuevo formato abierto con licencia Apache y cuyo código está disponible ya en GitHub para que todos los interesados puedan aprovecharla e integrarla en sus sistemas de gestión de contenidos y entiendan qué es AMP.

Pero, ¿Qué es lo que exactamente hace AMP?, bueno AMP en principio hace dos cosas:

• Acelerar su sitio en dispositivos móviles
• Mejorar la clasificación móvil

¿Cómo funciona AMP?

Para entender como funciona AMP debemos conocer los 7 fundamentos con los que opera:

1. Ejecución asíncrona del JavaScript
   • La ejecución asíncrona del Javascript evita que la renderización de la página se bloquee. Los fundamentos de AMP están cuidadosamente diseñados para garantizar que los archivos Javascript aún los de mal performance no causen una disminución del rendimiento.
2. Dimensionar todos los recursos
   • AMP solicita que los recursos externos, por ejemplo, imágenes, anuncios o iframes, deben indicar su tamaño en el código HTML para que poder determinar el tamaño y la posición de cada elemento antes de descargar los recursos. AMP cargará el diseño de la página sin esperar que se descargue ningún recurso.
3. CSS integrado y restringido
   • Mejora los tiempos de carga y elimina elimina una o más solicitudes HTTP de la ruta de renderizado crítica. Este componente se aplica utilizando CSS integrado o inline dentro del sitio y una hoja de estilos que tiene un tamaño máximo de 50 kilobytes.
4. Carga eficiente de fuentes
   • Las fuentes web son muy grandes, así que su optimización es esencial para lograr un buen rendimiento. La carga asíncrona de JS permite que AMP empiece a cargar las fuentes antes de realizar otra llamada HTTP.
5. Reducción de los re-cálculos de estilos
   • En las páginas AMP, todas las lecturas DOM se efectúan antes que todas las escrituras. Esto garantiza que habrá solo un máximo de re-cálculos de estilo por cuadro.
6. Ejecución de animaciones solo mediante aceleración GPU
   • Las reglas del CSS relacionadas con la animación garantizan que las animaciones puedan hacerse mediante aceleración GPU. Siendo más precisos, AMP solo permite hacer animaciones y transiciones durante la transformación y la opacidad, para que no sea necesario el diseño de la página.
7. Carga eficiente de recursos
   • AMP carga los recursos de acuerdo a su necesidad dentro de la página y de esta forma evita que el sitio se cargue después de que todos los recursos se hayan descargado. SI el recurso se requiere AMP permite primero su carga y aquellos que no son necesarios hasta el final se realizan por carga diferida.

Es importante tener en cuenta que estos 7 fundamentos son esenciales para AMP porque permiten una mejora en los tiempos de carga de la página pero no una carga instantánea.

La carga instantánea puede darse gracias a que AMP maneja la nueva API de preconexión esta se utiliza a menudo para garantizar que las solicitudes HTTP sean lo más rápidas posible cuando se realizan. De este modo, una página puede renderizarse antes de que el usuario declare explícitamente que le gustaría navegar en ella. Es posible que la página ya esté disponible cuando el usuario la seleccione, lo cual implica que la carga debe ser instantánea.

Es importante mencionar que AMP HTML funciona alrededor del escáner de precarga porque, paradójicamente, permite lograr el efecto de carga instantánea deseado. Incluso si no se procesa previamente, la estructura del documento de AMP HTML compensa significativamente los beneficios del escáner de carga previa, por lo que las cargas son rápidas incluso cuando no se procesa previamente.

En resumen AMP optimiza la carga de los sitios porque implementa estas validaciones dentro del website:

• Los componentes están restringidos. Por ejemplo, el componente img se sustituye por la componente img-amp, que permite publicar fotos con menos peso y que por tanto se cargan más rápido. Otras componentes directamente no pueden emplearse, lo que limita algunas funciones.
• El uso de recursos JavaScript se limita a las librerías del proyecto.
• Se usan los cachés CDN del propio proyecto, lo que optimiza la obtención y validación de las páginas.

Tenemos ya un marco teórico sobre con el cual podemos empezar a trabajar la idea de implementar AMP en nuestro sitio web, pero es muy importante saber si en nuestro website es aplicable AMP.

Consideraciones antes de implementar AMP

La estructura HTML y JS deben ser las implementadas para AMP, con sus respectivas componentes.

Si tienes un sitio web con animaciones diversas y manejo de estilos personalizado, debes considerar que en AMP la carga de este tipo de files es reducida.

No todos los navegadores que soportan navegación en AMP, existe una lista reducida que mencionamos a continuación:

• Chrome (latest two stable versions)
• Edge (latest two stable versions)
• Firefox (latest two stable versions)
• Safari (latest two stable versions)

Algo importante a mencionar es que actualmente sólo existen dos cachés que soportan AMP:

• Google AMP Cache
• Bing AMP Cache

¿Cuándo usar AMP?

El primer punto a tener en cuenta es: AMP esta pensado para optimizar sitios web tipo blogs o de noticias donde el usuario consume información pero no interactúa constantemente con la misma.

Al tener una limitación en el uso de JS y CSS la página no podrá contar con animaciones embellecedoras o carga de funcionalidades interactivas. En pocas palabras el sitio tendrá una visualización más simple.

AMP es sencillo de implementar en CMS como Wordpress, pero si eres un usuario Drupal debes pensar bien si es factible su implementación ya que resulta un poco más compleja.

Ventajas y desventajas de usar AMP

El uso de AMP tiene como todo ventajas y desventajas en las siguientes secciones se listan las que se consideran más importantes al momento de decidir si usar o no AMP en nuestra web.

Ventajas

Existen pros al utilizar AMP a continuación mencionaremos algunos:

• Mejor rendimiento. Las páginas que usan la tecnología Accelerated Mobile Pages se cargan hasta un 85% más rápido en móviles; de hecho, el promedio de carga estimado no llega a un segundo.
• Menor gasto de datos (hasta 10 veces menos) y de batería.
• Mejor posicionamiento orgánico (SEO). La velocidad de carga en móviles es uno de los factores más valorados por Google para decidir el ranking de una página, así que contar con AMP nos beneficiará. Además, esta tecnología facilita el visionado de los contenidos, cosa que Google también valora positivamente.
• Más visibilidad. Cuando haces una búsqueda desde dispositivos móviles, las páginas AMP se muestran en los resultados de búsqueda en forma de un carrusel de noticias horizontal. Cada uno de los resultados AMP va acompañado de una foto, lo que contribuye a que estos destaquen y animan a los usuarios a hacer clic.

Estos 4 puntos mencionados en los párrafos de arriba se resumen a que nuestro sitio tendrá los siguientes resultados:

1. Menos usuarios abandonarán la página.
2. Una mayor conversión de leads.
3. Menor porcentaje de rebote.
4. Mejor ponderación en Google, lo que da una mejor visibilidad.
5. Una carga rápida y eficiente

Desventajas

AMP ayuda a cargar muy rápido las páginas, pero también tienen sus inconvenientes. Algunos de sus principales problemas son los siguientes:

• Deficiente experiencia de usuario. Hay que señalar que las páginas AMP tiene URLs muy complicadas, diferentes de las páginas normales con el mismo contenido. Esto dificulta el SEO tradicional, en parte, pero, sobre todo, dificulta la posibilidad de compartir los contenidos por parte de los usuarios.
• Es muy cerrada. Es muy difícil salir de una AMP. Te metes en un ecosistema que te obliga a seguir en ella.
• URL del navegador. Cuando se posiciona una AMP en Google, en las SERPs se ve la URL de la página en cuestión. Sin embargo, cuando se accede a la página, la URL que aparece es de Google. Desde Google, dicen que esto es un error y que se está resolviendo. Pero, de momento, es un problema.
• Webs muy simples. Las páginas AMP son muy simples visualmente. Se eliminan todo tipo de plugins y elementos visualmente atractivos. Esto hace que la página cargue rápido, pero, evidentemente, ofrece una experiencia un tanto escasa para el usuario.
• Página extra a generar. Otro problema es que se genera una nueva página para un mismo contenido. Con lo cual tienes una página mobile, otra página normal y, si te decides a implantarla, una AMP. Tres páginas para el mismo contenido y esto no deja de ser problemático. Podría ser considerado contenido duplicado.

Conclusión

La implementación de AMP en un sito web debe ser analizada por el equipo de desarrollo, conocer si es que se cumplen con las condiciones necesarias y si el esfuerzo para realizar este cambio es consistente con el objetivo empresarial.