pwa-header
E-commerce

Progressive Web App (PWA): ¿Cuáles son los beneficios para los ecommerce?

Por Synolia el 21 agosto 2023

 10 minutos de lectura

En la actualidad, casi dos tercios de las visitas a páginas web se realizan desde un dispositivo móvil. Lo demuestra la curva de evolución de la distribución del tráfico entre móvil, escritorio y tablet. Todo nos lleva a creer que esta evolución no ha terminado y que la era del “mobile first” aún tiene un futuro brillante por delante. Conscientes de este hecho, las empresas deben hacerse una pregunta importante al rediseñar su plataforma ecommerce: ¿necesito una aplicación móvil además de mi sitio ecommerce? ¿Es la PWA una buena alternativa?

Las ventajas y desventajas de una aplicación móvil

Aunque es bastante engorrosa de configurar, la aplicación móvil tiene varias ventajas que el sitio ecommerce responsive tradicional no tiene:

  • Puede funcionar sin conexión en ciertas condiciones
  • Ofrece una experiencia de usuario más fluida, intuitiva y optimizada
  • Refuerza el reconocimiento de marca
  • Acceso a componentes del dispositivo móvil (GPS, Bluetooth, cámaras...)
  • Permite recibir notificaciones nativas del dispositivo

Pero también tiene sus inconvenientes:

  • Mantenimiento más complicado, dependiente del modelo de móvil/tablet
  • Desarrollo más costoso
  • Compatibilidad móvil más limitada por la plataforma (Android, iOS...)
  • Audiencia limitada a móviles y tablets
  • Requiere acción del usuario (instalar una aplicación)
  • No puede reemplazar un sitio web, lo que obliga a mantener dos herramientas distintas

En resumen, parece que una aplicación móvil de venta, aunque tiene sus ventajas, conlleva costos de implementación y mantenimiento tan altos que representa una inversión que difícilmente será unánime.

Frente a esta situación, ha surgido una alternativa a la aplicación móvil impulsada por Google: una tecnología que permite aprovechar el sitio ecommerce y brindarle todas las ventajas que antes estaban reservadas para la aplicación móvil. ¡Hablamos de las PWA (Aplicaciones Web Progresivas)!

El concepto de Progressive Web App (PWA) en detalle

Prácticas recomendadas

En términos generales, una Progressive Web App es como una aplicación móvil, con la diferencia de que se basa en un sitio web responsive.

Cuando se desarrolla correctamente, aporta al sitio características típicas del mundo móvil, como navegación sin recargar la página, envío de notificaciones, creación de un acceso directo en la pantalla de inicio o navegación sin conexión.

Además, el concepto de PWA incluye diversas prácticas recomendadas que buscan optimizar la experiencia del usuario, haciéndola lo más similar posible a la de una aplicación nativa.

Dentro de estas prácticas, algunas son cruciales y otras son más opcionales:

  • El sitio debe ser responsive.
    No olvidemos que una PWA muestra la versión móvil de un sitio. Por lo tanto, es crucial que esta versión esté optimizada para sacar el máximo provecho de este formato.
  • El sitio debe tener un manifiesto.
    Esto permite que se instale en la pantalla de inicio de los dispositivos móviles.
  • La compatibilidad limitada con ciertos navegadores y dispositivos no debe ser un obstáculo.
    Las PWAs, impulsadas por Google, se basan en funciones compatibles con su navegador Chrome. Actualmente, la mayoría de los navegadores del mercado pueden ejecutar correctamente un sitio PWA.
  • El sitio debe ser seguro.
    Normalmente, tu tienda ya ofrece una navegación segura. Si tienes dudas, la forma más sencilla de asegurarte es verificar la presencia de un pequeño candado en la barra de direcciones de tu navegador.
  • El sitio puede enviar notificaciones.
    Aunque no es obligatorio, las notificaciones son un canal de comunicación privilegiado con tus clientes, habilitado por las PWAs.
  • El sitio puede ofrecer navegación parcial sin conexión.
    Aunque no es muy aplicable al ecommerce, la navegación sin conexión en relación con el catálogo podría ser beneficiosa en ciertas situaciones específicas.

