publicado originalmente en el blog de eBay por Senthil Padmanabhan, Ingeniero jefe.

eBay continúa aprovechando la tecnología AMP para acelerar y mejorar las experiencias móviles.


Tres meses atrás, anunciamos cómo estamos transformando la experiencia de compra en eBay, permitiendo a los usuarios navegar con estilo y velocidad. Nuestro objetivo es proporcionar una experiencia atractiva no solo para los usuarios que están en el sitio de eBay, sino también para los usuarios móviles que acceden a eBay desde plataformas externas, como Google y Twitter. Es aquí donde la tecnología AMP entra en el juego: Implementamos una versión de AMP para nuestra nueva experiencia de navegación de productos, junto con las páginas web móviles habituales, y realizamos el lanzamiento en junio. En ese momento, no revelamos a Google nuestro contenido AMP, ya que teníamos algunas tareas pendientes por completar. Asimismo, los vínculos AMP aparecían en Google solo para el contenido de editores y no para comercio electrónico.

Ahora, las cosas han cambiado. Google anunció que está ampliando el uso de la tecnología AMP más allá de la industria de las noticias para incluir el comercio electrónico, el turismo, etc. Desde nuestro lugar, finalizamos las tareas pendientes y vinculamos las páginas AMP con las no AMP para que sean detectables. Hoy en día, nos enorgullece anunciar que los usuarios de todo el mundo comenzarán a ver vínculos AMP de eBay en los resultados de las búsquedas en Google y experimentarán el poder del rayo: la carga instantánea. Tenemos cerca de 15 millones de páginas de exploración de productos basadas en AMP, pero no todas aparecerán como AMP de inmediato. Esta función se está implementando paulatinamente y, con el tiempo, saldrá a la luz. Observa algunas de las consultas frecuentes en un navegador móvil: “iPhone 6 sin contrato” y “cámaras digitales Canon”, por ejemplo. El rayo de AMP aparece junto a los vínculos como indicación. El uso de AMP para el comercio electrónico ya es una realidad.

ampphotoEntre el presente y el pasado

Tras el lanzamiento inicial en junio, pusimos en práctica algunas medidas para que el proyecto AMP esté listo para el momento de mayor demanda. A continuación, describimos algunos de estos esfuerzos realizados.

Sistema sólido de análisis

Es fundamental comprender el modo en que los usuarios interactúan con nuestras páginas para que podamos ofrecer la experiencia más optimizada. El sistema de backend que impulsa la nueva experiencia de exploración de productos está diseñado de manera que recopila constantemente la actividad en pantalla de los usuarios, aprende de ella y optimiza la experiencia para las visitas futuras. Por ejemplo, si los usuarios interactúan con más frecuencia con un módulo que aparece en la mitad inferior de la página en la pantalla, en visitas futuras a la misma página de exploración, ese módulo empezará a aparecer en la mitad superior de la página. Nuestra página no AMP tiene una biblioteca de análisis personalizada que realiza los informes para el backend.

AMP tiene un componente (amp-analytics) que se encarga de ello. En el lanzamiento inicial de AMP, utilizamos este componente solo para rastrear las impresiones de las páginas. Ofrece un mecanismo de rastreo bastante completo. No obstante, lo que deseábamos obtener era un control más granular a nivel de elemento, en el cual cada elemento determina qué desea rastrear. Empezamos a trabajar con el equipo de AMP sobre este tema y confeccionamos una especificación. Seguimos avanzando, implementamos la especificación y la aportamos nuevamente al proyecto de código abierto. Con la implementación finalizada, pudimos lograr un sistema de análisis sólido y avanzado que informa las interacciones de los usuarios, como los clics, los desplazamientos y la visibilidad, a nuestro backend, el cual, a su vez, optimiza las visitas posteriores.

Paridad de funciones

