Home Artículos técnicos El secreto detrás de las tiendas Shopify Plus increíblemente rápidas
Applications

El secreto detrás de las tiendas Shopify Plus increíblemente rápidas

About The Author

Outline

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 de Shopify o de otro modo, la respuesta sigue siendo la misma: Carga de página de subsegundos 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 competencia aplastante 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ápida posible es una de las formas más fáciles de conseguir que tu tienda se clasifique más alto en SERPs y eleve tus tasas de conversión gracias a una experiencia de compra superior y sin interrupciones.

Shopify te permite entregar productos, no experiencias

Muchas plataformas de comercio electrónico como Shopify Plus, Magento o Salesforce Commerce Cloud se construyeron con un enfoque de backend y data first y muy poco enfoque en la experiencia real del cliente. Su enfoque está en las SKU, no en las personas. Esto supone una carga para 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 cualquier otra plataforma de comercio electrónico o sistema de backend popular, si quieres ofrecer la experiencia más rápida, tendrás que 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) se desvincula 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 la pena, esto es posible con la API REST DE WordPress).

Arquitectura tradicional y monolítica de comercio electrónico

Ir sin cabeza se ha 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 las tasas de conversión y las mejoras de clasificación. El comercio electrónico sin cabeza, también conocido como arquitectura de microservicios, es casi una forma segura de ganar una ventaja sobre la competencia.

Una capa API permite el desacoplamiento de la interfaz de un sitio de su backend

Más específicamente, el comercio electrónico sin cabeza ofrece varios beneficios:

1. Velocidades más rápidas

Pasar sin cabeza es un requisito previo para implementar muchas tecnologías centradas 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 más sensible que uno que deja el trabajo duro al navegador.

2. Libertad de elección

Muchas plataformas de comercio electrónico ofrecen a sus usuarios frontend 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 completamente de los grilletes del bloqueo del proveedor y llegar más allá de las herramientas 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 de backend

Una inversión en un sitio web sin cabeza prueba el futuro de la tienda. Usted es dueño del código frontend y puede desarrollar e invertir con confianza 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 su tienda tiene docenas de integraciones con herramientas de terceros, no es necesario que se reescriban para la nueva plataforma de comercio electrónico; solo tiene que cambiar las API de la plataforma anterior con las de la nueva.

4. Mejor SEO

Un sitio sin cabeza no solo es más rápido; también tiene un mejor SEO. Con un sitio web sin cabeza, puede elegir cómo manejar URL, metadatos, archivos robots.txt y otros aspectos de su SEO técnico. Shopify Plus no admite esto fuera de la caja.

5. Soporte para futuros casos de uso y puntos finales

Con un frontend sin cabeza, como las aplicaciones web progresivas (PWAs) y las aplicaciones de una sola página (SPA), el operador puede preparar la tienda para el futuro, agregar libremente nuevos endpoints y desarrollar funciones adicionales. Todo lo que necesitas hacer es conectarte a las APIs. Puedes agregar prácticamente cualquier dispositivo o plataforma como punto final y checkout para tu tienda yendo sin cabeza.

El secreto detrás de las tiendas Shopify Plus más rápidas

Ir sin cabeza 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 con mayor capacidad de respuesta. Combinados, pueden ayudar a optimizar cualquier sitio web de Shopify Plus para obtener la máxima velocidad, SEO e ingresos.

Frontend PWA portátil

Al no tener cabeza y acoplar Shopify Plus con una interfaz portátil PWA, puede obtener 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 instantáneas de página. Tan rápidas 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.

Renderizado del lado del servidor (SSR)

El renderizado del lado del servidor es una tecnología web crucial que acompaña a las PWAs rápidas. Sin la representación del lado del servidor, el navegador debe descargar, analizar y ejecutar todo el código JavaScript antes de mostrar nada en la pantalla. Las PWAs sin SSR luchan por lograr un tiempo para la primera pintura significativa (TTFMP) por debajo de 2.5s en 3g.. Junto con una CDN moderna con capacidades de computación de borde, 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, el PWA proporciona una experiencia mejorada de cargas de primera página ultrarrápidas y transiciones instantáneas de página más allá de la primera página.

El renderizado del lado del servidor también conduce a un mejor SEO. Las empresas de comercio electrónico dependen del SEO, y la única manera de estar 100% seguro de que su sitio será entendido por los bots de búsqueda y sociales y rastreadores es traducirlo a HTML.

Esto es especialmente importante si construyes un frontend PWA de comercio electrónico pesado en JavaScript para Shopify Plus. Debes renderizar tus páginas en el servidor porque los rastreadores y los bots no indexan de forma fiable el contenido de JavaScript.

Shopify Plus no viene con soporte SSR incorporado.

Páginas móviles aceleradas (AMP)

Google AMP es un marco 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 procesan previamente en el servidor de Google, que es la forma en que se entregan rápidamente.

