Las 9 últimas actualizaciones de AMP que mejoran la experiencia del usuario más allá de velocidades de carga de página más rápidas

Desde que Google anunció AMP en 2015 para aumentar la velocidad de carga de la página y mejorar la experiencia general del usuario móvil, el marco de código abierto ha seguido creciendo en popularidad.

No solo eso, el marco se ha actualizado significativamente para admitir una amplia gama de elementos en la página, mejores funciones y opciones, e interfaces mejoradas, todo para continuar mejorando la experiencia del usuario.

Estas son algunas de las últimas actualizaciones de AMP.

9 actualizaciones de AMP que quizás aún no conozcas

1. Cambios firmados

Cuando se originó AMP, Google hizo concesiones para ofrecer contenido web de carga instantánea que preserva la privacidad. Una era que las URL que se mostraban en las barras de direcciones comenzaban con "google.com/amp" en lugar del dominio del editor:

Esta fue una de las críticas más destacadas de AMP. Las empresas no querían que Google mostrara la URL de AMP en lugar del dominio del que realmente proviene el contenido, ya que los nombres de dominio son esenciales para la marca y la publicación de contenido.

En abril de 2019, Google anunció una solución: una forma de mostrar la URL original del contenido y al mismo tiempo conservar las capacidades de carga instantánea. Esa solución son intercambios firmados.

Google afirma:

Un intercambio firmado es un formato de archivo, definido en la especificación de empaquetado web, que permite al navegador confiar en un documento como si perteneciera a su origen. Esto le permite utilizar cookies y almacenamiento de origen para personalizar el contenido y simplificar la integración de análisis.

Sin embargo, lo más importante es que los intercambios firmados muestran la URL real del editor cuando las personas usan la Búsqueda de Google y hacen clic en un vínculo AMP, en lugar de un vínculo "http // google.com / amp":

Este es un gran problema por dos razones:

1. El nombre de dominio es una parte fundamental de la identidad de marca
2. Es más fácil obtener análisis de AMP con su propia URL

(Nota: Google solo vincula los intercambios firmados cuando el editor, el navegador y el contexto de búsqueda lo admiten. Eso significa que deberá publicar tanto la versión de intercambio firmada como la versión de intercambio no firmada de su contenido).

2. Representación del lado del servidor (SSR)

La renderización del lado del servidor (SSR) es una técnica que puede aplicar a las páginas AMP para que se carguen aún más rápido, hasta un 50% más rápido de hecho.

SSR funciona mejorando los tiempos de primera pintura con contenido (FCP) para los marcos que representan la página del lado del cliente. La desventaja de la representación del lado del cliente es que todo el JavaScript necesario para representar la página debe descargarse primero, lo que retrasa el tiempo de carga del contenido de la página y podría aumentar potencialmente las tasas de rebote.

Como solución, AMP SSR elimina el código repetitivo de AMP y muestra el diseño de la página en el servidor.

(Nota: El código estándar de AMP existe para evitar saltos de contenido durante la carga de la página, ocultando el contenido hasta que se descargue el marco AMP y se establezca el diseño de la página. Por eso, las páginas AMP sufren el mismo problema que otros marcos del lado del cliente: la renderización es bloqueado hasta que se descargue JavaScript.)

Al eliminar el código estándar, AMP SSR da como resultado tiempos de FCP un 50% más rápidos.

Las optimizaciones de AMP con SSR rompen las reglas de la especificación de AMP, lo que invalida el documento. Sin embargo, siempre que se indique con una marca durante la configuración, el validador de AMP seguirá tratando al AMP con SSR como un AMP válido.

Actualmente, hay dos herramientas disponibles para AMP SSR:

1. AMP Optimizer: una biblioteca de NodeJs para producir AMP optimizado
2. AMP Packager: herramienta de línea de comandos de Ago, que se puede utilizar con intercambios firmados

3. Enmascaramiento de entrada

