Veclix eCommerce Solutions

Qué es AMP: Accelerated Mobile Pages

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
Ejemplo de página AMPRecordemos 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. Por ejemplo, la versión AMP del post http://www.vicentesabuco.com/que-es-el-seo/ será la página http://www.vicentesabuco.com/que-es-el-seo/amp/. Como podemos ver en la siguiente captura la versión AMP (derecha) tiene un diseño más sencillo que el diseño AMP (izquierda) y carece de elementos de navegación como el menú de tipo hamburguesa.

Comentarios

comentarios

Autor: