¿Qué son las páginas AMP?
Las páginas AMP o Accelerated Mobile Pages, es un proyecto open-source de Google, Twitter y otras compañías importantes diseñado para crear páginas para dispositivos móviles con una velocidad de carga muy elevada.
Consisten básicamente en una versión muy ligera y simplificada de página HTML para que el contenido de esa página necesite muchísimo menos tiempo en cargar. Según algunas pruebas que se han hecho utilizando la métrica Speed Index las páginas AMP pueden llegar a ser entre un 15% y un 85% más rápidas que las páginas web normales.
Como una imagen vale más que mil palabras te dejamos un esquema (haz click para ampliarlo) y un vídeo de MOZ en el que explican en qué consisten las páginas AMP.
¿Por qué las páginas AMP son tan rápidas?
Como ya hemos dicho se trata de una versión HTML simplificada y muy ligera.
Esto implica que determinados tags HTML no están permitidos (por ejemplo los forms).
Además también necesitas utilizar un código CSS ligero y específico por lo que determinados estilos CSS también se quedan fuera.
Por último, si eres un fan de JavaScript, traigo malas noticias, su uso no está permitido y únicamente puedes utilizar algunas librerías concretas y muy específicas de AMP, para permitirte ciertas cosas como Lazy Loading.
Con las páginas AMP todo está pensado en pro de la facilidad de lectura y velocidad.
Por ejemplo, una imagen no carga hasta que has hecho scroll y esa imagen aparece en pantalla – todo eso controlado desde JavaScript.
Otra de las características importantes y destacables de las páginas AMP es que están pensadas para ser totalmente cacheables, es decir que Google pueda almacenar en caché el contenido completo de esa página, de forma que el usuario ya no tenga que descargarla desde tu servidor; todo en pro de la velocidad.
Según algunas pruebas iniciales, las páginas AMP pueden llegar a tener una velocidad 4 veces superior y reducir en 8 veces los datos utilizados frente a las páginas optimizadas para móviles que no son AMP.
Típicamente una página AMP tarda menos de medio segundo en cargar completamente frente a los 3 segundos promedio habituales.
¿Cómo funcionan las páginas AMP?
Ya vimos que las páginas AMP prescinden de casi todos los elementos JavaScript y algunos CSS, por lo que las páginas que más sentido tiene convertir o crear en AMP son las páginas de portales de noticias, blogs…todas aquellas en donde predomine el texto y podamos prescindir de JavaScript y determinados elementos CSS.
Por un lado tenemos la versión ligera y simplificada, de la que ya hemos hablado.
Para ello tendremos que seguir la estructura la especificación y estructura AMP a la hora de crear nuestras páginas.
Por otro lado se encuentra todo lo referente al tema de la caché.
Una vez las páginas AMP hayan sido validadas estás se almacenarán en la caché de Google -gstatic.com- para se distribuídas más rápidamente a los usuarios.
Ambas versiones AMP -la almacenada por Google y almacenada en tu propio servidor- contendrán una etiqueta rel canonical hacia la versión original de esa página.
Una de las características que hemos visto, es que todo lo referente a JavaScript se queda fuera. ¿pero entonces cómo vamos a integrar Analytics y otros servicios en estas páginas?
Con las páginas AMP la manera de hacerlo -por ahora- es a través de un pixel de seguimiento, con el que podrás seguir utilizando Analytics sin problemas e incluso anuncios apuntando hacia estas páginas.
Restricciones de las páginas AMP
Para que las páginas AMP sean muy ligeras y rápidas tienes que aplicar ciertas restricciones, estas son algunas de las más importantes:
- Tan sólo se permite JavaScript de AMP.
- No se permiten elementos de entrada de datos («input», «textarea», «checkboxes», etc.)
- Los estilos CSS no deben de exceder los 50KB y tienen que ser declarados en una etiqueta de la cabecera.
- Algunas etiquetas HTML habituales no son válidas y son reemplazadas por su versión AMP.
«amp-img» reemplazando a la etiqueta «img», «amp-youtube» para insertar vídeos desde youtube…
Cómo crear una página AMP
Si quieres crear una página AMP te recomiendo que revises y completes este tutorial para familiarizarte con todas las restricciones y posibilidades del lenguaje. Con este tutorial aprenderás a:
- Crear tu primera página con extensión AMP HTML
- Añadir una imagen
- Hacer una preview de la página antes de publicarla
- Validarla con el validador de Google
- Prepararla para publicarla