Completar formularios en línea puede ser tan engorroso que impiden que los usuarios lo hagan. Esto es más cierto en dispositivos móviles donde la pantalla es más pequeña y la navegación más difícil. Pero, como sabe, los formularios son vitales para recopilar clientes potenciales y completar ventas.

Para ayudar a que el proceso de llenado de formularios sea más fácil y más eficiente en el tiempo, AMP habilitó el enmascaramiento de entrada. Esta función permite a los desarrolladores agregar formatos como espacios y caracteres intersticiales, lo cual es especialmente conveniente cuando los usuarios están completando fechas, detalles de pago, números de teléfono, etc.

Con más y más personas enviando su información en línea en el mundo digital actual, tener un sistema más fácil y rápido puede marcar la diferencia.

4. Optimización de video

Se han introducido varias mejoras de vídeo para aumentar los numerosos beneficios de AMP.

Unión cósmica
Los videos en las páginas web móviles a menudo obstruyen la vista del usuario si la optimización no se implementa correctamente. Esto podría conducir fácilmente a una mala experiencia de usuario y disuadirlos de ver cualquier contenido futuro.

Este nuevo atributo de base minimiza el video que se está viendo actualmente cuando los usuarios se desplazan hacia abajo en la página, lo que les permite ver contenido y videos simultáneamente, sin ninguna obstrucción:

También puede personalizar dónde y cómo se acopla el video para encontrar la mejor manera de presentar su video al usuario.

Reproductor de video
Otra nueva actualización es el <amp-video-iframe> que le permite instalar un reproductor de video personalizado que incluye todas las funciones de la interfaz de video AMP que pueda desear (reproducción automática, acoplamiento, etc.)

Anuncios de video
Los anuncios de video también se pueden integrar y optimizar en AMP, desde cualquier red de anuncios de video que admita el SDK de IMA para que pueda realizar un seguimiento de los anuncios y los ingresos.

5. Listas optimizadas

AMP agregó recientemente dos componentes nuevos para optimizar listas en páginas web:

Cambiar el tamaño
<amp-list> le permite especificar cuándo desea que el contenedor de la lista cambie de tamaño en la interacción del usuario, para adaptarse mejor a diferentes tipos de contenido (por ejemplo, cuando <amp-list> contiene un <amp-accordion> que un usuario toca ).

Desplazamiento infinito
El desplazamiento infinito ahora está disponible, por lo que cuando los usuarios llegan al final de una lista de elementos (resultados de búsqueda, tarjetas de productos, etc.), la lista se completa automáticamente con más elementos:

Esto proporciona a los usuarios un acceso perfecto a más contenido desde una sola página en lugar de tener que hacer clic en el botón "siguiente" y visitar otra página de lista.

6. Integración de terceros

Las cookies y la recopilación de datos son esenciales para que las marcas registren la información del usuario. Sin embargo, con el RGPD, las reglas sobre el consentimiento y la privacidad de los datos se han vuelto más estrictas y reguladas en todos los sitios. Esto llevó a muchos editores a confiar en plataformas de gestión de consentimiento (CMP) de terceros para recopilar datos según el RGPD.

Con esto en mente, AMP lanzó <amp-consent>, por lo que los CMP podrían integrarse fácilmente con AMP. Es decir, los sitios web habilitados para AMP ahora pueden continuar usando CMP para recopilar y administrar datos de usuarios sin problemas de compatibilidad. También pueden integrar la IU de consentimiento de datos y avisar a los usuarios antes de que proporcionen su información.

7. Modo Lightbox

Ver imágenes a través de una caja de luz: expandir un elemento para llenar la pantalla hasta que el usuario lo cierre nuevamente es cada vez más común. Sin embargo, puede ser difícil para los desarrolladores ofrecer una transición fluida al modo de caja de luz, ya que implica la interpolación entre dos imágenes de diferentes posiciones y tamaños.

Esto llevó al Grupo de trabajo AMP UI a optimizar las transiciones de la caja de luz y mejorar la visibilidad de la imagen:

Ahora, <amp-lightbox-gallery> ofrece a los anunciantes la oportunidad de experimentar con diferentes tamaños para su sitio web y optimizar la forma en que quieren que los usuarios vean sus imágenes.

