Site Loader

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í:

[Tweet «AMP es una manera de compilar páginas web para contenido estático de representación rápida. AMP Project«]

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.

¿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.

AMP Proyecto de Google

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.

 

Post Author: ireneqosorio

3 Replies to “AMP Proyecto de Google para web móviles”

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *