La velocidad a la hora de cargar páginas cuando navegamos por internet se está convirtiendo en un factor determinante a la hora de acceder a un sitio u otro. Ya nos lo demuestra Google con su forma de posicionar las webs teniendo en cuenta su velocidad de carga. Han empezado a tomar cartas en el asunto con este nuevo proyecto pero ¿Qué es AMP?
Gracias al aumento de la navegación en dispositivos móviles, o incluso con conexiones bastante lentas (cuando nos limitan la velocidad), el tamaño y tiempo de carga de las páginas web ha ido tomando una especial importancia. Esto ha ocurrido hasta tal punto en el que varias empresas grandes del sector se han unido para tratar de apoyar al usuario final, que es el verdadero consumidor de dichas páginas, y hacer que su navegación tenga la mejor experiencia posible.
En internet consumimos datos de todo tipo, desde leer páginas de noticias en las que solo aparece texto, manuales, recetas e infinidad de contenido que también tiene imágenes, hasta exclusivamente vídeo, para los mayores fans de YouTube esto es algo más obvio. Lo normal es combinar todos los tipos de contenido siempre, por lo que solemos encontrar páginas con información bien cargaditas de imágenes y en muchas ocasiones vídeos, lo que hace que resulten pesadas y lentas al cargar.
¿Qué es AMP HTML?
AMP son las siglas de Accelerated Mobile Pages (Páginas Aceleradas para móviles en español), y lo vamos a encontrar como AMP HTML ya que son una serie de etiquetas personalizadas. El AMP HTML es HTML con unas cuantas restricciones enfocadas al rendimiento y con algunas extensiones para generar contenido enriquecido solo con código HTML.
En este punto es donde entra en juego la librería AMP JS que se encarga de renderizar las páginas en AMP HTML de la forma más rápida y óptima, consiguiendo así unos mejores resultados.
En un documento escrito en código AMP HTML encontraremos dos partes, que son el cabecero donde se incluyen las librerías AMP JS (javascript), y por otro lado el cuerpo del contenido, escrito en parte con las etiquetas personalizadas. El código más sencillo que podemos generar en AMP HTML es así:
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<link rel="canonical" href="hola-mundo.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 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-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>Hola Mundo!</body>
</html>También podemos tener en cuenta dentro de este proyecto el denominado Google AMP Cache, que además de opcional se encarga de entregar nuestras páginas generadas en código AMP HTML.
¿Qué es AMP JS?
La librería AMP JS incluye todas las mejoras de rendimiento implementadas en AMP, nos permite utilizar los tags personalizados para amp y además administra la carga de nuestros recursos para garantizar la mayor velocidad de carga de nuestro contenido.
Una de las mayores optimizaciones de esta librería, es que hace que todo el contenido externo se cargue de forma asíncrona, es decir, que ningún contenido bloquea a otro al cargarse mientras se renderiza ya que se cargan de forma paralela.
Otra de las técnicas para mejorar el rendimiento que usa es convertir los iframes en cajones de arena, es decir, que se calcula el tamaño de los elementos en las páginas y se deshabilitan los selectores css lentos.
¿Qué es Google AMP Cache?
No podíamos dejarnos el caché para AMP de Google, que es uno de los creadores de este nuevo estándard. El Google AMP Cache es una red de distribución de contenido basada en proxies para todo el contenido en formato AMP HTML válido. Este Caché recoge y guarda los contenidos en AMP para mejorar el rendimiento de las páginas de forma automática.
Cuando estamos usando el Google AMP Cache, las páginas, todos los archivos JS y las imágenes de las mismas se cargan desde el mismo orígen mediante HTTP 2.0 para conseguir un mayor rendimiento. Además de esto, el sistema de caché de Google viene con un sistema de validación que garantiza que todo funcione en cada página, de forma que no haya errores en la visualización del contenido.
¿Para qué sirve AMP HTML?
Como ya habrás podido deducir, AMP HTML no está pensado para realizar aplicaciones web complejas, sino más bien para sitios de publicaciones con contenido estilo noticias y artículos. De esta forma se evita todo tipo de contenido que hace que cualquier página termine realizando una carga lenta como pueden ser librerías Javascript pesadas, contenidos dinámicos dentro de la misma página o funcionalidades que no son relevantes a la hora de leer un artículo.
El fín de AMP HTML es la simplicidad y sirve para que el usuario final tenga una página limpia, con el contenido exacto que quiere visualizar y que se cargue lo más rápido posible.
¿Cómo es una página en AMP HTML?
La base de las páginas AMP es HTML del que ya conocemos su programación, pero lo interesante está en las nuevas etiquetas que sirven para fines concretos y evitan que hagamos estructuras complejas llenas de estilos y Javascript. Antes hemos visto una página básica, pero algo más avanzado con algunas etiquetas sería algo así:
<!doctype html>
<html AMP>
<head>
<meta charset="utf-8">
<title>Sample document</title>
<link rel="canonical" href="./regular-html-version.html">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui">
<style amp-custom>
h1 {color: red}
</style>
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"headline": "Article headline",
"image": [
"thumbnail1.jpg"
],
"datePublished": "2015-02-05T08:00:00+08:00"
}
</script>
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
<style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>
<h1>Sample document</h1>
<p>
Some text
<amp-img src=sample.jpg width=300 height=300></amp-img>
</p>
<amp-ad width=300 height=250
type="a9"
data-aax_size="300x250"
data-aax_pubname="test123"
data-aax_src="302">
</amp-ad>
</body>
</html>Fuente: https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md#dctp
Podríamos separarlo en varias partes.
Markup
Al ser una serie de etiquetas creadas específicamente para mejorar el rendimiento, el marcado que nos encontramos es algo distinto de lo que estamos acostumbrados, empezando por la declaración <HTML> que quedaría algo así:
<html AMP> o <html ⚡>
Se puede declarar de cualquiera de las dos formas anteriores. Luego tenemos el rel=»canonical», que también usamos en HTML hoy en día, pero que debe estar siempre, incluso si no existe otra versión del documento, y que se indicaría marcando el nombre del archivo estático o url con un ./ delante tal y como aparece en el código de arriba.
Por otro lado tenemos la etiqueta viewport, que también existe en HTML y es necesario para las páginas responsive, aunque en este caso es obligatorio. y luego se realiza la inclusión del código js del proyecto AMP de forma asíncrona en la declaración <script async src.
Metadatos
Como puedes ver en este ejemplo se ha usado la definición JSON-LD para NewsArticle de la siguiente manera:
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"headline": "Article headline",
"image": [
"thumbnail1.jpg"
],
"datePublished": "2015-02-05T08:00:00+08:00"
}
</script>Es altamente recomendable utilizar Schema.org para generar una semántica correcta en las páginas, que a Google le encanta.
Elementos AMP HTML
Si te fijas, y como vengo comentando desde el principio del artículo, encontramos varias etiquetas específicas de este lenguaje que sustituyen partes del código HTML normal:
- <amp-img>: sirve para incluir una imagen en la página y sería la sustituta de <img>
- <amp-video>: esta etiqueta reemplaza a <video>
- <amp-audio>: con esta sustituiremos la etiqueta <audio>
- <amp-iframe>: sustituye a <iframe>
<script>: no se puede usar a menos que se haga con semántica JSON-LD.
además de eliminarse o limitarse algunas otras etiquetas. Estas estarían prohibidas:
- <frame>
- <frameset>
- <object>
- <param>
- <applet>
- <embed>
- <form> (además de inputs y todo su contenido, excepto <button> que está permitida)
Puedes revisar el resto de opciones aquí.
¿Qué desventajas tiene AMP HTML?
Principalmente las desventajas que podemos asociar ahora a AMP HTML están más bien enfocadas a la recopilación de datos (estadísticas) y a la publicidad en general. Si tenemos en cuenta que este tipo de funcionalidades en una página web utiliza librerías externas y que se han de cargar mediante la etiqueta script, podemos rápidamente darnos cuenta del problema.
AMP no permite el uso de estas etiquetas en el formato necesario para cargar publicidad ni scripts de analisis, por lo que este tipo de beneficios en muchos casos imprescindibles para la mejora de contenidos quedaría fuera del código, y por tanto el usuario final no tendría que lidiar ni con los tiempos de carga ni la publicidad implícita en las páginas.
Para solventar esto se está hablando de los paywalls o suscripciones de pago para visualizar contenido, pero a día de hoy que todo se puede encontrar gratis en internet no me queda clara cual puede ser la viabilidad de este tipo de iniciativas.
¿Qué opinas sobre AMP HTML? ¿Lo usas en tu web?
