¿Qué es AMP HTML o Accelerate Mobile Pages?

¿Creías que tu web ya estaba completamente optimizada para que Google te rankeará en las primeras posiciones? Uno de los grandes problemas de las páginas web es que en cualquier momento te aparece una nueva tecnología que cambia las reglas del juego de Google. Primero fue el diseño web responsive o adaptar las páginas web a la navegación móvil. ¿Y ahora? AMP HTML o Accelerate Mobiles Pages de Google.

Google ha movido ficha y ha sacado AMP HTML. AMP son las siglas de Accelerate Mobile Pages de Google (Páginas Móviles Aceleradas) y como podrás imaginarlo por el nombre, esta tecnología mejora la velocidad de carga de la navegación móvil.

¿Qué es el AMP HTML y cómo funciona Accelerate Mobile Pages?

Google AMP es una plataforma con el objetivo de que los medios puedan mejorar el rendimiento de sus páginas web móviles, junto con la velocidad de carga de los textos e imágenes.

Esto no quiere decir que sea la nueva web móvil, si no que Accelerate Mobiles Pages es una ventaja para las páginas web que cuentan con muchos contenidos “de peso” como vídeos, imágenes, animaciones, gráficos, anuncios publicitarios… ya que permite que la página aumente su velocidad de carga en el móvil. Es una tecnología de publicación.

Como ya debes saber si estás atento a nuestros artículos, el pagespeed o velocidad de carga es un factor SEO de mucho peso para posicionar una web en las primeras posiciones de Google. Si es buena para el posicionamiento SEO, los desarrolladores web deben implementarlo en sus proyectos.

¿Cómo es la velocidad de carga de tu web? Haz una prueba con PageSpeed Insights de Google.

La pretensión del AMP Project está orientada a que un mismo código funcione igual en diferentes dispositivos. El AMP Project de Google se basa en el AMP HTML, un formato nacido con la tecnología web existente que permite que las páginas web de mucho peso generen otra versión web más ligera que cargue antes en móviles.

Durante este año, ya hemos visto en las búsquedas a través de Google, muchas webs cuyos contenidos en la velocidad móvil son AMP-friendly (y podemos asegurarte de que Google les ha redirigido el tráfico de búsqueda a las páginas de AMP y ha mejorado el ranking por ser AMP-friendly)

Por lo tanto, si tu pregunta es qué es el AMP Google (Accelerate Mobile Pages), es una página generada mediante AMP HTML, competencia directa de páginas como Facebook Instant Articles o LinkedIn Pulse, que consigue que páginas con muchas imágenes, vídeos o animaciones, se carguen de forma rápida, facilitando la velocidad de carga de las páginas web, el posicionamiento SEO y la experiencia de usuario.

Mejora la velocidad de carga de tu #web con AMP Clic para tuitear

¿Cómo surge el AMP Project?

El AMP Project surge después de que la compañía contactara con medios, editores y compañías tecnológicas e hiciera un ejercicio de escucha y reflexión.

Detectaron un problema: algunas páginas tardaban mucho tiempo en cargar y podían sufrir una penalización por parte de Google y la experiencia de sus usuarios no era tan buena como deberían.

Entonces buscaron la solución al acceder a una web en el móvil: una página que no tenía campos de formularios, JavaScripts externos, hojas de estilo externas, sin estilos internos y con un ancho definido donde los elementos no podían salirse de los límites predefinidos.

¿Cómo funciona AMP HTML de Google?

El proyecto de Accelerate Mobiles Pages se basa en tres partes diferenciadas:

• AMP HTML: HTML con alguna restricción para lograr un rendimiento confiable con alguna extensión para enriquecer el contenido y que no sea únicamente un formato HMTL básico.
• AMP JS: Es una biblioteca que garantiza que las páginas AMP HTML se presenten de forma muy rápida.
• Google AMP Cache: Una parte opcional del Accelerator Mobile Pages que proporcionan las páginas AMP HTML.

¿Sabes cómo funciona el AMP de Google? Clic para tuitear

AMP HTML

El AMP HTML es contenido HTML que se ha ampliado con propiedad AMP personalizadas.

Según la web de AMP Project, el archivo de HTML AMP más básico y sencillo es el siguiente:

<!doctype html>

<html⚡>

<head>

<meta charset=»utf-8″>

<link rel=»canonical» href=»hello-world.html»>

<meta name=»viewport» content=»width=device-width,minimum-scale=1,initial-scale=1″>

