Hoy en día no es novedad que la mayoría de usuarios acceda a internet a través de sus dispositivos móviles, pensando en esto Google creo AMP. Este es un proyecto de código abierto con el fin de mejorar la web para todos. El proyecto habilita la creación de sitios web y anuncios que son constantemente rápidos, bonitos y de alta performance a través de dispositivos y plataformas.
Las páginas AMP básicamente se dividen en 3 componentes de núcleo, estos son:
AMP HTML
Es un HTMl con algunas restricciones para asegurarse un mejor performance, es simplemente HTML extendido con propiedades personalizadas. Estos elementos personalizados a los cuales nos referimos son llamados componentes AMP HTML, los cuales hacen patrones comunes fáciles para implementar en una correcta performance.
AMP JS
Asegura un renderizado veloz en las páginas AMP HTML. Está librería implementa todas las mejores prácticas para manejar la carga de recursos.
La realidad es que hace que todo venga de recursos asincrónicos externos, por lo que no hay algo en la página que pueda bloquear el renderizado.
Otra técnica de performance incluye sandboxing de todos los iframes, hace un precálculo de las capas de cada elemento en la página antes que los recursos sean cargados y “deshabilita los selectores lentos css”.
AMP CACHE
El Google AMP cache es usado para guardar páginas AMP HTML. Es un CDN proxy-based para entregar todos los documentos AMP válidos. Este junta páginas AMP HTML, sus cachés, y mejora la performance automáticamente. Cuando usamos este caché, el documento, todos los archivos js y las imágenes cargan desde el mismo origen que es usa HTTP 2.0 para máxima eficiencia.
La caché viene con un sistema de validación que garantiza que la página trabaje, y que no dependa de recursos externos.
Marcado requerido:
AMP HTML debe cumplir lo siguiente:
-
Iniciar con el doctype <!doctype html>
-
Una etiqueta html <html amp lang="en">
-
Las etiquetas <head> <body>
-
Una etiqueta <meta charset="utf-8"> como primer elemento dentro de <head>
-
También contiene una etiqueta <script async src="https://cdn.ampproject.org/v0.js"></script> como segundo elemento dentro de <head> (Este incluye y carga la librería AMP)
-
La etiqueta <link rel="canonical" href="$SOME_URL" /> dentro de <head> que apuntaría a su versión HTML si existiera, sino apuntaría a sí mismo
-
La etiqueta <meta name="viewport" content="width=device-width,minimum-scale=1"> dentro de head, se recomienda usar initial-scale=1
-
Contiene el siguiente código dentro de <head> (Hemos tratado de hacerlo legible)
<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>
- Es posible incluir definiciones schema.org, también metadata extras como las de twitter por ejemplo.
Hay situaciones particulares en las que se tiene que reemplazar las etiquetas naturales de HTML por unas equivalentes de AMP HTML.
Uno de los casos es con la etiqueta <img>
<amp-img src="welcome.jpg" alt="Welcome" height="400" width="800"></amp-img>
Así como este caso ocurre con video, audio que podemos ver a más detalle aquí https://www.ampproject.org/docs/guides/amp_replacements
El tema de estilos de presentación se trabajan dentro del mismo documento en la etiqueta "" , como podemos ver en el siguiente ejemplo:
<style amp-custom>
body { background-color: white; }
amp-img { background-color: gray; border: 1px solid black; }
</style>
Validación
Con AMP podemos usar el navegador chrome como herramienta de verificación. Solo debemos añadir "#development=1" al final de la dirección de nuestra url y mediante la consola tendremos el resultado.
El mensaje ideal es "AMP validation successful".
Un ejemplo de URL sería así :
Un detalle final, es la vinculación entre páginas AMP y no AMP si es que esa fuera la situación.
Supongamos que Google encuentra la página no AMP está necesitará saber cual es la página AMP que le corresponde para poder renderizarla por lo que debemos agregar las siguientes instrucciones para conseguirlo:
A la página no AMP debemos agregar (hacemos referencia a la página AMP que corresponde)
<link rel="amphtml" href="https://www.ejemplo.com/url/al/documento/amp.html">
A la página AMP (Hacemos referencia a la página no AMP que corresponde)
<link rel="canonical" href="https://www.ejemplo.com/url/al/documento/completo.html">
Cuando el caso es solo una página se usa solo el vinculo canónico que hará referencia a si mismo
<link rel="canonical" href="https://www.ejemplo.com/url/al/documento/amp.html">
Referencia
Documentación oficial del proyecto AMP: https://www.ampproject.org/docs/
Me pareció interesante el artículo
Añadir nuevo comentario