@alfonsocala / febrero 07, 2019

AMP o cómo acelerar tu web para que vaya a la velocidad que Google manda

Seguro que has oído hablar de AMP, las siglas de Accelerated Mobile Pages, un proyecto de código abierto implementado por Google con el objetivo de optimizar la velocidad de carga de los sitios web cuando navegamos con nuestros smartphones. Por supuesto, una agencia de diseño web como INNN, que se esfuerza por estar al día en todo lo relacionado con tecnología, no podía permanecer al margen de este fenómeno. Por ello llevamos a cabo una de nuestras habituales sesiones de formación, los Aprendays, hablando sobre AMP, sus características e implicaciones. Si te lo perdiste, ahora es el momento de prestar atención.

Accelerated Mobile Pages AMP. | INNN

Las  Accelerated Mobile Pages, básicamente, surgen a raíz de la necesidad de seguir mejorando el proceso de optimización de las webs para móviles. Un tema en el que Google está siendo muy insistente en los últimos tiempos. Por ejemplo con su Mobile First Index, un cambio en su algoritmo de búsqueda que se fija sólo en la versión para móviles para las páginas de resultados de búsqueda, o con herramientas como Test my site, para medir la velocidad de nuestras webs en mobile. Ahora, además, contamos con AMP, un nuevo standard para construir sites que está pensado exclusivamente para el usuario móvil y que vela por que su experiencia de navegación sea plenamente satisfactoria.

“Con AMP, conseguimos cargar nuestras páginas en un tiempo promedio inferior a un segundo, ideal para los usuarios móviles.”

Para identificar las páginas AMP sólo tienes que fijarte en las búsquedas realizadas en Google con un smartphone, verás en muchos casos un símbolo de un relámpago acompañado de las siglas AMP. O en la URL de la web, también aparecen las mismas siglas. Y es más, en el servicio Google Discover (que ofrece contenidos noticiables personalizados para el usuario según sus búsquedas) todo es AMP.

Pero, ¿tan importante es optimizar el diseño web para móviles? Los datos demuestran que si pasados 3 segundos, una web no se carga correctamente en los dispositivos móviles el 40% de los usuarios cierra la pestaña o busca otro resultado. 

Y si hablamos de datos, con AMP se consigue:

  • Cargar las páginas en móviles hasta un 85% más rápido que las páginas tradicionales.

  • Cargar las páginas AMP en un tiempo promedio de menos de un segundo.

  • Optimizar el gasto de datos, hasta 10 veces menor, y el de batería.
     

Cómo funciona

Ahora pasamos a explicar en detalle cómo funciona AMP pero, como introducción, es necesario comentar que su excepcional rendimiento en móviles se basa en prescindir de ciertos recursos y acortar la distribución de datos. No hay más secretos, cargar menos elementos o una versión optimizada de estos, y mejorar el flujo para acelerar la descarga. 

AMP utiliza un lenguaje html específico, el AMP html, que se caracteriza por:

  • Sólo permite el uso de ciertas etiquetas HTML, por ejemplo la etiqueta img pasa a ser img-amp.
  • El uso de recursos JavaScript queda restringido a las librerías de AMP HTML.
  • Uso de cachés CDN del propio proyecto AMP. Es decir, cuando Google detecta una URL con una etiqueta que indica que existe versión AMP, la rastrea y valida que se cumplan los estándares. Si el AMP validator da vía libre, Google crea una versión de esa página en su caché y la pre renderiza por lo que si un usuario pulsa en la url muestra el contenido de manera prácticamente inmediata.

En definitiva, estamos generando una versión simplificada de nuestra web en formato mobile para que se muestre en determinados contextos de uso. El proyecto está especialmente orientado a noticias y contenidos editoriales pero también a e-commerce, de hecho eBay o Airbnb son early adopters de AMP y ya se pueden consultar muchos resultados suyos en esta tecnología.
 

No todo es de color de rosa

Aunque a primera vista Accelerated Mobile Pages parece un proyecto súper interesante cuenta con no pocos detractores. Para empezar, no podemos obviar a los conspiranoides que elucubran con que AMP es una estrategia de Google para, a medio plazo, mostrar más anuncios de Google Shopping y combatir con Amazon. E incluso que Google está intentando secuestrar al usuario, evitando que visite otros dominios para dejarlo encerrado en su burbuja. O incluso que está tratando de robarnos datos sobre nuestro tráfico web.

