Google AMP: Accelerated Mobile Pages para tu sitio web

¿Sabes cuánto tiempo tarda en cargar tu página web cuando la visita un usuario desde su dispositivo móvil? Los usuarios de Internet se están volviendo cada vez más exigentes, y cuando utilizan un dispositivo móvil para navegar no tienen ningún reparo en abandonar tu web cuando tarda más de unos segundos en cargar.

Hoy quiero hablarte de Google AMP, la herramienta de Google que te ayuda a mejorar la experiencia de usuario en los dispositivos móviles gracias al incremento de la velocidad de carga de las páginas web.

Hablaremos también del funcionamiento de esta eficaz herramienta, además de algunos tips e ideas para que puedas implementarla con éxito en tu empresa.

¡Comenzamos!

¿Qué es Google AMP?

Las Accelerated Mobile Pages, también conocidas como AMP, es un proyecto de Google que consiste en mejorar la velocidad de carga de cualquier página web cuando es visitada a través de un dispositivo móvil.

Desde hace unos años, el uso de smartphones y tablets para navegar por Internet supera a los ordenadores de sobremesa y portátiles. Sin embargo, muchas páginas web no están optimizadas para ofrecer una buena experiencia de usuario a través de estos dispositivos móviles, y hoy en día la velocidad es una parte del diseño de las páginas web.

Por eso, Google creó esta plataforma de código abierto cuyo objetivo está en ayudar a las personas y empresas que publican páginas web, a mejorar la velocidad y la facilidad de lectura en los dispositivos móviles.

Y es que los resultados hablan por sí mismos. Imagina la página web de un e-commerce que genera unas ventas diarias de 100.000€. Si la carga de la web se retrasa un segundo, un solo segundo, esto podría suponer una pérdida de 2,5 millones de euros en ventas al año.

Además, a nadie nos gusta visitar una página web lenta. Si tienes este problema en tu website y no lo corriges, es muy probable que tus clientes y visitas dejen de entrar, con las nefastas consecuencias que esto supone a todos los niveles.

Cómo funciona Google AMP

Al igual que ocurre con las páginas web, la tecnología AMP utiliza el lenguaje de programación HTML, aunque está adaptado y optimizado. Para ello, elimina algunas etiquetas HTML que no ayudan en la velocidad de carga de la web.

Este lenguaje concreto ha adoptado el nombre de AMP HTML.  

A continuación, voy a compartir contigo algunas particularidades importantes que debes conocer de este lenguaje AMP HTML:

• Como te he comentado antes, solo te permite usar las etiquetas HTML permitidas. Por ejemplo, para las fotos puedes usar la etiqueta img-amp con la que podrás publicar tus imágenes aunque con menos peso, lo que facilita la velocidad de carga de la página.

Otro ejemplo lo tenemos en las etiquetas como frame u object. En el caso de AMP no puedes utilizarlas, lo que implica que no puedes publicar vídeos ni tampoco los botones de tus redes sociales.

• Si tu página web para móviles incluye JavaScript, debes saber que con Google AMP solo puedes utilizar la biblioteca JavaScript que te proporciona la herramienta.
• Además, con las AMP debes usar una versión simplificada de CSS; solo permite el uso de un único CSS en línea con un peso menor a 50Kb.
• Cuando Google rastrea tu web y comprueba que cumple los estándares de AMP, automáticamente la incluye en su caché. Esto hace que cada vez que un usuario realiza una búsqueda, Google coge el contenido desde su propio servidor CDN.

Y cuando el usuario hace clic sobre el resultado del SERP, le aparece la web casi de forma inmediata.

• Las AMP no te permiten incluir formularios como, por ejemplo, el formulario de suscripción a tu comunidad de seguidores.

Algo importante que debes tener en cuenta a la hora de implementar Google AMP en tus páginas web móviles, es que lo más importante es conseguir una buena velocidad de carga además de facilitar la lectura a los usuarios.

Esto supone, a veces, sacrificar algunos aspectos como el diseño y la posibilidad de compartir la página. Pero ¿qué es más importante, incrementar tus ventas con una página optimizada, o el abandono de visitas a pesar de que tiene opciones que, en el fondo, no son tan importantes?

El funcionamiento de AMP JS

Dentro de las limitaciones que tiene Google AMP está la biblioteca de JavaScript que te comentaba en el apartado anterior. 

Y es que AMP solo permite el JavaScript asíncrono, de tal manera que la carga del HTML de la página se hace en paralelo a la carga de los recursos. Así, evitas que los recursos puedan bloquear la representación de la página.

