Shopify Plus es una popular plataforma de comercio electrónico SaaS que ha atraído a algunas de las marcas más grandes del mundo como Tesla, Victoria Beckham Beauty, Staples, Oreo / Mondelez y Red Bull. La lista sigue y sigue, y la amplia adopción no es ninguna sorpresa: Shopify Plus es fácil de usar y fácilmente personalizable. Ofrece una gran cantidad de plugins y API y está respaldado por un equipo de soporte increíblemente receptivo. ¿Qué más se puede esperar de una plataforma de comercio electrónico? Ya sea con una tienda Shopify o de otro modo, la respuesta sigue siendo la misma: Carga de página sub-segundo y SEO que supera a tus competidores.
Incluso el sitio web más elegante y hermoso de Shopify Plus no tendrá ninguna oportunidad contra la aplastante competencia de los minoristas más grandes, a menos que el operador haga un esfuerzo adicional para optimizar el sitio para velocidades de menos de segundos.
Hacer que tu tienda Shopify Plus sea lo más rápido posible es una de las formas más fáciles de conseguir que tu tienda tenga un ranking más alto en SERPs y aumentar tus tasas de conversión gracias a una experiencia de compra superior y sin problemas.
Shopify te permite entregar productos, no experiencias
Muchas plataformas de comercio electrónico como Shopify Plus, Magento o Salesforce Commerce Cloud se crearon con un enfoque de backend y de datos primero y muy poco enfoque en la experiencia real del cliente. Su enfoque está en las SKU, no en las personas. Esto dificulta la optimización de la velocidad del sitio web en los clientes de la plataforma, los integradores de sistemas, los diseñadores y los desarrolladores.
Ya sea que tu tienda se ejecute en Shopify Plus o en cualquier otra plataforma de comercio electrónico o sistema de backend popular, si quieres ofrecer la experiencia más rápida, necesitarás implementar tecnologías web avanzadas enfocadas en la velocidad. Para eso, primero debes ir sin cabeza.
Los beneficios del eCommerce sin cabeza
Una arquitectura de comercio electrónico sin cabeza es aquella en la que el diseño de frontend de un sitio (es decir, la capa de presentación) está desacoplado de su infraestructura de backend. Es un poco como usar WordPress para administrar el contenido de una aplicación móvil (por lo que vale, esto es posible con la API REST de WordPress).
Arquitectura tradicional y monolítica de comercio electrónico
Going Headless ha sido identificado como una de las principales iniciativas para muchos minoristas en 2020 y más allá. Permite a los minoristas elegir la mejor solución para su frontend independientemente de su backend para que las tiendas puedan funcionar más rápido, impulsando tasas de conversión y mejoras en la clasificación. Headless eCommerce, también conocido como arquitectura de microservicios, es casi una forma segura de ganar ventaja sobre la competencia.
Una capa API permite el desacoplamiento del frontend de un sitio de su backend
Más específicamente, el eCommerce sin cabeza ofrece varios beneficios:
1. Velocidades más rápidas
Ir sin cabeza es un requisito previo para implementar muchas tecnologías enfocadas en la velocidad. Esto es posible a través de cambiar la lógica de visualización al lado del cliente y racionalizar el backend para el mejor rendimiento. Al centrarse solo en la entrega rápida de contenido, el frontend puede ser más rápido y receptivo que uno que deja el trabajo duro al navegador.
2. Libertad de elección
Muchas plataformas de comercio electrónico ofrecen a sus usuarios frontends propietarios. Shopify Plus no es diferente y tiene una selección de temas responsivos basados en el lenguaje de plantillas Liquid de Shopify. Al ir sin cabeza, puede deshacerse por completo de los grilletes de bloqueo del proveedor y llegar más allá de las herramientas de frontend de la plataforma. Esto conduce a una mayor agilidad y le permite desarrollar su frontend independientemente de la hoja de ruta de su plataforma de comercio electrónico.
3. Independencia del backend
Una inversión en un sitio web sin cabeza prueba de futuro la tienda. Usted es dueño del código frontend y puede desarrollar con confianza e invertir en él. Esto le permite moverlo a otra plataforma de comercio electrónico, más barata o mejor cuando lo desee. En tal caso, incluso si tu tienda tiene docenas de integraciones con herramientas de terceros, no es necesario que se vuelvan a escribir para la nueva plataforma de comercio electrónico, solo tienes que cambiar las API de la plataforma antigua con las de la nueva.
4. Mejor SEO
Un sitio sin cabeza no solo es más rápido; también tiene mejor SEO. Con un sitio web sin cabeza, puedes elegir cómo manejar URL, metadatos, archivos robots.txt y otros aspectos de tu SEO técnico. Shopify Plus no admite esto fuera de la caja.
5. Soporte para casos de uso futuros y endpoints
Con un frontend sin cabeza, como Progressive Web Apps (PWA)/Single-Page Apps (SPAS), el operador puede preparar la tienda para el futuro, agregar libremente nuevos endpoints y desarrollar características adicionales. Todo lo que necesitas hacer es conectarte a las API. Puedes agregar prácticamente cualquier dispositivo o plataforma como punto final y pago para tu tienda sin cabeza.
El secreto detrás de las tiendas Shopify Plus más rápidas
Going Headless es la base para implementar varias tecnologías web avanzadas y técnicas de optimización que ayudan a desarrollar escaparates más rápidos y receptivos. Combinados, pueden ayudar a optimizar cualquier sitio web de Shopify Plus para obtener la máxima velocidad, SEO e ingresos.
Frontends PWA portátiles
Al ir sin cabeza y acoplar Shopify Plus con un frontend portátil PWA, puedes ganar velocidades de navegación ultrarrápidas en el sitio web en dispositivos móviles. Con PWA, sus clientes disfrutarán de una experiencia mejorada de transiciones de página instantáneas. Tan rápido como son las transiciones de navegación de las PWA, sus primeras cargas tienden a tomar más tiempo que los sitios web tradicionales de varias páginas. Para combatir esto y proporcionar una experiencia increíblemente rápida desde el aterrizaje hasta el pago, considere agregar renderizado del lado del servidor y soporte AMP a su PWA.
Renderización del lado del servidor (SSR)
El renderizado del lado del servidor es una tecnología web crucial que acompaña a las PWA rápidas. Sin la representación del lado del servidor, el navegador debe descargar, analizar y ejecutar todo el código JavaScript antes de representar cualquier cosa en la pantalla. PWAs sin SSR luchan por lograr un tiempo para la primera pintura significativa (TTFMP) por debajo de 2.5s en 3g. simulado Junto con una CDN moderna con capacidades de computación perimetral, un sitio que utiliza SSR puede lograr tiempos TTFMP casi instantáneos.
SSR garantiza que los visitantes de correo electrónico, redes sociales y referencias experimenten primeras cargas rápidas. Con soporte SSR, la PWA proporciona una experiencia mejorada de cargas rápidas de primera página y transiciones instantáneas de página más allá de solo la primera página.
El renderizado del lado del servidor también conduce a un mejor SEO. Los negocios de comercio electrónico dependen del SEO, y la única manera de estar 100% seguro de que su sitio será entendido por los robots de búsqueda y redes sociales y rastreadores es traduciéndolo a HTML.
Esto es especialmente importante si construyes un frontend PWA de comercio electrónico pesado en JavaScript para Shopify Plus. Debe renderizar sus páginas en el servidor porque los rastreadores y bots no indexan de forma fiable el contenido JavaScript.
Shopify Plus no viene con soporte SSR incorporado.
Páginas móviles aceleradas (AMP)
Google AMP es un framework de código abierto para crear páginas web móviles súper rápidas simplificando el HTML y aplicando estrictas limitaciones en CSS y JavaScript. La página AMP promedio se carga en 500 milisegundos desde la búsqueda. Estas páginas se almacenan en caché y se preprocesan en el servidor de Google, que es la forma en que se entregan rápidamente.
Shopify Plus no ofrece soporte AMP o SSR verdadero de la caja, lo que dificulta significativamente tu capacidad para optimizar las cargas de primera página en dispositivos móviles. Usted tendrá que agregar estas capacidades a su sitio web por su cuenta. Tanto para AMP como para SSR, querrás un backend para frontend. Más sobre eso está abajo.
Backend para Frontend (BFF)
Los BFF desempeñan un papel central en el uso de API de arquitectura basada en microservicios y comercio electrónico sin cabeza. Es una capa discreta en tu pila de aplicaciones que permite a un solo cliente, por ejemplo, una PWA o una aplicación móvil nativa de Android o iOS, usar las API compartidas de manera más eficiente sin optimizarlas para cada cliente. “Intercepta” de forma transparente las llamadas API y traduce los argumentos pasados para hacerlos entender por un punto final específico.
BFF es el lugar perfecto para hacer renderizado del lado del servidor y conversión AMP para el frontend. Un BFF también trae muchos otros beneficios a una tienda Shopify:
BFF y velocidad
Es posible que tu frontend necesite orquestar llamadas a múltiples servicios y/o reformatear los datos de respuesta para que se adapten mejor al diseño de la página, y este código debe ejecutarse en algún lugar. Un BFF le permite mantener este código fuera del paquete de frontend, manteniéndolo pequeño y rápido. En la mayoría de los casos, las respuestas son cacheables, por lo que en lugar de ejecutar este código shim en el dispositivo de cada usuario en cada solicitud, se ejecuta en la nube, que puede escalar para satisfacer la demanda y solo cuando hay una falta de caché.
Para los clientes móviles, demasiadas solicitudes HTTP son costosas en términos de tiempo, agregando milisegundos innecesarios con cada llamada. Para minimizar el número de solicitudes, el frontend generalmente tiende a obtener datos asociados a través de una única API. Esto significa que a veces el backend será responsable del procesamiento lógico relacionado con la interfaz de usuario para satisfacer las necesidades de cada cliente. Este es un enfoque ineficiente.
Con un backend para frontend implementado, el frontend (móvil, web) solo accede a los microservicios del backend a través del BFF, y cada cliente obtiene un servicio BFF separado. Con un BFF, hay menos llamadas mutuas entre microservicios. Esto se debe a que cierta lógica de UI se procesa en el nivel BFF.
BFF y velocidad de desarrollo
Un BFF aumenta la velocidad del desarrollador al permitir que distintos equipos de desarrollo trabajen de forma independiente. Permite a los desarrolladores añadir nuevas funcionalidades sin necesidad de cambiar las API principales. Esto es especialmente útil si las API son proporcionadas por Shopify Plus y no se pueden cambiar.
Minimizar el bloqueo de proveedores
Si alguna vez necesitas cambiar Shopify por otra plataforma de comercio electrónico, un backend para frontend reduce el esfuerzo y los costos. Esto ofrece un gran beneficio en la forma de la flexibilidad de la arquitectura sin cabeza.
Desacoplamiento de frontend y backend basado en BFF
Prefetching predictivo y CDN con computación de borde
La búsqueda previa predictiva es una capacidad avanzada utilizada para almacenar previamente en caché y renderizar la página que los visitantes tienen más probabilidades de visitar antes de hacer clic en ella. Una CDN moderna con capacidades de computación perimetral le permite transmitir datos dinámicos al perímetro y luego a los navegadores de los usuarios antes de que lo soliciten. Combinadas, estas tecnologías permiten que tu tienda Shopify Plus se mantenga 5 segundos por delante del comprador, sin importar dónde toque.
Al obtener previamente y transmitir datos dinámicos al perímetro, puedes almacenar en caché y servir al instante lo que los consumidores que navegan por tu tienda Shopify están esperando: Los datos JSON que se traducen en los diferentes productos que tienes en stock, sus precios e información. Pero para hacer esto, necesitas una CDN sofisticada que entienda tu aplicación.
Layer0 CDN-as-JavaScript optimiza las relaciones de aciertos de caché a niveles inauditos y lleva la inteligencia al borde. Esto ayuda a los propietarios de negocios a descifrar tendencias y oportunidades de optimización categorizando páginas similares como tales (por ejemplo, PDP, PLP y Cart) en lugar de simplemente mostrar una lista interminable de URL. Esto le permite tomar medidas y ver una diferencia en los tiempos de carga del sitio web.
Layer0 CDN-as-JavaScript tiene una relación de aciertos de caché del 95% para contenido dinámico en el perímetro, mientras que el sitio web de comercio electrónico promedio tiene una relación de aciertos de caché promedio del 15%. Esta diferencia, junto con la obtención predeterminada predictiva, mantiene a los grandes sitios web de comercio electrónico 5 segundos por delante del comprador, sin importar dónde toquen.
¿Qué tan difícil es ir sin cabeza con Shopify Plus?
Elegir una plataforma de comercio electrónico para ejecutar su tienda debe tener en cuenta el soporte de la plataforma para sitios web sin cabeza y las tecnologías que permiten sitios de sub-segundos. Muchas plataformas de comercio electrónico son monolíticas fuera de la caja (es decir, combinan el frontend con el backend).
Aunque no admite explícitamente la arquitectura sin cabeza, Shopify Plus permite a los minoristas ejecutar tiendas sin cabeza y usar un marco de interfaz diferente (como React StoreFront) o un CMS sin cabeza como Contentful, que es utilizado por muchas compilaciones de Shopify sin cabeza.
Shopify Plus ofrece una sólida colección propietaria de API de tiendas, lo que hace posible ir sin cabeza al permitir el acceso al contenido y los componentes de la plataforma.
Tenga en cuenta que Shopify Plus no admite oficialmente sitios web sin cabeza y no ofrece muchas capacidades y tecnologías centradas en la velocidad listas para usar. Esto no es sorprendente: La plataforma está destinada a administrar su inventario, precios y datos, y la implementación de estas tecnologías a menudo requiere mucho esfuerzo. Sin embargo, con algunas advertencias, Shopify Plus sigue siendo una gran opción, ya que hace que sea relativamente fácil para los minoristas ir sin cabeza e implementar tácticas clave centradas en la velocidad.
Pros de Shopify Plus
- Excelentes API para información de producto Con la API de StoreFront, Shopify Plus ofrece una referencia decente para productos y manejo de pedidos, y las API están bien documentadas.
- El formato de la API de GraphQL StoreFront API está disponible en el formato moderno y a prueba de futuro GraphQL.
Shopify Plus contras
- Ningún marco de trabajo PWA listo para usar, Shopify Plus no admite PWA de forma nativa. Sin embargo, algunos comerciantes ejecutan PWA en la plataforma. Para hacer esto posible, la tienda puede requerir un backend para Frontend (BFF), que le permite ejecutar microservicios entre la API de la tienda y el frontend PWA. Esta es una forma de optimizar las API y evitar crear otras separadas para cada cliente (y minimizar la cantidad de lógica del lado del cliente).
- Shopify Plus no ofrece ninguna solución patentada de páginas móviles aceleradas (AMP) (aunque la implementación de AMP es posible con aplicaciones de pago del Shopify App Marketplace).
- Cobertura de API Mientras que Shopify tiene API decentes en torno a los productos, y no hay cobertura completa de API para muchas otras cosas. Por ejemplo, si bien el panel de control de Shopify Plus permite a un comerciante establecer los elementos en el menú de navegación del sitio, no hay una API para obtener esos elementos del menú. Una implementación de Shopify Plus sin cabeza no ofrece una manera limpia de acceder a ellos sin un poco de lucha libre y soluciones.
- Throttling Shopify Plus limita la cantidad de solicitudes que puedes realizar como un solo usuario. Shopify Plus tiene un encabezado especial para llamadas a API, por lo que la capa BFF no se cuenta como un solo usuario. Sin embargo, debido a los problemas de cobertura de API mencionados anteriormente, las solicitudes pueden no ser siempre llamadas a API reales, y la capa BFF aún las contará como provenientes de un solo usuario. Esto sucede a pesar de que la capa es tráfico de proxying para muchos usuarios.
Cómo Edgio (Layer0) puede simplificar el proceso
Entendemos que leer sobre todos esos acrónimos de tecnología de tres letras PWA, SSR, AMP y BFF puede hacer que su cabeza gire, sin mencionar la implementación de estas tecnologías por su cuenta podría ser un poco molesto. Edgio (Layer0) maneja todo esto por usted de una manera eficiente y escalable que requiere poco o ningún DevOps o mantenimiento.
En Edgio (Layer0), nos dedicamos a ayudar a nuestros clientes a ganar visibilidad, alcance, ingresos y satisfacción del cliente con la única plataforma que garantiza cargas de páginas de menos de segundos para sitios web de comercio electrónico basados en bases de datos.
Ayudamos a los sitios web de comercio electrónico complejos y dinámicos a alcanzar velocidades de menos de segundos al tiempo que aumentamos la velocidad de desarrollo y el crecimiento de los resultados y reducimos los costos de DevOps.
No ganamos a menos que nuestros clientes lo hagan. Tenemos tiendas Shopify instantáneas en nuestra cartera que dieron el salto de fe para asegurar su posición en el panorama altamente competitivo del comercio electrónico.
Cómo Planet Blue lanzó con éxito una tienda Shopify Plus instantánea en Moovweb XDN
Planet Blue pasó de transiciones de navegación de 16 segundos a 500 milisegundos en Layer0 (Edgio)
Planet Blue ha crecido de ser un proveedor de una sola tienda de ropa orgánica curada a un diseñador internacional y minorista de ropa omnicanal. Su Shopify Store instantánea en el ç les permite ofrecer una experiencia de compra superior.
Antes de lanzarse en tayer0, las páginas móviles de Planet Blue tardaron 10 segundos en cargarse. Más del 70% del tráfico móvil del minorista afectó seriamente sus tasas de conversión. Planet Blue entendió que era necesario reformar su experiencia móvil para satisfacer las demandas de los clientes y seguir siendo competitivos. El lanzamiento en Layer0 redujo el tiempo de navegación en un 95% (16seg → 0.5seg en escritorio y 10seg → 0.5seg en móvil), dando la impresión de un catálogo online sin fricciones a medida que los usuarios navegan por el sitio web.
Resultados de Planet Blue con Layer0:
- 31% YoY de elevación en la tasa de conversión con un sitio instantáneo en el Layer0
- transiciones de 16s → 0.5s que reducen las velocidades en un 97% en el escritorio
- transiciones de 10s → 0.5s que reducen las velocidades en un 95% en dispositivos móviles
- 60% de reducción en cargas de primera página en promedio en todos los dispositivos
- 20% + aumento en las calificaciones de satisfacción del cliente con páginas cargando en un abrir y cerrar de ojos
- Un eCommerce PWA increíblemente rápido construido con React StoreFront
- Renderizado del lado del servidor y soporte AMP
- Prefetching predictivo
- CDN-as-JavaScript para optimizar las tasas de éxito de la caché para el contenido dinámico en el perímetro para que la tienda pueda predecir los clics del comprador 5 segundos antes.
Resumen
La transición a una arquitectura de comercio sin cabeza es una iniciativa importante para muchos minoristas: Macy’s, Walmart, Target, Nike, Airbnb y más ya han hecho el cambio. La tendencia está ganando fuerza por tres razones principales: Ofrece libertad de las limitaciones de las herramientas frontend de la plataforma de comercio electrónico, permite la implementación de las mejores tecnologías web que aumentan la velocidad del sitio web y el SEO, y permite implementaciones fáciles de casos de uso futuros.
Con algunas advertencias discutidas anteriormente, Shopify Plus se presta bien para construir una tienda sin cabeza e implementar tecnologías clave centradas en la velocidad. ¿Puedes permitirte quedarte atrás?
