Qué es AMP: Accelerated Mobile Pages

Escrito por Jose Vicente

AMP (Accelerated Mobile Pages) es una iniciativa de código abierto promovida por Google junto con un gran número de medios de todo el mundo y otros socios tecnológicos. Conscientes de que el tráfico desde dispositivos móviles hace tiempo que es superior al de ordenadores de escritorio y que en ocasiones la navegación desde dispositivos móviles puede ser frustrante para el usuario debido a que los sitios no siempre están correctamente adaptados para ellos, AMP nace con el objetivo de mejorar la velocidad de carga de las páginas web para móviles.

La receta que usa AMP para mejorar el rendimiento de las páginas web para móviles se basa principalmente en los siguientes elementos:

• AMP HTML: se trata de una tecnología basada en web components cuyo objetivo es generar páginas web más ligeras de HTML. El uso de HTML está restringido a las etiquetas permitidas en la especificación, algunas de ellas tienen su equivalente como la etiqueta img que pasa a ser img-amp pero en otros casos como object o frame están prohibidas.
• AMP JS: al igual que ocurre con el punto anterior, la plataforma provee de los recursos JavaScript necesarios para que los componentes de AMP HTML funcionen. En este sentido AMP restringe el uso del JavaScript a sus librerías.
• Uso de cachés: el uso de los CDN del propio proyecto permite que este tipo de servidor obtenga las páginas AMP, valide que su implementación es correcta y en caso afirmativo guarde la respuesta para servirlo al usuario de forma óptima. La validación implica que no se haga uso de recursos externos ya que lo que se pretende es que todos los recursos se sirvan desde el mismo origen mediante HTTP 2.0.

Aunque esta idea pueda parecer una evolución de las páginas adaptadas para móviles que todos conocemos, la idea más allá porque se emplea el uso de los CDN del proyecto para cachear el contenido y servirlo desde allí, además de que la implementación debe seguir unas normas más estrictas haciendo uso de los componentes que ofrece el proyecto AMP.

Mejora del rendimiento

Recordemos que el objetivo de todo esto es ofrecer páginas más sencillas y optimizadas para que la respuesta al usuario desde dispositivos móviles sea más ágil. Para conseguir esto se hace uso de técnicas de implementación WPO. Veamos algunos ejemplos:

• JavaScript asíncrono: sólo podemos hacer uso de scripts asíncronos. Recordemos que el código JavaScript puede bloquear la construcción del DOM y esto retrasa el renderizado de la página, lo que se traduce en una mayor sensación de lentitud de la página.
• Tamaño de elementos estáticos en el HTML: AMP desacopla la capa de presentación de la descarga de los recursos estáticos necesarios para completarla. Dicho de otro modo, primero descarga todo el HTML y después los recursos necesarios como imágenes, fuentes, etc. AMP necesita que se especifique el tamaño de los recursos estáticos en el HTML para ser capaz de optimizar su carga.
• Las peticiones externas están prohibidas: no está soportado el uso de extensiones externas que debido a las llamadas adicionales y JavaScript asociado pueden retrasar el renderizado de la página. Para extensiones concretas como lightbox, sliders o insertar vídeos, AMP cuenta con elementos específicos para algunos de ellos.

Pese a la sencillez y las restricciones, AMP HTML ofrece etiquetas para insertar un buen número de elementos que enriquecen el contenido como imágenes, vídeos o anuncios de redes soportadas por este tipo de implementación. Además se siguen desarrollando nuevos componentes que posibilitarán el uso de nuevas funcionalidades.

Configuración SEO de AMP

A la hora de implementar una versión AMP de nuestro contenido debemos tener en cuenta que no deja de ser una copia de las páginas que ya tenemos para dispositivos de escritorio. Por lo tanto la configuración SEO de AMP es similar a la de contenido para dispositivos móviles en URLs separadas.

Para ver un ejemplo vamos a hacer una implementación rápida mediante el plugin de AMP para WordPress, con este plugin podemos generar una versión básica AMP de nuestros posts. Google espera que otros CMS se sumen al proyecto y que implementen el soporte de forma nativa o a través de plugins. Una vez instalado y activado como cualquier otro plugin de WordPress solo tendremos que añadir /amp/ a la URL de cualquiera de nuestras entradas y podremos ver la versión AMP del mismo.

Otra opción podría ser el plugin AMP for WP que tiene más opciones de configuración.  Como se puede comprobar al navegar por la versión AMP su diseño es más sencillo que el diseño responsivo, aunque con plugins AMP para WordPress ya es posible incluir  elementos de navegación como el menú de tipo hamburguesa, artículos relacionados o comentarios.

Plugins más avanzados como este permiten incluso instalar temas exclusivos AMP que permiten distintos tipos de personalización adicionales y una apariencia más similar a la versión responsiva del contenido. A medida que vayan apareciendo nuevos elementos AMP será posible incorporar nuevas funcionalidades.

