Los pros y contras de optar por Headless para su tienda de comercio electrónico
Haga una búsqueda de “Headless”, y encontrará miles de artículos hablando sobre este nuevo enfoque. La mayoría de los autores lo aprecian por la libertad que ofrece para el desarrollo front-end, mientras que una gran parte de su base de fans aprecia su excelente interfaz de usuario (UI). Independientemente, son las empresas de comercio electrónico las que están mostrando un gran interés en implementar Headless para su tienda en línea.
He discutido anteriormente sobre Progressive Web Apps, que es una parte de este enfoque. Un concepto similar ha sido adoptado por gigantes del comercio electrónico como Amazon, Flipkart y Nike, con el único propósito de ofrecer una experiencia de cliente de alta gama.
¿Es este artículo otra carta de amor al desarrollo de sitios web Headless? Hasta cierto punto, sí. Pero prefiero discutir sus beneficios para las empresas de comercio electrónico y cómo, como agencia de desarrollo de sitios web de terceros, ayudamos a implementar Headless para algunas de las plataformas de comercio electrónico más populares.
Optimice su sitio web y más
con herramientas de Semrush
¿Qué es el comercio electrónico Headless?
Conceptos básicos: Cada sitio web de comercio electrónico consta de dos mitades funcionales, el front-end y el back-end.
El front-end del sitio web actúa como un canal intermediario entre el usuario y el portal de comercio electrónico, mientras que el back-end gestiona los detalles del producto y todo el funcionamiento del portal. A lo largo de los años, los portales de comercio electrónico populares se han apegado al enfoque clásico donde el front-end y el back-end del sitio web se controlan desde el mismo panel, lo que significa que comparten una plataforma común.
Ingrese a Headless con una estrategia completamente nueva. Si no ha oído hablar de Headless, esencialmente sirve para separar el front-end y el back-end de un sitio web. Con menos interferencia, cada parte del sitio web se comporta de forma independiente y sobresale en sus respectivos campos; tiene un experto en UI para manejar la cara del portal y un experto en back-end para fortalecer la base:
¿Por qué son tan diferentes?
La arquitectura básica de los portales de comercio electrónico
Sin entrar en los detalles de la arquitectura de comercio electrónico, lo que sigue son estructuras de portal diseñadas aproximadamente para ilustrar el funcionamiento básico de los sitios web de comercio electrónico y sus interacciones en cada etapa.
Arquitectura Full Stack
La arquitectura Full Stack es un enfoque más convencional que los webmasters móviles han utilizado desde que el desarrollo de aplicaciones móviles comenzó a ser una tendencia. Los desarrolladores crean un ecosistema completo con la plataforma de comercio en el centro, junto con una tienda integrada. El portal renderiza plataformas individuales como móviles y web por separado. Los entregables son más independientes y dedicados a la plataforma de servicio.
Con la plataforma de comercio en el centro, el portal de comercio prioriza las funciones de back-end como la gestión de contenido, el cumplimiento y los datos del producto.
Arquitectura de comercio electrónico full-stack
Comercio electrónico Headless
En comparación con la arquitectura full-stack, la estructura de comercio electrónico Headless separa claramente el front-end de la tienda web del resto de las funciones del sitio web. Ayuda a visualizar esta arquitectura como partes separadas en lugar de un sistema centralizado común. Los entregables se gestionan con API que renderizan una interfaz de usuario front-end común que se ajusta de forma inteligente a todas las plataformas.
Por razones obvias, el front-end ahora prioriza funciones como el pago y la personalización, mientras que la plataforma de comercio gestiona aspectos como la gestión de contenido, el cumplimiento y la gestión de productos.
¿Parece demasiado técnico? Se puede resumir con este punto singular: el comercio electrónico Headless es mucho más flexible que los enfoques convencionales en términos de ofrecer una experiencia omnicanal.
Un aumento repentino en la demanda de Headless
Retail Dive y BigCommerce presentaron recientemente números asombrosos en una encuesta que involucró a ejecutivos globales y gerentes de marketing y sus luchas con la adquisición de consumidores digitales. Según el informe, el 86% de los líderes empresariales indicaron que estaban experimentando un aumento en el Costo de Adquisición de Clientes (CAC). Con los medios pagados volviéndose más costosos y competitivos, el informe sugiere que la opción preferible es diseñar mejores formas de atraer tráfico orgánico.
Los usuarios consumen contenido desde casi todas partes. Más allá de una presencia en línea y una experiencia de compra mejorada, las empresas deben ofrecer a los consumidores opciones de compra fáciles en todos los dispositivos. Esta afirmación está respaldada por una encuesta de Mediapost, que afirma que los estadounidenses estarán conectados a través de 13 dispositivos de red por persona. No hace falta decir que la lista incluye dispositivos de todo tipo con una variedad de dimensiones de pantalla como computadoras portátiles, tabletas, teléfonos móviles, herramientas de reconocimiento de voz, relojes inteligentes, quioscos, tabletas para automóviles y todos los dispositivos conocidos por brindar accesibilidad a los servicios web.
Casos prácticos en nuestro laboratorio: Cómo desarrollamos la arquitectura Headless para nuestros clientes
Como agencia que ofrece soluciones de comercio electrónico personalizadas, nuestros clientes a menudo nos piden que entreguemos portales que sean ultrarrápidos de cargar e igualmente intuitivos en el extremo del usuario. Y lo que hacemos es recomendar el enfoque headless. Por razones obvias, requiere que hagamos un esfuerzo adicional, pero eso genera buenos resultados para ellos.
Implementación de un Magento Headless
Backend: Plataforma de comercio Magento
Frontend: Angular JS
Problema abordado:
Problemas de carga, el sitio web original tardaba hasta 7 segundos en aparecer. Lo que significaba una pantalla en blanco durante más de 7 segundos. Magento, por defecto, ofrece un frontend diseñado en el CMS basado en KnockoutJS. La tienda altamente integrada restringía la tienda web en muchos frentes. El creciente número de usuarios había comenzado a afectar el rendimiento de la tienda.
Nuestra solución:
Con una plantilla headless diseñada con Angular JS, filtramos el backend para que no afectara a la tienda. El enfoque clásico de carga diferida (lazyload) redujo el tiempo de carga de la página casi a la mitad.
Resultado:
El tiempo de carga de la página se redujo drásticamente de 7 segundos a 2.8 segundos.
Otro estudio de caso de Magento Headless
Backend: Plataforma de comercio Magento
Frontend: VueJS
Problema abordado:
Navegación de página, La experiencia de Magento se limita al rendimiento del backend. Su frontend es bastante rígido y a menudo requiere que hagas un recorrido por el backend cada vez que realizas una acción en la tienda. Haces clic en una página nueva, la tienda pasa la solicitud al backend de Magento, procesa los datos y te permite cargar la página nueva. La navegación de página es una cosa que se vio perjudicada en el proceso.
Nuestra solución:
Pudimos establecer una aplicación de una sola página (SPA) en Magento con VueJS. El usuario ahora puede navegar entre las páginas en la propia plantilla de Vue. Una gran parte de la consulta ya está resuelta en la plantilla de Vue, lo que evita que el backend de Magento se queme.
Resultado:
El tiempo de navegación de página se reduce drásticamente.
Implementación de Headless en una tienda web Shopify
Backend: Plataforma de comercio Shopify
Frontend: Gatsby JS
Sesiones de pago largas, Las sesiones de pago en cualquier plataforma de comercio electrónico, incluido Shopify, suelen ser demasiado largas. Se pide a los usuarios que completen 4 páginas largas antes de pagar. La historia de fondo: después de cada página, la tienda vuelve a cargar la página siguiente desde el backend de Shopify, seguida del retraso de procesamiento por parte de las pasarelas de pago de terceros. Dicho esto, tenemos búferes en cada etapa, lo que hace que la sección de pago sea lenta e irritante.
Sobre todo, Shopify limita la capacidad de personalizar la página de pago, restringiendo el control del administrador sobre su contenido.
Nuestra solución:
Con Gatsby JS, pudimos crear una sección de pago virtual de una sola página. Limitamos los campos y clasificamos todos los detalles en una sola página.
Resultado:
El tiempo de la sesión de pago se redujo drásticamente.
Headless no es tan impecable
fr
Costes crecientes:
Lo mejor del Headless commerce es que la tienda web no tiene un frontend predefinido. Los desarrolladores lo construyen desde cero para ofrecer contenido orientado a dispositivos. La parte negativa es que consume tiempo y el coste puede ser elevado.
Además, tienes que gastar más ya que el equipo de marketing no es suficiente para llegar a la gente. Los propietarios dependen en gran medida del equipo de TI para lanzar páginas de destino en múltiples dispositivos.
No es amigable para el marketing
Un sistema de Headless commerce carece de una capa de presentación frontend. Lo que significa:
- La vista previa del contenido en los dispositivos de los usuarios finales se vuelve difícil.
- Los especialistas en marketing no pueden crear contenido en el entorno WYSIWYG convencional.
- La ideación, creación y publicación de contenido se vuelve mucho más lenta debido a la mayor dependencia de otro departamento.
Eso implica que el Headless commerce terminaría presionando a los especialistas en marketing para que rindan más con una mayor dependencia del departamento de TI para la creación y entrega de contenido.
Alteraciones restringidas en el escaparate
El sistema de Headless commerce carece de un entorno WYSIWYG y está construido únicamente con marcos basados en JS. Si bien ofrece a su sitio web suficiente espacio para expandirse, también lo restringe para realizar más rediseños del frontend sin depender mucho de los desarrolladores de JS.
Resumen
Las empresas de comercio electrónico líderes han adoptado la arquitectura headless. Sobre todo, les está ayudando mucho. Headless tiene sus beneficios, así como sus desventajas. Puede requerir que hagas un esfuerzo adicional, pero los resultados que cosechará serán duraderos.