Las últimas notícias sobre SEO y Marketing Digital en nuestro Blog de Marketing Digital 

¿Qué es AMP? Accelerated Mobile Pages

Por
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" /> par