<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normalboth;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normalboth;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normalboth;animation:-amp-start 8s steps(1,end) 0s 1 normalboth}@-webkit-keyframes-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes-amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>

<script async src=»https://cdn.ampproject.org/v0.js»></script>

</head>

<body>Hello World!</body>

</html>

Las etiquetas de las páginas AMP HTML son, en su mayoría, etiquetas de HTML comunes. Algunas de ellas sí se reemplazan por etiquetas específicas de AMP.

Los componentes AMP HTML son precisamente estas etiquetas especializadas para páginas adheridas al proyecto de Google AMP.

AMP JS

La biblioteca AMP JS implementa las prácticas recomendadas para un rendimiento óptimo de las Páginas Móviles Aceleradas.

Administra la carga de los recursos y proporciona las etiquetas HTML que comentábamos en el párrafo anterior. De esta forma, lo que estamos garantizando es que la página se cargue de forma más rápida.

¿Sabes cuál es la optimización más importante de AMP JS?

Transforma en asincrónico cualquier recurso que provenga del exterior para que no interfiera o bloquee la representación de los elementos.

Otras optimizaciones de las páginas AMP de la biblioteca AMP JS son alojar en espacios seguros los iframes, un cálculo previo del diseño de los elementos que componen la página antes que se carguen los recursos o desactivas los CSS lentos.

Le encanta el CSS, ya que permite que podamos personalizar el estilo de nuestras webs aunque sí que existen unas normas básicas para el formato de las páginas móviles aceleradas.

Por ejemplo, los elementos de las pantallas pueden seguir teniendo un diseño web responsive, pero las dimensiones y el ratio tienen que estar explícitamente declarados en el HTML.

Accelerate Mobile Pages es un subconjunto de HTML pero con elementos personalizados que ofrecerá a las páginas web, en su navegación por móvil, un rendimiento superior y, al contar con un contenido estático, una carga instantánea. ¿Qué provoca todo esto? Una buena experiencia de usuario.

Google AMP Cache

El Google AMP Cache es una red de distribución de contenido basado en proxy para la entrega de documentos de AMP válidos.

El Google AMP Cache capta las páginas de AMP HTML, las almacena en el caché y mejora automáticamente el rendimiento de las mismas.

Las páginas móviles aceleradas que utilizan el Google AMP Cache, junto con los archivos de JS y con todas las imágenes cargándose desde el mismo origen de HTTP 2.0, logran la máxima eficiencia.

El sistema de validación del AMP Cache garantiza el funcionamiento de la página al no depender de ningún recurso externo.

Además, mediante aserciones se confirma que la página cumple con las especificaciones de AMP HTML.

¿Sabías que puedes mejorar el posicionamiento SEO con AMP?

La velocidad de carga es un factor que afecta directamente al posicionamiento SEO. Las páginas móviles aceleradas tienen una carga prácticamente instantánea por los elementos estáticos que la conforman y, por lo tanto, Google premia a las webs que tienen este diseño de páginas y mejora su posicionamiento en buscadores.

AMP es un aliado para el posicionamiento #SEO de tu #web Clic para tuitear

¿Qué te convence más, el Accelerate Mobile Pages o el diseño web Responsive?

Aunque a priori puedas pensar que se trata de lo mismo, entre el diseño web responsive y el Accelerate Mobiles Pages hay diferencias que analizaremos más adelante.

Recordemos que el diseño web adaptado para móviles es un factor que Google tiene muy en cuenta.

Hagamos un resumen del Accelerate Mobiles Pages 

• Su misión es ofrecer webs optimizadas para dispositivos móviles, cuyo valor añadido es la velocidad y sencillez.
• Está enfocado a los contenidos de una página web.
• No admiten JavaScript y utilizan un CSS minimalista para aumentar la velocidad de carga. Están enfocadas a texto.
• Las imágenes se cargan según el usuario va llegando a ellos. Esto se conoce como Lazy Loading.
• Las páginas móviles aceleradas cargan hasta un 85% más rápido que una página normal.

¿Quieres ver un ejemplo de la visualización diferente de las páginas en AMP?

• Página normal: https://nubeser.com/diseno-web-responsive/
• Página AMP Google: https://nubeser.com/diseno-web-responsive/amp/

¿Aún tienes dudas sobre qué es el AMP? ¿A qué no? ¡Únete al Accelerate Mobile Pages y crea tu página web con los códigos AMP HTML! No te olvides del diseño web responsive y su importancia (ambas pueden convivir) y mejora el posicionamiento SEO de tu web.