Como ya hemos dicho, debemos establecer mediante etiquetas la relación entre las versiones originales y las AMP, por lo tanto desde todas las páginas de nuestro sitio que dispongan de versión AMP incluiremos una etiqueta link rel=»amphtml» cuyo href sea la URL de la versión AMP.

Por otra parte debemos indicar con la etiqueta canonical en la versión AMP en qué URL se encuentra el contenido equivalente de la versión de escritorio.

Con esto sugerimos a Google que no indexe la URL de la versión AMP para evitar que sea considerado como contenido duplicado de la versión de escritorio. Pero debemos recordar que no se trata solo de generar estas páginas alternativas, si no que debemos hacer uso de las etiquetas y normas de programación de AMP HTML para que la implementación sea válida.

Si analizamos el código html de la página veremos que se hace uso de etiquetas AMP HTML donde por ejemplo la etiqueta html se acompaña del término amp o las etiquetas img pasan a ser img-amp. Para ver los ejemplos de uso oficiales de la plataforma podemos acceder a la página del proyecto para crear nuestra primera página AMP.

¿Y qué pasa con el diseño responsivo?

Inicialmente el diseño adaptativo llegó con la idea de conseguir que el contenido de un sitio Web fuera accesible desde cualquier tipo de dispositivo. Pero después de algunos años de bagaje los desarrolladores empiezan a sufrir los quebraderos de cabeza que conlleva el adaptar un sitio a cada tipo de dispositivo. En muchos casos el problema radica justo en eso, la adaptación de un sitio existente a dispositivos móviles sin seguir una metodología mobile-first design que por otro lado no siempre hace óptima la navegación desde dispositivos de escritorios.Con la llegada de nuevos dispositivos como wearables o dispositivos multimedia como los SmartTV el problema se ha acusado y queda patente que es complicado adaptar un mismo contenido a distintos dispositivos desde los cuales los usuarios además suelen tener distintas necesidades de contenido para una misma página. Es necesario por lo tanto estar actualizando continuamente el diseño de nuestro sitio para cumplir con las necesidades de acceso de los usuarios teniendo en cuenta nuevos frameworks que aparecen e incrementando con esto la carga de código en muchos casos, lo que afecta negativamente en el tiempo de carga de nuestro sitio y por lo tanto el WPO. Por lo tanto vemos que el diseño responsivo no es la panacea y AMP llega para cubrir los huecos que esta filosofía de diseño y desarrollo de sitios Web no está cubriendo de forma óptima.

AMP en los SERP

Google muestra páginas AMP en los resultados de búsqueda haciendo uso de un carrusel de noticias horizontal para búsquedas desde dispositivos móviles.
Al igual que ocurrió con la incorporación del bloque de Google News en los resultados orgánicos, este carrusel desplaza hacia abajo los resultados orgánicos mostrando solo los medios que se hayan adaptado las páginas de noticias a esta nueva tecnología. Esto debería producir una reducción de impresiones y clics aunque el medio en cuestión consiga aparecer en buenas posiciones por encima del carrusel de noticias, ya que el carrusel siempre incluye una imagen de la noticia, lo que mejora la visibilidad de este tipo de resultados.

Al hacer clic en uno de estos enlaces accedemos a la noticia sin salir de Google ya que realmente este sirve el contenido desde el CDN del proyecto AMP haciendo uso de un iframe y manteniendo una barra de color azul en la parte superior de la página destinada a volver a los resultados de búsqueda. Desde dentro de la noticia podremos acceder al resto de noticias del carrusel desplazándonos con movimientos laterales, lo que favorece la navegación hacia noticias relacionadas en medios de la competencia. Si hacemos clic en cualquier otro enlace de la página, este contenido se abrirá en una nueva ventana y en ese caso sí accederemos al contenido desde el servidor del propietario del contenido.

Este planteamiento mejora la velocidad de carga con lo que Google se reafirma en la idea de que los sitios más rápidos gustan más a los usuarios, pero hay limitaciones que seguramente no sean tan bien recibidas como el hecho de que el contenido se sirva desde los servidores de Google escapando del control del medio o las reducidas posibilidades actuales de análisis de los datos de tráfico si hacemos uso de una de plataformas de analítica que no estén asociadas al proyecto.

Por el momento no hay confirmación por parte de Google de que AMP se vaya a usar en el resto de módulos del Universal Search, por lo que actualmente el foco está centrado en los medios y su incorporación a través del módulo de Google News. Pero si en un futuro se plantea su uso en otros módulos, los medios que obtengan tráfico de ellos se verán abocados inevitablemente a implementar esta tecnología en sus sitios si quieren seguir manteniendo su visibilidad.