Páginas móviles aceleradas

Páginas móviles aceleradas (AMP), es un marco multiplataforma de código abierto con el que puede aumentar significativamente la velocidad de carga de los sitios web móviles. Se basa en el declive de CSS y JavaScript, una red de distribución de contenido, así como HTML modificado. El proyecto cuenta con el apoyo de Google.

Fondo

El uso de Internet de los teléfonos inteligentes está aumentando a un ritmo acelerado a nivel mundial. Por esta razón, el futuro de Internet será un teléfono inteligente en muchas áreas. Por tanto, el contenido web debe estar optimizado para dispositivos móviles. Ni siquiera el comercio de teléfonos inteligentes se libra del creciente uso de Internet para teléfonos inteligentes. Los cambios en los hábitos de navegación repercuten en las técnicas de diseño y adaptación de los sitios web que se utilizan para su presentación. Para impulsar la usabilidad donde sea posible, los sitios web móviles deben ser rápidos.

Un estudio reveló que la tasa de rebote aumenta a más del 50 por ciento si un teléfono inteligente web tarda más de 10 segundos en cargarse. El efecto de las diferencias en los tiempos de carga de las páginas es aún 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 velocidad definitivamente debería incorporarse a la optimización de teléfonos inteligentes. Al declarar la velocidad de la página como un factor de clasificación en 2010, el propio Google destacó el hecho de que las velocidades de carga web son un factor importante para una experiencia de usuario positiva.

Historia

El proyecto 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 el contenido de los teléfonos inteligentes más rápidamente solía ser el tema principal. Los iniciadores, que incluyen a Google, WordPress y Adobe, aspiran a crear un ecosistema completo de teléfonos inteligentes. Este sistema debería ser beneficioso tanto para los editores como para los desarrolladores, los usuarios y las plataformas de los consumidores. Otros socios tecnológicos incluyen la red social Pinterest, Twitter y LinkedIn. Entre las primeras editoriales en implementar AMP se encuentran «Zeit» y «Frankfurter Allgemeine Zeitung» en Alemania, «Washington Article» y «Buzzfeed» en Estados Unidos, «The Guardian» en Inglaterra y «El País» en España.

Debido al enfoque de código abierto, se espera que AMP se propague y se arraigue rápidamente, al igual que el sistema operativo Android para teléfonos inteligentes.

Principio de operación

La velocidad de carga de un sitio web depende principalmente del tamaño de los archivos que se van a cargar. Por lo tanto, el marco intenta minimizar el tamaño total de una página web. Al mismo tiempo, el contenido del sitio web de AMP se almacena en caché y está disponible en un servidor proxy. Si un usuario accede al contenido, se carga a través de una red de distribución de contenido. Todos los servidores pueden interpretar el código fuente de los sitios web de AMP.

• HTML de AMP: AMP personaliza y reduce el código fuente HTML. Solo se produce una solicitud HTTP por llamada de página.
• JavaScript de AMP: Los sitios web de AMP solo utilizan JavaScript asincrónico. Esto asegura una representación rápida de la web, ya que los recursos JS no pueden bloquear la carga de la página. Si se incrustan archivos JavaScript de terceros, la incrustación se realiza mediante iframes.
• AMP CDN: Se crea un caché de sitio web de AMP en servidores proxy en todas partes. De esta manera, el contenido se puede entregar a través de una red de entrega de contenido basada en http 2.0. El CDN también verifica si el portal web de AMP es funcional.

La gran utilidad de AMP es que la velocidad de carga de un sitio web se puede calcular y escalar con precisión de antemano. Otras mejoras incluyen especificar el tamaño de archivo exacto para imágenes u otros medios incrustados. Cuando se carga un sitio web de AMP, la tecnología puede priorizar las descargas individuales. Aquí, las posiciones de los archivos individuales en las fuentes también se interpretan al mismo tiempo que el tamaño del archivo.

Los archivos CSS también se ven afectados por la optimización de la velocidad. Por ejemplo, solo los estilos en línea que no superen los 50 kilobytes están permitidos para CSS.

Aplicaciones

Simplemente, las páginas móviles aceleradas no se limitan a un área específica de la web. También son concebibles aplicaciones de comercio electrónico para sitios web de AMP, formularios de registro especiales, muros de pago, etc. Los iniciadores optaron por abstenerse de cualquier restricción previa. Con respecto a la incorporación de sitios web AMP en los resultados de búsqueda de Google, hasta ahora solo los editores de noticias se han visto afectados. Sin embargo, a largo plazo, es probable que también se integren tiendas online que tengan páginas de productos AMP especiales, o proveedores de servicios de viajes que, por ejemplo, simplifiquen las reservas a través de sitios web AMP rápidos para usuarios móviles.

Modificaciones al código HTML

Las modificaciones al código fuente HTML son esenciales para implementar sitios web AMP. Por ejemplo, las etiquetas de medios tienen el prefijo «amp».

• Imagenes: amp-img.
• Videos: amp-video.
• Archivos de sonido: amplificador de audio.
• iframes: amp-iframe.

Ejemplo en el caso de un video:

Estas etiquetas deben usarse para sitios web de AMP:
Tipo de Documento:

Top level label

tag (also works)
Enlace canónico en la sección:

 
Codificación en sección:

 
Ver puerto de cabeza en la sección:

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

 
Especificación de opacidad:


Si bien el rel-attibute y la etiqueta canónica no son obligatorios en los sitios web convencionales, los sitios web de AMP deben contener estos dos elementos en la sección principal.

atributo rel: muestra a los rastreadores que también hay una versión del portal web AMP de la página actual.

Ejemplo:

 
Etiqueta canónica: la etiqueta canónica del portal web de AMP apunta a la web original.


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



Importancia para el marketing de teléfonos inteligentes

Los sitios web de AMP deberían cargarse en milisegundos.  Dado que los anuncios también se ven afectados por las velocidades de carga optimizadas, los anunciantes pueden utilizar AMP para intentar asegurarse de que sus anuncios no tienen un efecto negativo en la experiencia del usuario.  Esto se debe a que, en la actualidad, los usuarios de Internet de teléfonos inteligentes suelen percibir los banners publicitarios o los intersticios como una molestia.

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



Enlaces web