En nuestro blog anterior, mencionamos que la mayoría del código se comparte entre las páginas AMP y no AMP. Aun con el uso compartido del código, existían algunas pequeñas inconsistencias de funciones entre las dos versiones. Eliminamos estas brechas, corregimos las inconsistencias y pusimos en práctica un proceso para asegurarnos de que no vuelvan a aparecer. Dicho esto, cabe mencionar que hubo ciertos componentes de IU y comportamientos que no pudimos lograr en la versión AMP debido a las restricciones. Algunos de estos componentes son específicos del comercio electrónico. Estamos trabajando con el equipo de AMP para agregarlos a la lista de componentes para que todos puedan beneficiarse de ellos. Un buen ejemplo podría ser el componente de IU con pestañas, y ya existe una solicitud de función para implementarlo.

Proceso de compilación optimizado

Durante el lanzamiento inicial, debimos trabajar manualmente para administrar los recursos (CSS y JavaScript) entre las versiones AMP y no AMP. En la versión AMP, no debería haber JavaScript, y todo el CSS debería estar en línea, mientras que en la versión no AMP, tanto CSS como JavaScript deberían estar unidos y externalizados. Hacer esta tarea de forma manual no fue lo ideal. Nuestra herramienta de proceso de recursos, Lasso, tiene una solución para esto: las dependencias condicionales. Creamos una marca de AMP que se identifica como true si la solicitud es AMP, y luego se convierte en una marca de Lasso. El proceso accede a ella y automáticamente une, externaliza o coloca en línea los recursos basados en las condiciones. Esto nos permitió ahorrar mucho tiempo y terminó siendo muy eficiente.

El camino por recorrer

Todavía no hemos terminado; de hecho, acabamos de comenzar. Hay una larga fila de tareas por completar.
  • Más allá de AMP: sabemos que las páginas AMP son rápidas. ¿Qué pasa con las páginas posteriores que el usuario visita? En la actualidad, cuando los usuarios hacen clic en una página AMP, se abre una nueva pestaña, en la cual se carga la página de destino. En nuestro caso, se carga la versión web móvil de la página de destino. Queremos que esa experiencia sea tan rápida y constante como la experiencia AMP. Hay un componente AMP (amp-install-serviceworker) para lograr este objetivo, y nuestra máxima prioridad es aprovechar esta utilidad y crear una transición sin inconvenientes de AMP a la página deseada. También estamos analizando con el equipo de Google cómo evitar la nueva pestaña y continuar la experiencia en la misma ventana.
  • Actualización de caché: el contenido AMP se obtiene desde la memoria caché AMP de Google, y la política de actualización de caché puede encontrarse aquí. Para eBay, esto significa que, para las consultas de los productos más populares, los usuarios siempre ven el contenido actualizado. Pero para algunas consultas muy poco frecuentes, algunos usuarios pueden terminar viendo contenido desactualizado. Si bien no es un escenario habitual, hay un componente AMP (amp-fresh) con el que se está trabajando para solucionar este problema. Integraremos este componente tan pronto como esté listo. Mientras tanto, contamos con una secuencia de comandos que ejecutamos manualmente para algunos productos a fin de actualizar el contenido AMP en caché.
  • Versión unificada: actualmente, contamos con dos versiones de las nuevas páginas de exploración (AMP y no AMP). La versión AMP aparece para los usuarios que buscan en Google, y la versión no AMP aparece para los usuarios que busca dentro de eBay. A pesar de que ambas versiones están muy optimizadas, se ven iguales y comparten la mayor parte del código, actualizar ambas versiones sigue siendo una carga de mantenimiento adicional. Además, siempre debemos estar alertas a la paridad de las funciones. En el futuro, según el funcionamiento de las páginas AMP, es posible que elijamos tener una versión móvil (AMP) e implementarla en todas las plataformas.

Nos alegra poder proporcionar la experiencia AMP a los usuarios móviles provenientes de Google. Hace un tiempo que la estamos probando y, de hecho, tiene la velocidad de un rayo. La exploración desde un dispositivo móvil puede ser lenta y, a veces, frustrante, y es allí donde AMP entra en el juego y garantiza una experiencia coherente y veloz. Esperamos que nuestros usuarios se beneficien del uso de esta nueva tecnología.