8. Disponibilidad de JavaScript personalizado

Una de las actualizaciones más recientes de Google AMP es la disponibilidad de <amp-script>, que brinda la opción de ejecutar JavaScript en un hilo de trabajo separado para que los anunciantes puedan agregar JavaScript personalizado a su página AMP sin dejar de conservar su velocidad de carga rápida.

El nuevo <amp-script> le permite cubrir casos de uso que no eran posibles con componentes AMP previamente existentes. También le permite compartir código en sus páginas AMP y no AMP, y utilizar un marco de JavaScript.

Algunos ejemplos que el equipo de AMP ha creado para <amp-script> incluyen:

• Todo MVC usando Vue
• Un verificador de contraseñas
• Visualización de datos en un artículo usando D3.js
• Formularios de varias páginas donde cada sección necesita validación antes de pasar a la siguiente sección:

Sin embargo, para preservar la garantía de rendimiento de AMP, existen algunas limitaciones:

• Salto de contenido : para evitar saltos de contenido inesperados, <amp-script> requiere la interacción del usuario para cambiar el contenido de la página.
• Carga de la página : dado que <amp-script> no cambia el contenido de la página sin la interacción del usuario, tampoco modifica el contenido al cargar la página.
• Tamaño de la secuencia de comandos : la secuencia de comandos utilizada en un solo <amp-script> debe tener un tamaño inferior a 150 kB.
• Compatibilidad con API : no todas las API son compatibles dentro de un Web Worker y algunos métodos y propiedades DOM aún no están implementados.

(Nota: <amp-script> es compatible con frameworks que quizás ya estés usando, como React, Preact, Angular, Vue.js, jQuery y D3.js.)

9. Caja de herramientas de AMP

AMP Toolbox es una colección de herramientas de línea de comandos y API JS para simplificar la publicación de páginas AMP. Cada herramienta dentro de la caja de herramientas se puede descargar y usar individualmente:

CLI de AMP
Una interfaz de línea de comandos disponible para la mayoría de las funciones incluidas en AMP Toolbox, que se puede instalar globalmente a través de NPM.

Linter AMP
El nuevo toolbox-linter verifica sus documentos AMP en busca de errores comunes y mejores prácticas.

Optimizador de AMP
El lado del servidor AMP Optimizer mejora el rendimiento de procesamiento de las páginas AMP mediante la implementación de las mejores prácticas de rendimiento de AMP.

URL de caché de AMP
Es una buena idea verificar si una página AMP funciona en todas las cachés de AMP, y puede usar el componente toolbox-cache-url para hacer esto, ya que traduce una URL de origen al formato de URL de la caché de AMP.

Lista de caché de AMP
Esto proporciona una lista de todos los cachés de AMP oficiales, que pueden ser útiles al actualizar o eliminar rápidamente documentos de AMP de un caché de AMP.

AMP CORS
Muchos componentes de AMP (como amp-list o amp-state) aprovechan los puntos finales remotos mediante solicitudes CORS. AMP CORS es un middleware connect / express que agregará automáticamente todos los encabezados CORS requeridos por sus páginas AMP.

Reglas de validación de AMP
Esta es simplemente una biblioteca de JavaScript para consultar las reglas del validador de AMP.

Obtenga una demostración de la página de destino posterior al clic de Instapage AMP

Dado que AMP se ha convertido en un lugar común en la optimización para dispositivos móviles, las actualizaciones consistentes como estas son vitales y beneficiosas para los desarrolladores, editores y anunciantes. Las actualizaciones más recientes anteriores son perfectas para mejorar la experiencia del usuario y brindar a las marcas más opciones para experimentar y probar para mejorar las funciones de su sitio web y la participación en la página.

Para experiencias de AMP posteriores al clic en un anuncio, obtenga una demostración personalizada de Instapage AMP para ver cómo puede crear páginas de carga rápida en minutos, utilizando un constructor amigable para el diseñador, un validador integrado, análisis avanzado y más.