Skip to main content

Accelerated Mobile Pages




Accelerated Mobile Pages (AMP), es un marco de trabajo multiplataforma de código abierto con el que se puede incrementar significativamente la velocidad de carga de los sitios web móviles. Se basa en la disminución de CSS y JavaScript, una red de distribución de contenidos, así como de HTML modificado. El proyecto cuenta con el apoyo de Google.

Antecedentes

El uso de Internet smartphone está aumentando a un ritmo acelerado a nivel mundial. Por esta razón, el futuro de Internet será smartphone en muchas áreas. Por ende, el contenido web debe ser optimizado para los dispositivos móviles. Ni siquiera el comercio smartphone se libra del creciente uso de Internet smartphone. Los cambios en los hábitos de navegación impactan a las técnicas de diseño y adaptación de las webs que se usan para la presentación de las mismas. Para impulsar la usabilidad en la medida de lo viable, los sitios web móviles disponen que ser rápidos.

Un estudio reveló que la tasa de rebote aumenta a más del 50 por ciento si una web smartphone tarda más de 10 segundos en cargarse. El efecto de las diferencias en los tiempos de carga de la página se hace todavía más evidente en las tiendas online. Aquí, unas pocas fracciones de segundo pueden establecer si un visitante se convierte en comprador o no. La optimización de la velocidad debe ser incorporada definitivamente en la optimización smartphone. Al declarar la velocidad de la página como un factor de posicionamiento en 2010, el propio Google destacó el hecho de que las velocidades de carga de la web son un factor importante para una experiencia de usuario positiva.

Historia

El proyecto de Accelerated Mobile Pages se lanzó en octubre de 2015. La base para el establecimiento de la propuesta de código abierto forzó debates y discusiones entre editores y empresas de tecnología, donde la necesidad de cargar más rápidamente el contenido smartphone era habitualmente el tema principal. Los iniciadores, que incluyen Google, WordPress y Adobe, aspiran a crear un ecosistema smartphone completo. Este sistema debería ser beneficioso tanto para los editores como para los desarrolladores, usuarios y plataformas de consumidores. Otros socios tecnológicos incluyen la red social Pinterest, Twitter y LinkedIn. Entre las primeras editoriales en poner en práctica AMP se encuentran «Zeit» y «Frankfurter Allgemeine Zeitung» en Alemania, «Washington Artículo» y «Buzzfeed» en Estados Unidos, «The Guardian» en Inglaterra y «El País» en España.

Debido al enfoque de código abierto, es de esperar que AMP se extienda y arraigue rápidamente, al igual que el sistema operativo Android para smartphones.

Principio de funcionamiento

La velocidad de carga de una web depende principalmente del tamaño de los archivos que se van a cargar. Por ende, el marco de trabajo intenta reducir al mínimo el tamaño total de una página web. A la vez, los contenidos de la web de AMP se almacenan en caché y se ponen a disposición en un servidor proxy. Si un usuario accede a los contenidos, éstos se cargan por medio de de una red de entrega de contenidos. El código fuente de las web de AMP puede ser interpretado por todos los servidores.

  • AMP HTML: El código fuente HTML es personalizado y reducido por AMP. Sólo se produce una solicitud HTTP por llamada de página.
  • AMP JavaScript: Las webs de AMP sólo usan JavaScript asíncrono. Esto asegura una rápida renderización de la web puesto que la carga de la página no puede ser bloqueada por los recursos de JS. Si se integran archivos JavaScript de terceros, la incrustación se realiza por medio de de iframes.
  • AMP CDN: Se crea una caché de sitios web AMP en servidores proxy de todas partes. De este modo, el contenido puede ser entregado por medio de de una red de entrega de contenido basada en http 2.0. La CDN además comprueba si el portal web de AMP es funcional.

La gran utilidad de AMP es que la velocidad de carga de una web puede ser calculada y escalada con precisión de antemano. Otras mejoras incluyen la especificación del tamaño exacto del archivo para imágenes u otros medios incrustados. Cuando se carga una web AMP, la tecnología es capaz de priorizar las descargas individuales. Aquí, las posiciones de los archivos individuales en las fuentes además se interpretan al mismo tiempo del tamaño del archivo.

Los archivos CSS además se ven afectados por la optimización de la velocidad. Por ejemplo, sólo se permiten para CSS los estilos online que no superen los 50 kilobytes.

Apps

Simplemente, las Accelerated Mobile Pages no están limitadas a un área específica de la web. Las apps de e-commerce para sitios web de AMP, formularios de registro especiales, paywalls, etc. además son concebibles. Los iniciadores optaron por abstenerse de cualquier restricción previa. Con respecto a la incorporación de los sitios web de AMP en los resultados de búsqueda de Google, hasta ahora sólo se han visualizado afectados los editores de noticias. A largo plazo, no obstante, es probable que además se integren las tiendas online que disponen páginas de productos AMP especiales, o los proveedores de servicios de viaje que, por ejemplo, simplifican las reservas por medio de de sitios web AMP rápidos para usuarios móviles.

Modificaciones al código HTML

Las modificaciones del código fuente HTML son indispensables para poner en práctica las webs de AMP. Por ejemplo, a las etiquetas de medios se les da el prefijo «amp».

  • Imágenes: amp-img.
  • Vídeos: amp-video.
  • Archivos de audio: amp-audio.
  • iframes: amp-iframe.

Ejemplo en el caso de un vídeo:

 

Estas etiquetas deben utilizarse para los sitios web de AMP:
Tipo de documento:

<!doctype html>

Etiqueta de nivel superior

tag ( also works)

Link canónico en la sección :

 

Codificación en la sección:

 

Ver puerto head en la sección:

 

Referencia a AMP-CDN en la sección head:

 

Especificación de la opacidad:

<noscript><style>body {opacity: 1}</style></noscript>

Mientras que el rel-attibute y la etiqueta canónica no son obligatorios en las webs convencionales, los sitios web de AMP deben contener estos dos items en la sección head.

rel-attribute: Muestra a los rastreadores que además existe una versión del portal web AMP de la página actual.

Ejemplo:

 

Etiqueta canónica: La etiqueta canónica en el portal web de AMP apunta a la web original.

<enlace rel=“canonical” href=“https://www.mydomain.com/whole-page.html”>

Si la página AMP es el único portal web que tiene este contenido, la etiqueta canónica apunta hacia sí misma.

Importancia para el marketing smartphone

Los sitios web AMP deberían cargarse en milisegundos. Ya que los anuncios además se ven afectados por las velocidades de carga optimizadas, los anunciantes pueden usar AMP para intentar asegurarse de que sus anuncios no tengan un efecto negativo en la experiencia del usuario. Esto se debe a que actualmente, los banners publicitarios o intersticios son habitualmente percibidos como una molestia por los usuarios de Internet smartphone.

Los marcos de trabajo AMP son compatibles con varios formatos publicitarios distintos. Por ende, esta tecnología ofrece a los anunciantes una amplia gama de alternativas de promoción comercial. Ya que el marco de trabajo no depende de la plataforma, los anunciantes no se limitan a una sola empresa cuando desean publicar anuncios.

Web Links

R Marketing Digital