Además, existe otra limitación importante y tiene relación con el uso de espacios seguros donde están incluidos los elementos de la página. Cada elemento debe tener un espacio predeterminado porque, una vez que se cargan los diferentes recursos, no se hacen recálculos de diseño.

Por tanto, todo lo que se carga debe tener un espacio asociado con las dimensiones exactas.

Diferencia entre AMP y responsive

¿Quizás te hayas preguntado en qué se diferencian el AMP y el responsive web design? ¡Te lo contamos a continuación!

Tanto las Accelerated Mobile Pages como las páginas web responsive funcionan en un teléfono móvil, pero tienen objetivos diferentes: 

• El diseño web responsive es un método para diseñar un sitio web de modo que funcione en cualquier dispositivo, desde un ordenador de sobremesa hasta un teléfono móvil. Su relevancia reside en su flexibilidad.
• El proyecto AMP es un marco web diseñado para ofrecer contenido a los usuarios móviles de forma instantánea. Dicho de otro modo, las AMP se centran en la velocidad.

¿En qué otros aspectos se diferencian las AMP y el responsive design?

Las AMP pueden funcionar con un sitio web existente, cuando una web responsive reemplazaría un sitio web actual. 

De hecho, aunque es posible utilizar AMP exclusivamente, también se puede añadir AMP a un sitio web existente sin necesidad de rediseñar el sitio. 

Por el contrario, la implementación de un responsive design requiere un rediseño del sitio web, reemplazando por lo tanto un sitio web existente.

Actualmente, AMP solo funciona con contenido estático, mientras que el responsive design puede utilizarse para cualquier sitio web.

Por ahora, el uso ideal para AMP son los artículos de noticias, las entradas de blog y las páginas informativas, mientras que el responsive design está mejor pensado para formularios web y aplicaciones.

¿Cómo afectan AMP y responsive a la experiencia del usuario?

Ya lo sabes, una buena experiencia de usuario es buena para tu negocio. Y más allá, el algoritmo de Google está diseñado para favorecer a los sitios web que proporcionan una buena experiencia de usuario.

El diseño web responsive puede ayudarte a ofrecer un sitio web amigable para los móviles, pero suele fallar en cuanto a la velocidad. 

Por otro lado, AMP fue diseñado desde el principio para ser altamente optimizado para la velocidad y la experiencia del usuario móvil. En definitiva, si dependes de Google para atraer tráfico en tu web, ¡toma nota! 

 ¿Quieres saber si tu página web está optimizada para móviles? Realiza la prueba de optimización ahora con la herramienta de Google Search Console. 

¿Debes implementar AMP en todas las páginas de tu website?

Google AMP, a priori, es una excelente solución para la visibilidad de tu página web en los dispositivos móviles; recuerda que es el medio más utilizado por los usuarios, por delante de ordenadores y laptops. Sin embargo, la implementación de esta herramienta en páginas que se actualizan con cierta rapidez no es muy recomendable.

Antes de tomar ninguna decisión debes marcarte unos criterios y establecer las pautas a seguir. De hecho, aunque tengas muy claro en qué URLs quieres incorporar Google AMP, es interesante que realices un testeo previo del funcionamiento de la herramienta en esas páginas.

Crea un producto mínimo viable con el que trabajar en fase beta antes de lanzarte a implementar AMP en todo tu website. Es importante que te marques estos 3 retos para comprobar si esta herramienta es eficaz en tu página:

• Cómo interfiere AMP en la UX y también cómo afecta a la experiencia de producto.
• Cómo se comporta AMP frente al diseño web de la URL.
• Cómo influye esta implementación en el workflow de los desarrolladores de tu empresa.

Conclusión

Google AMP es una herramienta que está funcionando desde el año 2015 con éxito en todas las páginas web que han decidido implementarla para conseguir un mejor rendimiento cuando son vistas a través de teléfonos inteligentes y tabletas.

A pesar de ser una garantía de éxito gracias a la rapidez y mejora de la experiencia de usuario, muchas empresas aún no han implementado la herramienta por las limitaciones de las que ya te he hablado en este artículo.

Sin embargo, no debes olvidar que el foco está puesto en la velocidad y la facilidad de lectura. Y es que una web con AMP en sus versiones móviles está muy cerca del éxito.

¿Tienes Google AMP en tu website? ¿Lo has implementado en todas las URLs? Cuéntanos en los comentarios, nos encantará leerte.