Shopify Plus no ofrece soporte AMP o SSR verdadero fuera de la caja, lo que dificulta significativamente su capacidad para optimizar las cargas de primera página en el móvil. 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 APIs de arquitectura basadas en microservicios y comercio electrónico sin cabeza. Es una capa discreta en su 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 API compartidas de manera más eficiente sin optimizarlas para cada cliente. De manera transparente, “intercepta” 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 su frontend necesite orquestar llamadas a varios servicios y/o reformatear los datos de respuesta para adaptarse 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 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 pérdida 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 sola 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 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 algunas lógicas de UI se procesan a nivel BFF.

BFF y velocidad de desarrollo
Un BFF aumenta la velocidad del desarrollador al permitir que los distintos equipos de desarrollo trabajen de forma independiente. Permite a los desarrolladores agregar 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.

Minimizando el bloqueo del proveedor
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 forma de la flexibilidad de la arquitectura sin cabeza.

Desacoplamiento de frontend y backend basado en BFF

Prefetching predictivo y CDN con edge computing

La preobtención predictiva es una capacidad avanzada que se utiliza para pre-almacenar 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 de borde le permite transmitir datos dinámicos al borde y luego a los navegadores de los usuarios antes de solicitarlos. 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, puede almacenar en caché y servir al instante lo que los consumidores que navegan en su tienda Shopify están esperando: Los datos JSON que se traducen en los diferentes productos que tiene 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 acierto de la 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 al categorizar páginas similares como tales (por ejemplo, PDP, PLP y CART) en lugar de 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 un ratio de acierto de caché de más del 95% para contenido dinámico en el borde, mientras que el sitio web de comercio electrónico promedio tiene un ratio de acierto de caché promedio del 15%. Esta diferencia, junto con la preobtención predictiva, mantiene a los grandes sitios web de comercio electrónico 5 segundos por delante del comprador, sin importar dónde toque.

¿Qué tan difícil es ir sin cabeza con Shopify Plus?

La elección de 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 habilitan sitios de subsegundos. 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 administrar 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 construcciones sin cabeza de Shopify.

Shopify Plus ofrece una sólida colección patentada de API de StoreFront, lo que hace que sea 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 fuera de la caja. 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 salvedades, 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.

Shopify Plus pros

  • Con la API Storefront, Shopify Plus ofrece una referencia decente para los productos y el manejo de pedidos, y las API están bien documentadas.
  • El formato de API de GraphQL Storefront API está disponible en el formato moderno y a prueba de futuro GraphQL.

Shopify Plus contras

  • Sin marco de PWA listo para usar Shopify Plus no admite PWAs de forma nativa. Sin embargo, algunos comerciantes ejecutan PWAs en la plataforma. Para hacer esto posible, la tienda puede requerir un Backend for Frontend (BFF), que le permite ejecutar microservicios entre la API de StoreFront 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 es posible implementar AMP con aplicaciones de pago del mercado de aplicaciones de Shopify).
  • Cobertura de API Mientras que Shopify tiene API decentes en torno a los productos, y no hay cobertura de API completa para muchas otras cosas. Por ejemplo, mientras que 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 sin cabeza de Shopify Plus no ofrece una manera limpia de acceder a ellos sin un poco de lucha libre y soluciones alternativas.
  • La limitación de Shopify Plus limita el número de solicitudes que puede hacer 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 no siempre pueden ser llamadas reales a la API, y la capa BFF seguirá contándolas como procedentes de un solo usuario. Esto sucede a pesar de que la capa es proxying tráfico 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, por no mencionar la implementación de estas tecnologías por su cuenta podría ser un poco de una molestia. 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 subsegundos 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 subsegundos, al tiempo que aumentamos la velocidad de desarrollo y el crecimiento de la línea de fondo y reducimos los costos de DevOps.

No ganamos a menos que nuestros clientes lo hagan. Tenemos tiendas Shopify instantáneas en nuestro portafolio que dieron el salto de fe para asegurar su posición en el altamente competitivo panorama del comercio electrónico.

Cómo Planet Blue lanzó con éxito una tienda instantánea Shopify Plus en Moovweb XDN

Planet Blue pasó de transiciones de navegación de 16 segundos a 500 milisegundos en Layer0 (Edgio)

Planet Blue ha pasado de ser un proveedor de una sola tienda de ropa orgánica curada a un diseñador internacional y minorista de ropa omnicanal. Su tienda instantánea Shopify 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ó gravemente sus tasas de conversión. Planet Blue entendió que se necesitaba una revisión de 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% (16sec → 0.5sec en el escritorio y 10sec → 0.5sec en el móvil), dando la impresión de un catálogo en línea sin fricción a medida que los usuarios navegan por el sitio web.

Resultados de Planet Blue con Layer0:

  • 31% YoY elevación en la tasa de conversión con un sitio instantáneo en el Layer0
  • 16s → 0.5s transiciones que reducen las velocidades en un 97% en el escritorio
  • transiciones de 10s → 0.5s que reducen las velocidades en un 95% en el móvil
  • reducción del 60%+ 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 PWA de comercio electrónico 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 acierto de caché para contenido dinámico en el borde 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 de las principales iniciativas 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 salvedades discutidas anteriormente, Shopify Plus se presta bien a la construcción de una tienda sin cabeza e implementación de tecnologías clave centradas en la velocidad. ¿Puedes permitirte dejarte atrás?