Alien Road Company

Los pros y los contras de utilizar Headless para su tienda de comercio electrónico

Los pros y los contras de utilizar Headless para su tienda de comercio electrónico

Haga una búsqueda de «Sin cabeza» y encontrará miles de artículos que hablan 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 seguidores aprecia su excelente interfaz de usuario (UI). De todos modos, son las empresas de comercio electrónico las que están mostrando un gran interés en implementar Headless para su tienda online.

Anteriormente hablé de las aplicaciones web progresivas, que son parte de este enfoque. Gigantes del comercio electrónico como Amazon, Flipkart y Nike han adoptado un concepto similar, con el único propósito de ofrecer una experiencia de alto nivel al cliente.

¿Es este artículo otra carta de amor al desarrollo de sitios web Headless? Hasta cierto punto, sí. Pero prefiero hablar de sus beneficios para las empresas de comercio electrónico y de cómo, como agencia de desarrollo de sitios web externa, ayudé a implementar Headless para algunas de las plataformas de comercio electrónico más populares.

Optimice su sitio web y más

con herramientas Semrush

¿Qué es el comercio electrónico sin cabeza?

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 en el que 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 Headless con una estrategia completamente nueva. Si no ha oído hablar de Headless, básicamente 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 destaca en sus respectivos campos: tienes un experto en UI para manejar la apariencia 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 profundizar en los detalles de la arquitectura del comercio electrónico, lo que sigue son estructuras de portal diseñadas a grandes rasgos para ilustrar el funcionamiento básico de los sitios web de comercio electrónico y sus interacciones en cada etapa.

Arquitectura de pila completa

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 convertirse en una tendencia. Los desarrolladores crean un ecosistema completo con la plataforma de comercio en el centro, junto con un escaparate integrado. El portal presenta 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 funciones de backend como gestión de contenido, cumplimiento y datos de productos.

Arquitectura de comercio electrónico de pila completa

Comercio electrónico sin cabeza

En comparación con la arquitectura de pila completa, la estructura de comercio electrónico sin cabeza separa claramente la interfaz de la tienda web del resto de las funciones del sitio web. Es útil visualizar esta arquitectura como partes separadas en lugar de un sistema centralizado común. Los entregables se gestionan con API que generan una interfaz de usuario común que se ajusta inteligentemente a todas las plataformas.

Por razones obvias, la interfaz ahora prioriza funciones como el pago y la personalización, mientras que la plataforma de comercio gestiona aspectos como la gestión de contenidos, el cumplimiento y la gestión de productos.

¿Parece demasiado técnico? Se puede resumir en este punto singular: el comercio electrónico sin cabeza es mucho más flexible que los enfoques convencionales en términos de brindar una experiencia omnicanal.

Un aumento repentino en la demanda de personas sin cabeza

Retail Dive y BigCommerce arrojaron recientemente cifras asombrosas en una encuesta que involucró a ejecutivos y gerentes de marketing globales y sus dificultades para adquirir 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). Dado que los medios pagos se vuelven más costosos y competitivos, el informe sugiere que la opción preferible es diseñar mejores estrategias para atraer tráfico orgánico.

Los usuarios consumen contenido de 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 sencillas 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 servicios web.

Casos prácticos en nuestro laboratorio: cómo desarrollamos una arquitectura sin cabeza para nuestros clientes

Como agencia que ofrece soluciones de comercio electrónico personalizadas, nuestros clientes a menudo nos piden que les entreguemos portales que sean increíblemente rápidos de cargar e igualmente intuitivos para el usuario. Y lo que hacemos es recomendar los sin cabeza.

acercarse. Por razones obvias, necesita que hagamos un esfuerzo adicional, pero eso les da buenos resultados.

Implementando un Magento sin cabeza

Backend: plataforma de comercio Magento

Interfaz: Angular JS

Problema solucionado:

Problemas al cargar: el sitio web original tardó hasta 7 segundos en aparecer. Lo que significó una pantalla en blanco durante más de 7 segundos. Magento, de forma predeterminada, ofrece una interfaz diseñada en el CMS basado en KnockoutJS. El escaparate altamente integrado restringió 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 sin cabeza diseñada con Angular JS, filtramos el backend para que no afectara el escaparate. El enfoque clásico de carga diferida 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 sin cabeza

Backend: plataforma Magento Commerce

Interfaz: VueJS

Problema abordado:

Navegación de página: la experiencia de Magento se limita al rendimiento del backend. Su interfaz es bastante rígida y, a menudo, necesita que realices un recorrido por el backend cada vez que realizas una acción en el escaparate. Haces clic en una página nueva, la tienda pasa la solicitud al backend de Magento, procesa los datos y te permite cargar la nueva página. La navegación de páginas es algo que se vio perjudicado en el proceso.

Nuestra solución:

Pudimos establecer una aplicación de página única en Magento con VueJS. El usuario ahora puede navegar entre las páginas de 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:

Segmentos de tiempo de navegación de página por variedades.

Implementación de Headless en una tienda web Shopify

Backend: plataforma Shopify Commerce

Interfaz: 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: al publicar cada página, la tienda recarga la página siguiente desde el backend de Shopify, seguido del retraso en el procesamiento por parte de pasarelas de pago de terceros. Dicho esto, tenemos buffers en cada etapa, lo que hace que la sección de pagos 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 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 enormemente.

Sin cabeza, ¿no es tan perfecto?

Si bien afirmamos que la tecnología headless es un método para resolver la mayoría de los problemas en su tienda de comercio electrónico, ciertamente no significa que no tenga fallas. Aquí hay algunas razones para no poseer Headless Commerce:

Costo creciente:

La mejor parte del comercio sin cabeza es que la tienda web no tiene una interfaz predefinida. Los desarrolladores lo construyen desde cero para ofrecer contenido orientado al dispositivo. Lo peor es que consume tiempo y el coste puede ser elevado.

Además de eso, debes 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 apto para marketing

Un sistema de comercio sin cabeza carece de una capa de presentación frontal. Lo que significa:

Obtener una vista previa del contenido en los dispositivos de los usuarios finales se vuelve difícil.
Los especialistas en marketing no logran crear contenido en el entorno WYSIWYG convencional.
Idear, crear y publicar contenido se vuelve mucho más lento debido a la mayor confiabilidad en otro departamento.

Esto implica que el comercio headless eventualmente obligaría a los especialistas en marketing a rendir más con una mayor dependencia del departamento de TI para la creación y entrega de contenido.

Modificaciones restringidas en el escaparate

El sistema de comercio sin cabeza carece de un entorno WYSIWYG y está construido únicamente con marcos basados en JS. Si bien ofrece a su sitio web suficiente espacio para expandirlo, también lo restringe para un mayor rediseño de la interfaz sin mucha dependencia de los desarrolladores de JS.

Resumiendo

Las principales empresas de comercio electrónico poseen una arquitectura sin cabeza. Sobre todo, les está ayudando para siempre. Headless tiene sus ventajas y desventajas. Es posible que necesite que usted haga un esfuerzo adicional, pero los resultados que obtendrá serán duraderos.

Las arquitecturas convencionales siguen siendo lo suficientemente fáciles de administrar para continuar, pero, una vez más, el cambio es la única constante.

Tags:

Leave A Comment