Qué es AMP y por qué deberías implementarlo

| 2020-03-12 | No hay comentarios »

AMP es Accelerated Mobile Pages por sus siglas en inglés. Se trata de una iniciativa de Google junto a grandes socios de la tecnología para promover un código abierto que permita mejorar la conexión a Internet desde los smartphones.

Para nadie es un secreto, mucho menos para Google, que gran cantidad de los usuarios del navegador se conectan desde sus teléfonos inteligentes.

Solo basta con echar un vistazo a nuestro alrededor: al menos una persona en un espacio cerrado se encontrará chequeando sus redes o comprando entradas para un concierto desde su teléfono móvil.

Incluso, muchas consultas de precios y servicios se hacen a través de las páginas web de los negocios, y estas visitas se hacen mediante un smartphone que, por lo general, se encuentra a la mano del internauta.

¿Qué es AMP (Accelerated Mobile Pages)?

AMP es una herramienta básica destinada a acelerar las páginas móviles y hacer que se ejecuten más rápido en dispositivos móviles.

Las AMP se crearon para mejorar la velocidad y la experiencia del usuario, en todos los dispositivos y plataformas, mediante la reducción de muchos de los componentes que reducen la velocidad de las páginas web.

Las páginas AMP rinden mucho más rápido que las páginas web normales. Originalmente creado para artículos de noticias y publicaciones de blog, AMP finalmente incorporará otros tipos de piezas de contenido y plataformas.

Por su parte, Google ha creado un carrusel de noticias AMP, específicamente para este tipo de páginas, que aparece en los resultados de búsqueda de dispositivos móviles.

Las páginas de AMP suelen ser copias de páginas web existentes en una URL separada, compuesta por AMP HTML, AMP JS y una cantidad limitada de CSS.

Para acelerar el tiempo de carga, AMP elimina las páginas HTML y almacena en caché el contenido en los servidores de Google y sirve contenido desde allí, utilizando la red de Google para entregar el contenido.

Por otro lado, Google también pre-procesa las páginas AMP en SERPs antes de que el usuario las visite, lo que permite tiempos de carga casi instantáneos.

La carga asíncrona carga el contenido más rápido, mientras que el soporte de srcset (atributo propio el elemento img) obtiene la definición correcta de imagen por dispositivo.

Mediante el uso de la descarga inteligente de recursos, AMP puede descargar contenido dentro de la ventana gráfica primero, antes de descargar contenido fuera de la misma.

Cabe recalcar que todo esto que hemos explicado puede ser rastreado mediante Google Analytics.

Además, AMP utiliza muchos componentes adicionales para aumentar la interactividad de las páginas de este tipo, incluidos amp-iframe y amp-lightbox.

Dado que las páginas AMP son páginas separadas de la versión principal, se requiere más rastreo y, por lo tanto, se produce más carga en el servidor web.

Por lo tanto, si implementas AMP para todo tu sitio web, esto posiblemente duplicará la cantidad de tiempo que Google invierte en rastrearlo.

Si bien la implementación técnica de AMP significa crear más páginas en tu sitio web, Google no indexa estas páginas de AMP, por lo que el recuento de páginas no se ve afectado.

¿Cómo funciona en los dispositivos móviles?

El complemento o plugins representa las páginas web al eliminarlas de todos los elementos HTML que no se requieren en los móviles.

Por ejemplo, si incluyes códigos JavaScript en tu página web, AMP los eliminará. En otras palabras, no se procesarán a menos que estés utilizando la biblioteca básica de AMP JS.

En esencia, al reducir los elementos HTML, AMP permite que tus páginas se carguen más rápido.

Además, hay un complemento de WordPress AMP que permite a los especialistas en marketing de contenidos y escritores publicar las versiones de AMP de sus publicaciones con un solo clic.

En resumen, de esta manera funciona AMP para los dispositivos móviles:

  • Google premia los sitios web que brindan una experiencia de usuario amigable para dispositivos móviles con un mejor ranking.
  • AMP es un proyecto que te permite adaptar tus páginas para una mejor experiencia móvil.
  • Ya que WordPress es el CMS más popular de estos días, también está disponible un complemento de WP para que tu contenido esté listo para AMP.
  • AMP elimina las páginas de la mayoría de los elementos HTML no deseados.
  • Puedes usar una versión simplificada de CSS solamente. Además, debes validar correctamente tu sitio web para asegurarte de que funciona con AMP.
  • Puedes usar JavaScript pero solo desde la biblioteca provista por AMP.
  • Si deseas tener videos en tus publicaciones, necesitas usar las extensiones aprobadas por AMP.
  • No está permitido utilizar formularios en tus páginas / artículos.

Sin embargo, algunas cosas están a punto de cambiar, ya que Google anunció otra característica interesante que se implementará a través de este proyecto.

Se llama AMP Stories y, como su nombre indica, llevará a AMP más allá de sus límites iniciales.

La función AMP Stories se anunció en AMP Conf en Amsterdam. La idea no es nueva, si pensamos en Instagram y Snapchat.

Además, AMP Stories también incluirá contenido de pantalla completa que funciona en todos los dispositivos móviles y de escritorio. Admite llegar a medios con videos e imágenes nativas, animaciones e interacciones.

AMP Stories se creó con la misma tecnología que impulsó todo el proyecto AMP y, por lo tanto, todo el contenido publicado a través de Stories se cargará rápida y sin problemas en dispositivos móviles.

¿Cuáles son sus ventajas?

En líneas generales, la principal ventaja de las AMP es la mejora de la experiencia de usuario en los dispositivos móviles, ya que nos encontramos en la era mobile y eso no cambiará de la noche a la mañana.

Por otro lado, la velocidad de carga siempre será positiva tanto del lado de Google como del lado del usuario, y esto se puede traducir en mayor tráfico y posicionamiento para la página web.

Conclusión

Implementar AMP es la mejor manera de reducir el tiempo de espera de tus usuarios en tu página web dentro de sus dispositivos móviles.

Un eCommerce e incluso una tienda offline siempre se va a deber a sus consumidores, y son ellos mismos los que ingresarán a tu página si están interesados en tus productos o servicios.

Por lo tanto, mejorar su experiencia de usuario debería ser un “must” para que las conversiones aumenten.

Al implementar AMP en tu web, deberás tomar algunas consideraciones en cuenta acerca de los elementos de contenido para que la experiencia de tus usuarios sea agradable y completa:

  • Cabecera sencilla: lo mejor es que sea una franja de un color específico con tu logo; mientras más simple, mejor.
  • Pie de página: puede ser incluso más simple que la cabecera.  Podrías colocar algunos enlaces o incluso no colocar nada.
  • Diseño responsive: al hacer todo esto y al implementar AMP, debes pensar en mobile todo el tiempo, pues no es la idea llenar de diseños complejos a tu web.
  • Busca la extensión amp-sidebar para tener alternativas a menús, sidebars y otros elementos de navegación complejos que no deberían de estar o al menos no deberían de ser intrusivos.
  • Considera usar la extensión amp-social-share si deseas incluir botones sociales, enlaces y otros elementos para poder compartir tu contenido.
  • Es recomendable que coloques un enlace visible a tu página/contenido original en HTML, puesto que los buscadores de contenido no todo el tiempo van a preocuparse por hacer visualización a la fuente original.

Acerca del autor: Rodrigo Paszniuk

Ingeniero Informático, amante de la tecnología, la música, el ciclismo y aprender cosas nuevas.