AMP (Accelerated Mobile Pages o Páginas móviles aceleradas en español) es una iniciativa de proyecto de código abierto que tiene como objetivo mejorar el rendimiento de la web móvil. Actualmente vivimos en la era de los teléfonos inteligentes, por lo que todos los sitios web deberían considerar esto en su diseño. Debido a esto, nació la iniciativa AMP. AMP está pensado para dispositivos móviles y con él puede hacer que su sitio web se cargue de manera más rápida y eficiente. AMP solo carga los elementos necesarios para su página e ignora los que hacen que las páginas web se carguen lentamente en dispositivos móviles, especialmente JavaScript y scripts de terceros.

Su sitio web es más rápido con AMP pero, ¿cómo es esto posible? AMP tiene muchos componentes para imágenes, videos o cajas de luz, pero sobre todos estos, hay tres componentes principales: AMP HTML, AMP JS y AMP Cache.
AMP HTML es básicamente HTML, pero con algunas restricciones para un rendimiento confiable y para extender algunas propiedades de AMP. Aunque la mayoría de las etiquetas de AMP-HTML se parecen a las etiquetas HTML, algunas etiquetas HTML se cambian por etiquetas AMP-HTML. Por ejemplo, la etiqueta de video en AMP-HTML se convierte en amplificador de audio, y la etiqueta img en HTML se convierte en una etiqueta amp-img en la versión AMP. Es muy importante incluir el script de AMP en su HTML, sin esto, su página no puede convertirse en AMP-HTML, también es importante poner la versión normal de su página. En este ejemplo veremos cómo se ve una página AMP-HTML.

<!doctype html>
<html ⚡>
 <head>
   <meta charset="utf-8">
   <link rel="canonical" href="example.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>Hello World!</body>
</html>

La etiqueta <link rel=”canonical”> es el ancla de su página en HTML normal y la etiqueta <script async src=“https://cdn.ampproject.org/v0.js”></script> permite que su página se cargue en la versión AMP.
Para obtener más etiquetas, vaya a AMP-TAGS y si quiers crear su primera página AMP puede ir a crear su primera página AMP HTML.

LEER
Pycon Colombia: El Primer encuentro de desarrolladores Python en Colombia

AMP JS es una librería para la representación rápida de AMP-HTML. Esta librería implementa todas las mejores prácticas de rendimiento de AMP y gestiona la carga de las etiquetas personalizadas mencionadas anteriormente, todo para garantizar una representación rápida de su página. Para ver cómo funciona AMP JS con más detalle, puede ir a los componentes.

AMP CACHE es una red de entrega de contenido basada en proxy para entregar todos los documentos AMP válidos. Con AMP CACHE es posible mejorar el rendimiento de la página automáticamente porque carga el documento, todos los archivos JS y todas las imágened del mismo lugar pueden ser usadas en HTTP 2.0 para máxima eficiencia. Además,  AMP CACHE viene con un sistema de validación inmerso, lo que confirma que la página está garantizada para funcionar, y que no depende de recursos externos, como JavaScript de terceros o enlaces externos.

Con AMP CACHE  puede registrar errores de validación directamente en la consola del navegador cuando se procesa la página, lo que le permite ver cómo los cambios complejos en su código pueden afectar el rendimiento y la experiencia del usuario.

Sabiendo esto, la gran pregunta es, ¿POR QUÉ DEBO USARLO?. La respuesta es sencilla, con AMP puede hacer que su sitio web sea realmente más rápido y puede mejorar la experiencia del usuario, además de mejorar su SEO, porque cuando no tiene ningún error en la versión AMP, Google entiende que su sitio web puede indexarse, y lo hace. Google también dice que una página en la versión AMP puede cargar entre un 15% y un 85% más rápido que las páginas que no son AMP y esto puede ayudarlo con el posicionamiento de su página. Hoy en día, muchos sitios web se están construyendo en AMP VERSION, esto significa que AMP es el futuro. Por lo tanto, la elección está en sus manos, si desea mejorar la experiencia de su usuario o si aún desea que ese usuario suyo siga esperando.

LEER
Cómo crear una aplicación Django con Cookiecutter

Si quiere iniciar con AMP puede visitar Cómo construir el futuro web.


Comentarios