Y una arquitectura óptima

Aunque en teoría, el término 'PWA' brinda cierta libertad, una arquitectura PWA óptima generalmente se compone de la siguiente manera:

  • Una aplicación de front-office Javascript construida con uno de los frameworks más populares en la actualidad (React, VueJs, etc.). Se encarga de gestionar la obtención y restitución de datos. Esta aplicación maneja la visualización de las páginas y su integración responsive. A menudo es una SPA (Single Page Application), lo que aporta la misma fluidez que una aplicación móvil al eliminar la recarga de páginas en favor de actualizaciones asíncronas.
  • Una aplicación back-end que ofrece una cobertura completa de sus funciones a través de API. Se encarga de recibir las solicitudes de la aplicación front-end y recuperar los datos necesarios para la visualización. Esta aplicación almacena los datos y permite su administración por parte de los equipos comerciales.

Esta arquitectura, junto con un manifiesto (para la instalación en móviles), proporciona a los usuarios una experiencia que se asemeja mucho a la de una aplicación móvil.

¿Cómo saber si necesito una PWA?

La integración de una PWA es adecuada para cualquier comerciante electrónico que quiera sacar el máximo provecho de su plataforma, ya sea en dispositivos móviles o escritorios. Elegir una PWA también significa dejar atrás los problemas más comunes del ecommerce: problemas de rendimiento, una experiencia de cliente degradada y, por lo tanto:

  • Una duración de sesiones promedio baja
  • Un bajo índice de conversión
  • Una alta tasa de rebote
  • Un bajo número de visitantes recurrentes

Es importante tener en cuenta que, si bien la navegación móvil representa la mayor parte del tráfico de los sitios, los consumidores también son más exigentes en dispositivos móviles que en escritorios. La tasa de conversión de un sitio móvil solo será óptima si se presta especial atención a la experiencia del usuario. ¡El rendimiento, la ergonomía y la movilidad son las claves del éxito!

Recuerda que la mitad de los usuarios abandonarán tu sitio si tarda más de tres segundos en cargarse y la mitad de esos mismos usuarios nunca volverán. Por lo tanto, la primera impresión debe ser positiva para evitar perder una parte significativa de tu audiencia inicial.

Hasta la fecha, elegir una PWA es una forma de aumentar tus posibilidades de conversión y fidelización, especialmente en dispositivos móviles. También proporciona un acceso más directo a los clientes a través de notificaciones push. En resumen, es una elección con miras al futuro.

Fuentes : Velocidad y tasa de rebote (EN), Velocidad y tasa de conversión (EN)

¿Cuáles son los impactos de una PWA en el ecommerce en general?

Aunque la tendencia aún no es muy común en el ecommerce, las PWAs ofrecen resultados particularmente alentadores:

Mejor velocidad de carga de páginas

Una de las principales ventajas de las PWAs es la mejora en el rendimiento que ofrecen. La experiencia del cliente en un sitio PWA es más fluida, con tiempos de carga más cortos y ausencia de recargas de página.

Este notable aumento en el rendimiento se basa en tres aspectos que hacen que las aplicaciones clásicas (con un alcance funcional similar) no puedan competir:

  • Almacenamiento en caché: 
    Grâce au concept de service worker, les applications PWA sont capables de stocker des données que les applications classiques devaient auparavant systématiquement demander au serveur. C’est ce concept qui rend possible toute ou partie de la navigation offline possible sur le site. Tous les éléments ainsi mis en cache sont autant de temps de chargements économisés. Cela permet de rendre l’application plus rapide et fluide.
  • SPA (Single Page Application): 
    Las PWAs más eficientes suelen ser SPA. Esto significa que los sitios construidos de esta manera no tienen recargas de página. Ya no habrá pantallas en blanco después de cada clic. Los datos se cargan por secciones, lo que favorece un diseño de espera de mayor calidad y una impresión de velocidad incomparable.
  • Arquitectura desacoplada (headless): 
    La aplicación front-end que se encarga de la presentación y el almacenamiento en caché es una aplicación Javascript. Como tal, se ejecuta en el dispositivo del cliente, aprovechando su potencia de cálculo. Antes, el cálculo de los datos de la página necesarios para la representación lo realizaba por completo la aplicación back-end, lo que consumía más recursos. Sin embargo, con este tipo de arquitectura, la aplicación back-end se dedica a calcular y suministrar/guardar más datos y que requieren menos tiempo de cálculo.

 