En realidad no hay nadie más interesado que el propio Google en fomentar el consumo de Internet desde dispositivos móviles. Además, su objetivo es seguir haciendo de su buscador el mejor para seguir dominando el mercado y consiguiendo beneficios a través de la monetización publicitaria y la venta de otros servicios anexos.

En cualquier caso, como ya hemos esbozado, AMP tiene varios inconvenientes:

  • Experiencia de usuario en entredicho. Para empezar las URLs en formato AMP son muy complicadas, lo que dificulta el SEO convencional y una tarea habitual de los usuarios, compartir entre ellos los contenidos. 
  • Webs excesivamente simples. Al prescindir de tantos elementos y librerias JS las páginas AMP quedan reducidas a un contenido muy rápido de cargar y legible pero demasiado simple visualmente. Nos cargamos la identidad de marca y la diferenciación con la competencia.
  • Página extra a generar. Si ya suponía un reto crear cada página específica adaptada para móviles ahora surge la necesidad de crear otra página extra con su propio lenguaje. Esto supone horas de desarrollo.
  • Problemas con la analítica de datos. El contenido AMP no se sirve directamente desde el servidor de la página web, sino desde el servidor CDN de Google por lo que el usuario no pasa por nuestro dominio. ¿Y nuestros datos? No hiperventiles, para solventarlo es necesario desarrollar nuevas configuraciones para Analytics y Tag Manager. Más trabajo aún.
  • El SEO y AMP. Google ha declarado que Accelerated Mobile Pages no es un factor de ranking SEO. Pero teniendo en cuenta la importancia que concede a la navegación móvil y a la velocidad de carga de las webs se puede deducir que, si bien no es un factor determinante, sí influye.


Ahora, a implementar AMP

Si has llegado hasta este punto te habrás dado cuenta de que no es tan sencillo implementar AMP para nuestra web. En entornos Wordpress parece algo más asequible con plugins como AMP for WP pero aún así requiere de horas de desarrollo y algún que otro dolor de cabeza.

Por ello lo importante es definir una serie de criterios y un plan de trabajo. Para empezar es vital testear el rendimiento de algunas páginas o secciones antes de lanzarse a la titánica tarea de implementarlo en toda la web.

El primer paso es crear lo que se conoce como un producto mínimo viable, una primera página de prueba. Éste nos permitirá evaluar si nuestro diseño se resiente mucho con AMP, si la experiencia de usuario se ve muy afectada y si va a sobrecargar de trabajo al departamento técnico.

 AMP validator
 AMP Validator detecta las necesidades de nuestra web para implementar la versión AMP. | validator.ampproject.org

Una vez testado el MVP (Minimum viable product) surge otra pregunta, ¿lo implementamos en toda la web?. La respuesta es nuevamente una reflexión estratégica de la compañía, depende de sus objetivos y la naturaleza de sus contenidos.

Un ejemplo puede ser Airbnb, que sólo ha implementado AMP en las páginas de resultado de búsqueda. Desestimó hacerlo también en la página de inicio por su alta frecuencia de actualización de contenidos y por los retos técnicos que ello conllevaba.

Cómo sabemos que ahora puede ser complicado dar el primer paso, desde INNN os proponemos una herramienta online que os allane el camino:

AMP Creator

En definitiva, AMP (Accelerated Mobile Pages) se consolida como un nuevo standard para el desarrollo web mobile que hay que afrontar con un carácter reflexivo y estratégico. Es muy interesante implementarlo pero hay que plantear primero el plan de acción y medir muy bien los esfuerzos y, sobre todo, el resultado que obtenemos.

Alfonso Cala

Alfonso Cala

alfonso.cala@innn.es  / 

De formación periodística, su experiencia como diseñador y maquetador online, así como sus amplios conocimientos en UX / UI, hacen de él uno de los miembros más versátiles del equipo, un ejecutivo/creativo/todoterreno a prueba de retos y transformaciones propias de nuestra profesión.

Avda. Málaga 4. Escalera D, ático. 41004, Sevilla. | +34 955 156 465 | ¿Cómo llegar a INNN?

info@innn.es +34 955 156 465

Un poco más de INNN en tu correo

Nos gusta compartir aquello que nos motiva y los trabajos de los que nos sentimos orgullosos. Si quieres, podemos enviártelos. Será poco, pero muy bueno.

Vive un Aprenday en INNN

¿Quieres venir a un Aprenday? Rellena este formulario y reserva tu plaza. ¡Te esperamos!

Plaza:

¿Podemos ayudarte con tu proyecto?

Contacta con INNN y nos pondremos de inmediato a trabajar en tu proyecto.