Accelerated Mobile Pages (AMP), en español significa páginas móviles aceleradas. Este proyecto Open Source de Google se centra en optimizar la carga de las páginas web en dispositivos móviles, mejorando la experiencia de los usuarios.
La tendencia indica que se incrementa la navegación en móviles y se reduce un tanto en computadoras de escritorio como te comenté en mi artículo sobre Uso del móvil en la estrategia de marketing de las empresas basado en estadísticas de Tendencias Digitales.
Algunas web se refieren a AMP como un framework, sistema, estructura o un proyecto como lo presentó Google en su momento, quién en la web oficial lo define así:
Es un proyecto de software libre creado con el objetivo de mejorar la experiencia online para móviles con un framework para desarrollar páginas de contenido que se procesen rápidamente de forma constante.
Y se explica:
Como proyecto, AMP es una combinación de optimizaciones que permitirán una carga más rápida de tus páginas web. Sin embargo, esta no es la su mayor ventaja ya que el beneficio máximo es que las hace rápidas de modo que se puedan validar.
AMP es una manera de compilar páginas web para contenido estático de representación rápida. AMP Project Share on X
¿Qué no es AMP (AMP Accelerated Mobile Pages)?
Algunas prácticas pueden ayudar a optimizar las páginas web pero no es equivalente a implementar desde 0 renderizado del código para lograr mayor beneficio en móviles. La siguiente lista extraída de la web oficial de AMP Project te orientará:
- Reemplazar las referencias de imagen con imágenes de tamaño a la vista del visor
- Imágenes en línea visibles por encima del doblez
- Variables CSS en línea
- Componentes extendidos de precarga
- Minificación del código HTML y CSS.
¿Cómo se estructura AMP (Accelerated Mobile Pages)?
AMP combina 3 estructuras diferentes para optimizar tu página web:
AMP HTML
Se trata de HTML con algunas restricciones para lograr un rendimiento confiable, y con algunas extensiones para compilar contenido enriquecido más allá del formato HTML básico.
Los documentos AMP HTML reemplaza algunas etiquetas HTML comunes específicas sin afectar su usabilidad, pueden subirse a cualquier servidor web y ser leídas como cualquier página HTML. Sin embargo, por su diseño como AMP (Accelerated Mobile Pages) será atendidos de forma distinta para incrementar su rendimiento.
AMP JS
Esta biblioteca garantiza la representación gráfica de todas tus páginas AMP HTML
AMP JS es una biblioteca que implementa todas las prácticas recomendadas de AMP, administra la carga de recursos y proporciona las etiquetas personalizadas. Todos lo originado por recursos externos se transforma en asíncrono para hacer eficiente la carga de la página AMP y evitar bloqueo de los elementos que la componen.
Script asíncronos
Una de las características de esta biblioteca es que no permite incluir JavaScript de autor para control de páginas interactivas pero si en iframes, más esto no bloquea la representación de la página.
Recursos ordenados estáticamente
Las páginas AMP se muestran sin esperar a que se descarguen los recursos, se redefina el tamaño y posición de los elementos. Tan solo es necesario una llamada HTTP para diseñar por completo la página, en AMP se desacopla el diseño del documento del diseño del recurso. Se prioriza la carga de recursos
Bloqueo de representación de las páginas
AMP (Accelerated Mobile Pages) no permite que los recursos externos bloqueen la representación de las páginas, para esto se le debe indica en el código al sistema AMP que viene una etiqueta de inserción del recurso. Es decir, se inserta un marco para etiquetas sociales así:
Mostrar tuits de Twitter
<script async custom-element=”amp-twitter” src=”https://cdn.ampproject.org/v0/amp-twitter.0.1.js”></script>
Instagram embebido
<script async custom-element=”amp-instagram” src=”https://cdn.ampproject.org/v0/amp-instagram.0.1.js”></script>
Publicaciones de Facebook
<amp-facebook width=486 height=657
layout=”responsive”
data-href=”https://www.facebook.com/zuck/post/1010259351648745″>
</amp-facebook>
Videos de Facebook
<amp-facebook width=552 height=574
layout=”responsive”
data-embed-as=”video”
data-href=”https://www.facebook.com/zuck/videos/1010259351648745/”>
</amo-facebook>
Elementos CSS alineados y de tamaño limitado
AMP HTML solo permite estilos de página en línea que no superen 58Kb para reducir o eliminar la realización de muchas solicitudes HTTP de la ruta de acceso, ya que los CSS bloquean la representación y carga de las páginas.
Optimiza las fuentes web
Las fuentes web son descargadas y luego se muestra una representación de la página solicitada debido a que todo está en el CSS en línea y no hay solicitus HTPP que lo impidan.
Minimización de recálculo de estilo
Al estar los CSS en línea se garantiza el valor máximo de recálculo de estilo por cuadro
Las animaciones deben adaptarse a unas reglas especiales en el CSS, ya que AMP solo permite realizar animaciones y transiciones en transformación y opacidad para que no se necesite el diseño de la página.
Google AMP Caché
Esta red de distribución de contenido basada en proxy para la entrega de documentos válidos captura las páginas AMP HTML desde el origen que usa HTTP 2.0, verifica que no depende de recursos externos para almacenarlas en la caché y mejora su rendimiento automáticamente. Este proceso verifica que cumple la norma AMP HTML.
Verifica en este enlace tu página AMP HTML.
Consideraciones adicionales
- Se recomienda incorporar en los documentos creados con AMP HTML los estándar de metadatos, como Twitter Cards, Protocolo Open Graph, etc.
- Marcar los documentos AMP HTML con schema.org/CreativeWork, schema.org/NewsArticle o schema.org/BlogPosting.
- AMP HTML admite extensiones para recursos como lightbox, Instagram embebido, Twitter, publicaciones de Facebook, Videos de Youtube, etc.