Qué es AMP y en qué consiste
AMP un conjunto de reglas y estilos que componen framework basado en HTML, CSS y JS para desarrollar un entorno web que mas amistoso con los dispositivos móviles, haciendo que mejoren la velocidad de carga y optimicen los recursos como el caché, imágenes e iframes.
AMP es el acrónimo de Acelerate Mobile Pages es un proyecto open source que busca la mayor velocidad de carga en sitios móviles puedes visitar su página en:
https://www.ampproject.org/
El tráfico móvil en España es de un 60% y la tendencia aumenta año tras año, es normal que cada vez mas gestores de contenido necesiten buscar alternativas para acelerar la carga en dispositivos móviles dado que cada segundo cuenta, esto ha hecho que AMP sea recibido con los brazos abiertos por la comunidad de desarrolladores ya que también viene de la mano de Google.
La base de AMP es HTML por lo cual es muy fácil de adoptar, para sitios de nueva creación, el problema viene dado en webs ya existentes en las que se quiera optimizar con AMP el contenido anterior, ya que debe atender a unas determinadas reglas para que funcione correctamente, ya que la validadción de la implantación de AMP en un sitio por Google es el "Goal" a seguir.AMP dispone de su propia librería de Javascript AMP JS la cuál está optimizada por Google, también Google dispone de optimización de caché para AMP lo que hace que los tiempos de respuesta de los servidores sean los correctos ya que puede servir la página ya renderizada desde el propio CDN de AMP una vez Google valida el código AMP.
AMP tiene su propio marcado y hay elementos indispensables para que pueda ser validado, la sintaxis es simple aunque hay reglas que debemos aplicar como indicar el tamaño de las imágenes y elementos multimedia.
Para explicar mejor como funciona lo mejor es poner un ejemplo de qué es AMP :
<!doctype html>
<html amp lang="es">
<head>
<meta charset="utf-8">
<title>Probando AMP</title>
<link rel="canonical" href="http://example.ampproject.org/article-metadata.html" />
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"headline": "Open-source framework for publishing content",
"datePublished": "2015-10-07T12:02:41Z",
"image": [
"logo.jpg"
]
}
</script>
<style amp-boilerplate>body{ aquí van los scripts de AMP }
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>
<h1>Esto es para móviles</h1>
</body>
</html>
Como puedes ver la sintaxis cambia poco pero lo que es cierto es que hay algunos elementos obligatorios como son los scripts y los marcados.
Es muy importante incluir :
<link rel="canonical" href="$SOME_URL" />
Para indicar la versión HTML de escritorio si existe previamente, esta práctica es muy recomendable aunque no sea en AMP.
AMP y WordPress.org:
Dado que un 24% de las webs que existen en el mundo están hechas con wordpress el plugin para AMP no se ha hecho esperar, dado que ya de sí wordpress cuenta con una rémora en la velocidad que hace que cualquier tipo de optimización sea muy importante, en especial en sitios que arrastran ya un gran corpus de contenido.
No quiere decir que este plugin vaya a solucionar todos tus problemas de carga pero puede ser interesante si es compatible con tu plantilla.
https://es.wordpress.org/plugins/amp/Como puedes ver es un trabajo extra añadido pero merece la pena dado que los resultados pueden ser muy interesantes, en especial en sitios que tienen problemas de velocidad de carga.