AMP es la abreviación de Accelerated Mobile Pages
AMP es un proyecto de software libre con el objetivo de mejorar la velocidad de carga de las páginas en dispositivos móviles, es decir que pretende mejorar la experiencia de usuario en los dispositivos móviles al acceder a contenido publicado en la web. A nivel técnico podemos decir que AMP es un HTML a dieta, ya que tiene ciertas restricciones a nivel de programación.
AMP es la apuesta de Google
AMP supone una de las apuestas más grandes de Google y que más están potenciando durante el último año. Cada vez más resultados de búsqueda incluyen el bloque de resultados AMP en una posición prioritaria de las SERP.
AMP: Vivimos muy rápido
Hace años, cuando no existía el mail o los teléfonos móviles (al menos de una forma masiva como ahora) la vida fluía a otra velocidad. Hoy en día, la inmediata velocidad de respuesta que nos permiten las aplicaciones de mensajería instantánea en el móvil hace que lo difícil sea mantener el foco en una tarea y no perderse con el sinfín de notificaciones que nos llegan de forma constante.
Esta lucha por mantener la atención, y que no sea el móvil quién nos la robe, provoca también que seamos exigentes y queramos ir al grano cuando realizamos ciertas actividades, como por ejemplo consultar algo en la web o buscar información sobre un tema determinado.
Queremos obtener la información deprisa, ya que tenemos muchas otras cosas a las que atender, y eso genera que cuando navegamos desde el móvil, lo que más nos importe sea la velocidad.
Podemos ver en el informe realizado por doubleclick sobre la importancia de la velocidad en dispositivos móviles los principales datos sobre la experiencia de usuario en móviles y su impacto en la calidad de las visitas a un site:
Velocidad, la ventaja principal de las páginas en AMP
La velocidad de carga, eso que siempre queremos mejorar mediante WPO y con la utilización de herramientas tales como PageSpeed, gtmetrix o webpagetest entre otras, deja de ser un factor importante al utilizar AMP ya que el tiempo de carga pasa a ser inexistente!
Si tenemos en cuenta que para el caso de ejemplo de la captura el tiempo medio del site es de 6 segundos, podemos ver que el impacto a nivel velocidad de carga es notable.
¿Cuales son los principales factores que ralentizan la carga de un site móvil?
El tamaño de las páginas El tamaño medio de una página para móvil es 2,5 MB, y en muchos casos esto se podría arreglar con 3 acciones concretas:
- Reducir el tamaño de las imágenes, hay que llevar la compresión en el ADN!
- Minificar los recursos, especialmente Javascript, CSS y HTML. Hay documentación de google específica sobre como hacerlo.
- Minimizar el numero de fuentes que cargamos en la página.
El orden de los elementos que cargamos en una página influye y mucho, tanto a nivel de percepción del usuario y por lo tanto afectando en la experiencia de usuario como a nivel de ralentización de la velocidad en si misma. De nuevo el sentido común es lo que se impone y eso nos lleva a priorizar la carga de los elementos que mostramos above the fold, para obtener así una renderización mucho más rápida y una mejor experiencia de usuario. También es conveniente preguntarse si hacen falta tantos elementos en la página, o que impacto tienen estos a nivel de negocio o producto.
El numero de peticiones que realiza la página es otro de los principales factores a tener en cuenta
¿Como implementar AMP?
Implementar AMP en wordpress es muy sencillo ya que existe un plug-in específico para AMP.
Para implementar AMP en otro tipo de CMS o desarrollos propios hay que tener en cuenta ciertos aspectos técnicos:
Especificaciones de código HTML en AMP
Los documentos en HTML en AMP deben contener:
- Empezar con el doctype <!doctype html>
- El tag <html ⚡> aunque también se acepta <html amp>
- Las etiquetas de <head> y <body> que son opcionales en HTML
- En el head no pueden faltar:
- Una etiqueta canonical <link rel=»canonical» href=»url original» /> para señalar la versión canónica de la URL, es decir aquella URL en la que nos hemos basado para construir su versión en AMP.
- La etiquetas <meta charset=»utf-8″>
- La etiqtea viewport <meta name=»viewport» content=»width=device-width,minimum-scale=1″>
- El código AMP style[amp-boilerplate] and noscript > style[amp-boilerplate]
Igual que en las páginas HTML es importante incluir la metadata siguiendo los principales métodos estandarizados tales como Open graph y/o schema.org.
Todas la especificaciones a nivel de HTML se pueden consultar directamente en Github
Principales consideraciones técnicas en AMP
Únicamente JS asíncrono: Para evitar que JS ralentice la carga de la página sólo se permite JS asíncrono.
Los recursos deben definir su tamaño: Las peticiones que se realizan a recursos tales como imágenes o anuncios deben especificar su tamaño en HTML con el fin de que AMP pueda cargar el diseño de la página antes de que estos se descarguen.
El CSS debe estar alineado: Así se consigue que no se hagan más peticiones a CSS y se pueda renderizar la página más rápido.
Google AMP Cache: Esta cache es una red de distribución de contenido o cdn que guarda una versión de las páginas en AMP y que las sirve desde un mismo origen incluyendo el documento, los JS y las imágenes, con el fin de poder realizarlo de la forma más rápida.
Directrices específicas para AMP
Con el fin de facilitar que Google descubra nuestras versiones de páginas en AMP necesitamos de un etiquetado específico que las relaciones con su versión canónica, para elllo:
En la página que queremos que tenga una versión en AMP añadiremos una etiqueta:
<link rel=»amphtml» href=»https://www.ejemplo.com/pagina-amp.html»> para indicar la localización de nuestra URL equivalente en AMP.
Y en la página en versión AMP tenemos que añadir:
<link rel=»canonical» href=»https://www.ejemplo.com/pagina-canonica.html»>
Para así indicar cual es su página canónica.
Implementación de herramientas de analíticas en AMP
Para implementar analytics en AMP debemos incluir la siguiente secuencia de comandos en nuestras páginas AMP:
<script async custom-element=»amp-analytics»src=»https://cdn.ampproject.org/v0/amp-analytics-0.1.js»>
Y luego activar el type como googleanalytics con el fin de activar la compatibilidad con GA.
<amp-analytics type=»googleanalytics» id=»analytics1″>
…
</amp-analytics>
Puedes utilizar distintas herramientas de analítica, tan sólo hay que adaptar los tags ya vistos en la referencia de AMP
Seguimiento de los errores en AMP mediante Google Search Console
Para validar si nuestra implementación de AMP es correcta podemos acceder a GSC en el apartado creado especificamente para ello dentro de Apariencia en el buscador
en el que podremos ver con detalle todos los errores que pueden ir apareciendo con el fin de solucionarlos
¿AMP, vale la pena implementarlo?
Sí, sin duda ya que después de ver los factores que hemos mencionado tales como:
- Velocidad de carga
- Mayor visibilidad en las SERPS por el icono ⚡ y por lo tanto mayor CTR esperado.
y a pesar de que en un principio existían ciertos problemas a nivel de medición que provocaban confusión en la medición de las sesiónes de usuario y eso generaba datos que mostraban una bajada importante en la calidad de los usuarios en AMP:
Hoy en día ya existe una solución para esto basada en la gestión del user-state en AMP.
Si te interesa saber cuales serán los próximos pasos de AMP siempre puedes consultar su Roadmap
Si quieres que te ayudemos a implementarlo, contacta con nosotros!