Caso de éxito Synolia

Millet Mountain Group (FR), que realizó una renovación de su plataforma de Magento 1 a Magento 2 PWA Studio, ¡ha visto reducidos los tiempos de carga promedio de sus páginas a la mitad!


 

Un aumento en la duración de las sesiones

Es evidente que si tu sitio es rápido y agradable, los usuarios pasarán más tiempo en él. De hecho, la renovación del sitio de Millet/Lafuma en PWA Studio ha permitido:

 

51%

aumento en el número de sesiones móviles

53%

aumento en la duración de las sesiones móviles (iOS)

+ de 18 000

clientes suscritos a notificaciones

 

Una mayor visibilidad

El SEO de las aplicaciones móviles se limita al alcance de las tiendas de aplicaciones (Microsoft Store, App Store, Google Play), donde el número de búsquedas es menor que en Google.

Además, el contenido de estas aplicaciones no es visible para Google. Dado que una PWA es principalmente un sitio con contenido completamente accesible, se beneficia de la indexación de Google, donde las búsquedas son mucho más frecuentes y proporcionan una mayor visibilidad.

Una experiencia de usuario similar a la de una aplicación móvil tradicional

Sur Windows 10 et sur Android par exemple, votre site s’affiche sous forme d’une icône, comme une application standard. Ainsi, votre marque occupe, en plus de sa place sur internet, une place physique sur l’écran d’accueil de vos clients. C’est plus de visibilité immédiate pour vous et un accès plus simple et plus rapide pour eux.

Un taux de conversion optimisé et CA augmenté

En Windows 10 y Android, por ejemplo, tu sitio se muestra como un ícono, como una aplicación estándar. Así, tu marca ocupa no solo un lugar en internet, sino también un lugar físico en la pantalla de inicio de tus clientes. Esto significa una mayor visibilidad inmediata para ti y un acceso más rápido y sencillo para ellos:

Conversión móvil +207%

desde que los sitios de PWA se pusieron en línea

 

+73%

añadidos al carrito

 

Ingresos móviles x4

10% de los ingresos totales antes vs. el 45% después de la renovación

 

+8%

en el carrito promedio de los clientes

¡Lánzate!

La PWA se presenta como una excelente respuesta a algunos problemas que enfrentan los comerciantes en dispositivos móviles, así como a sus clientes. Con un mejor rendimiento de visualización en móviles, los clientes disfrutan de una experiencia de navegación más ágil y parcialmente independiente de la red. Esto los hace más propensos a pasar más tiempo y realizar más pedidos en tu tienda, ¡aumentando así tu tasa de conversión!

Además, ten en cuenta que permitir a tus usuarios añadir tu tienda a su pantalla de inicio es como abrirles una tienda en su vecindario. El ícono en la pantalla de inicio brinda visibilidad y acceso inmediato a tu tienda, mucho mejor que un enlace guardado entre docenas de favoritos en el navegador. Finalmente, si un usuario abandona tu sitio, ¡las notificaciones están ahí para invitarlo a regresar! Mantienen al usuario informado sobre novedades, el progreso de un pedido, la reposición de un producto e incluso ofertas promocionales.

Ante el entusiasmo de las grandes marcas y los beneficios de la PWA, los desarrolladores están tomando la iniciativa para proporcionar soluciones nativas de PWA. De esta manera, los integradores como Synolia pueden guiar a sus clientes hacia horizontes más prometedores.

 

Contáctanos

Aprende también...