Más allá de la optimización: Los secretos detrás de las tiendas Magento 2 más rápidas

Fuente:nngroup.com

Una tienda de comercio electrónico más rápida y sin fricción puede mostrar al usuario más productos en una sola sesión. Esto, a su vez, aumenta las tasas de conversión. En un escenario ideal, la tienda y su interfaz deben salir del camino y ser solo un telón de fondo para una gran experiencia de compra.

Además, al igual que la mayoría de las tiendas de comercio electrónico, lo más probable es que ofrezcas un producto en un mercado donde las personas son muy sensibles a los precios. Lo que empeora las cosas: Sus competidores pueden ofrecer los mismos productos a precios similares. En este caso, tu ranking SEO y tu experiencia en el sitio web pueden estar entre las pocas formas restantes de diferenciarte. Y estos dos están más conectados de lo que muchos vendedores se dan cuenta.

Google favorece los sitios web rápidos

Con la actualización de Google Page Experience a la vuelta de la esquina, es crucial prestar mucha atención a la velocidad de tu sitio web. La optimización de los sitios web de comercio electrónico para la velocidad se ha identificado como una de las principales iniciativas para muchos minoristas en 2020 y más allá. Y cuando la actualización algorítmica de la experiencia de la página se despliega, los sitios más lentos se deslizarán rápidamente en los rankings de búsqueda y la posición SERP. Ahora es el momento de tomar medidas.

La primera página de los resultados de búsqueda de Google recibe casi el 95% del tráfico web, dejando solo el 5% para las páginas SERP restantes. Y aunque Google siempre ha sido muy vago sobre su algoritmo RankBrain y cómo se ponderaron sus diferentes componentes, sabemos con certeza que comenzar la velocidad de 2021 va a jugar un papel clave en el ranking de búsqueda. Es muy probable que esta sea la primera vez en la historia cuando Google está abriendo el kimono en las señales específicas que afectan los resultados de búsqueda.

No optimizar tu tienda Magento 2 para la velocidad te pone en riesgo de perder tráfico orgánico y clientes potenciales. Muchas tiendas, incluso las grandes marcas, que no toman medidas en 2020, pueden ver que su tráfico de búsqueda disminuye y sufren pérdidas sustanciales de ingresos. Los sitios web que ofrecen experiencias más fluidas, mejores y rápidas comenzarán a dominar las palabras clave orgánicas más buscadas.

Ofrezca grandes experiencias, no solo productos

Al igual que muchas otras plataformas de comercio electrónico, Magento 2 se construyó originalmente con un enfoque de backend y data-first, y muy poco enfoque en la experiencia real del cliente final y la velocidad del sitio web. Su enfoque está en las SKU, no en las personas. Esto coloca la carga de la optimización de la velocidad del sitio web en los clientes de las plataformas, integradores de sistemas, diseñadores y desarrolladores.

Ya sea que su tienda funcione en Magento 2 o cualquier otra plataforma de comercio electrónico o sistema de backend popular, si desea ofrecer la experiencia más rápida que hay, necesitará implementar tecnologías web avanzadas enfocadas en la velocidad, y para eso primero debe ir sin cabeza y construir un frontend portátil.

Para un resumen completo de lo que es el comercio electrónico sin cabeza y por qué es fundamental para las cargas de paginas instantáneas, vea este webinar.

Sigue leyendo para conocer las tácticas clave detrás de los sitios web más rápidos de Magento.

La tecnología detrás de las tiendas Speedy Magento 2

La velocidad del sitio es especialmente importante para el comercio electrónico, ya que comprar en línea es inherentemente una experiencia muy visual. Las tiendas suelen ser sitios web con mucha imagen y lo último que los compradores quieren ver es páginas de productos de carga lenta, imágenes granuladas y jank.

Al optimizar tu tienda Magento 2 para mayor velocidad, puedes implementar una serie de tácticas para hacerlo más rápido: Usa un tema ligero, optimiza imágenes, elimina el código javascript que bloquea el procesamiento, etc. Puedes tener todo un equipo optimizando tu sitio web, pero el problema es que todas estas técnicas estándar de optimización de velocidad implican ajustar cosas que suelen suceder después del toque. Hacer que su sitio web sea realmente rápido requiere una combinación de tecnologías que se ejecutan bajo el capó antes de que el cliente incluso haga clic en cualquier cosa. Necesitas pasar de reaccionar al grifo a anticiparlo (más sobre eso más adelante).

Muchas de las tecnologías web orientadas a la velocidad requieren separar el backend del frontend, es decir, hacer que el frontend sea portátil, o suscribirse a una arquitectura de comercio sin cabeza. Going Headless hace que sea más fácil usar las mejores soluciones para su frontend y backend independientemente el uno del otro, para que pueda ofrecer el sitio web más rápido en el backend de su elección.

Una vez que te vayas sin cabeza con tu sitio web de comercio electrónico Magento 2, puedes usar un frontend portátil creado para la velocidad como una Progressive Web App (PWA). Ejecutar una tienda Magento 2 sin cabeza con un frontend PWA requiere una cobertura API sólida y una buena documentación.

Going Headless también le permite comenzar a implementar tecnologías de vanguardia adicionales que harán que su sitio web sea increíblemente rápido, incluyendo:

• Frontend portátil para transiciones de navegación rápidas
• Renderizado del lado del servidor (SSR) y soporte de AMP para primeras cargas ultrarrápidas.
• Prefetching predictivo
• Una CDN de última generación con computación de borde para optimizar las tasas de aciertos de caché para contenido dinámico en el borde y permanecer 5 segundos por delante del comprador

Vamos a investigar qué tan adecuado es Magento 2 para implementar estas tecnologías y apoyar sitios web de comercio electrónico de sub-segundo.

1. Magento 2 APIs

Una tienda sin cabeza conecta el frontend a la plataforma de comercio electrónico de backend a través de API. Antes de quedarse sin cabeza, vale la pena comprobar si su plataforma de comercio electrónico tiene una buena cobertura de API y si puede conectarse fácilmente a una tienda de terceros.

Magento ofrece cobertura API: Los endpoints SOAP y REST están disponibles en todas las versiones, y se agregó soporte nativo de GraphQL con la actualización Magento 2. Se pueden crear PWA y endpoints sin cabeza a través de la API de GraphQL, sin embargo, la personalización del código y/o esquema de base de datos de la plataforma puede interrumpir la compatibilidad de API.

• Magento 1 API Formatos: REST, SOAP
• Formatos de la API de Magento 2: REST, SOAP, y el más moderno GraphQL

Magento 2 hace que sea relativamente fácil crear API para soportar sitios web sin cabeza y PWA con GraphQL como una alternativa a sus API web REST y SOAP para el desarrollo de frontend.

2. Construyendo un frontend PWA para Magento 2

Los frontends portátiles PWA modernos son como las aplicaciones nativas en muchos sentidos, y su beneficio de velocidad es evidente ya que explorar el sitio web es más rápido, lo que la gente hace mucho cuando compra en línea.

Con una sensación nativa, un PWA en Magento 2 se sentirá más rápido. Sin embargo, cuando se menciona la velocidad en el contexto de PWAs, se trata más de la estabilidad de diseño que de la velocidad. A medida que vayas de página en página, estas páginas no “rebotan” como en un sitio web tradicional. Y los usuarios suelen percibir este “rebote” como cargas lentas de página.

Probablemente hayas visto esto suceder muchas veces: Entras en un sitio web y luego se carga un anuncio o un banner un par de segundos después, y todo cambia, moviendo todo el tema hacia arriba o hacia abajo. Esto resulta en clics no deseados, distracción y frustración para el comprador.

Un frontend PWA resuelve este problema. Magento PWA Studio es una colección de herramientas que permite a los desarrolladores crear aplicaciones web progresivas complejas sobre Magento 2. Desafortunadamente, PWA Studio solo está disponible en Magento 2,3 o superior, versiones a las que la mayoría de los vendedores aún no han actualizado.

Para resumir, aquí están los pros y los contras de construir un frontend PWA para sentarse en la parte superior de su tienda Magento 2.

Magento 2 Ventajas en PWAs soportados:

• Magento ofrece un poco de soporte de PWA. Magento 2 viene con los temas Base y Luma Responsive fuera de la caja. Para las PWAs, Magento 2,3 ofrece un kit de herramientas llamado PWA Studio con un tema base llamado “Venia”.
• Mejor estabilidad de diseño. Con un frontend PWA, las páginas de Magento 2 se renderizan más suavemente, es decir, las imágenes no “rebotan” mientras se cargan, incluso en páginas con mucha imagen.
• Velocidad. Si la PWA se construye correctamente, hace que el sitio web sea más rápido.

Tenga en cuenta que las dos últimas ventajas se basan en el renderizado del lado del servidor, que es posible, pero no siempre disponible para los frontends de PWA Studio. Más sobre eso más adelante.

Los desafíos de entregar los frontends de PWA en Magento 2:

• Las PWAs ofrecidas de forma nativa de Magento no son realmente más rápidas. Se necesita una infraestructura adecuada para volverse increíblemente rápido. A veces, una PWA puede incluso ralentizar su sitio web sin la tecnología adecuada para soportarlo (como el renderizado del lado del servidor y CDN con computación perimetral). Muchas tiendas grandes cometen ese error. Suena un poco contra-intuitivo, pero es cierto: Entras en el PWA para ganar velocidad, pero puedes terminar ralentizando tu sitio web. Nuestro análisis muestra que los 500 principales sitios web de comercio electrónico de EE.UU. Que ofrecen PWAs no se cargan mucho más rápido que sus homólogos que no son PWA, con un promedio de 4 segundos.
• Sin SSR & AMP, el primer clic sigue siendo lento. Magento PWA Studio no admite SSR o AMP fuera de la caja, por lo que las cargas de la primera página no son tan grandes. Además, la primera carga no es tan rápida porque al acceder a una PWA descargas toda la “app”. Las cargas de PWAs de la siguiente página son notablemente más rápidas que los sitios web tradicionales de varias páginas.
• PWA Studio de Magento es similar a otras opciones de frontend de código abierto, pero PWA Studio está diseñado específicamente para la plataforma. Esto significa que usted permanece encerrado en el ecosistema de Magento, lo que reduce parte del valor del comercio sin cabeza.
• Construir un PWA en Magento usando el PWA Studio nativo requiere un conjunto de habilidades y una cadena de herramientas diferentes al desarrollo tradicional de Magento.
• Magento PWA Studio solo está disponible en Magento 2,3 o posterior. La mayor parte de las tiendas Magento aún no se ha actualizado a Magento 2,3.

En general, elegir un framework PWA portátil y de código abierto (es decir, uno que no esté integrado de forma nativa en la plataforma, pero que ofrezca una conexión API natural) es una mejor opción que el framework producido por el proveedor que Magento ofrece en PWA Studio.

Marcos de frontend de terceros para Magento 2

Las opciones de frontend de código abierto y ofrecidas por el proveedor son gratuitas, pero el frontend producido por el proveedor no es portátil. Por supuesto, probablemente puedas llevarlo a otra plataforma con un poco de esfuerzo, pero ciertamente no fue diseñado para permitirlo. Los frontends ofrecidos por VENDER, como los construidos con PWA Studio, están construidos por plataformas de comercio electrónico para tener una respuesta de PWA, no porque tengan la intención de permitirte llevarlos contigo cuando vuelvas a plataformas.

Cuando buscas un frontend PWA que funcione con tu tienda Magento 2, lo ideal es que busques un framework isomórfico, es decir, uno que represente la misma página en dos versiones. No tienes que escribirlo dos veces, lo escribes una vez. La primera página es renderizada del lado del servidor, y la navegación es renderizado del lado del cliente.

Hay algunos marcos isomorfos sin cabeza que puedes usar para tu tienda Magento 2 una vez que te vayas sin cabeza:

• Next.js – Un gran marco de React para PWAs creado por Vercel,
• Nuxt.js – lo mismo que Next.js, pero basado en Vue,
• React StoreFront: Basado en next.js, pero viene con más capacidades de escaparate, widgets y conectores a ciertas plataformas como Magento, Shopify y SAP (Hybris). Layer0 es uno de los principales contribuyentes del framework de código abierto PWA React StoreFront.
• Angular: Permite crear frontends PWA portátiles con renderizado del lado del servidor.

Estos cuatro frameworks ofrecen renderización tanto del lado del cliente como del servidor. Esto significa que no hay compensación de velocidad para la primera carga, tanto la primera como todas las cargas posteriores en la tienda serán rápidas. Además, sabemos que a Google le encantan las páginas con tiempos de renderizado cortos, lo que da a las aplicaciones pesadas como las tiendas menos posibilidades de posicionarse bien sin SSR.

Los sitios de comercio electrónico complejos a menudo son pesados en JavaScript y necesitan más esfuerzo de Google para rastrearlos y darles sentido. Dirán que no importa, pero a Google no le gusta el renderizado del lado del cliente. Y puede haber errores y problemas si su contenido no se muestra correctamente. Idealmente, debería buscar un framework PWA que haga renderización del lado del servidor fuera de la caja, y PWA Studio de Magento no lo hace.

En pocas palabras: La experiencia nativa de PWA que obtienes con PWA Studio en Magento 2,3 no ofrece grandes mejoras de velocidad. Pero el lanzamiento de Magento PWA Studio en Layer0 le dará un sitio web más rápido.

Construyendo un Magento 2 más rápido

Las frontends portátiles sin cabeza como las PWAs tienen muchas ventajas de velocidad. Un buen PWA te llevará de lento a rápido, pero no te conseguirá instantáneamente. Para ello, debe combinar correctamente tecnologías de vanguardia, como:

1. Renderizado del lado del servidor (SSR) y AMP

Magento 2,3 ofrece herramientas limitadas para implementar renderizado del lado del servidor. Se implementa a través de plantillas de Mustache como parte de las especificaciones ASCENDENTES de Magento PWA Studio. True SSR ejecuta el código completo del lado del cliente en el servidor (no solo las plantillas de Mustache). Como resultado, SSR con UPWARD se limita a áreas específicas (como el shell de la aplicación), o los desarrolladores deben duplicar el código tanto en el código React del lado del cliente como en las plantillas de Mustache del lado del servidor para cada página o área que necesite soportar SSR.

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.

Los desafíos de implementar SSR y AMP en la tienda Magento 2:

• Magento no ofrece soporte incorporado para AMP. Apoyar AMP requiere extensiones de terceros y/o reconstruir tu tema existente para agregar estas capacidades por tu cuenta. Esto dificulta significativamente su capacidad para optimizar las cargas de primera página en dispositivos móviles.
• En Magento 2, el soporte de SSR verdadero con ASCENDENTE requiere ejecutar y mantener una flota de servidores Node.js.

2. Un CDN moderno

Una red de entrega de contenido (CDN) puede almacenar archivos multimedia. Las CDN fueron creadas para que el contenido de tu sitio web se cargue más rápido (imágenes, videos y código (JavaScript, CSS) y otras piezas de tu sitio web). Cuando alguien accede a su sitio web, la CDN acorta el camino al contenido, por lo que no tiene que ser accedido desde el servidor en todo el país. La CDN lo pone en todas las ciudades importantes, por lo que el tiempo para acceder a ese contenido es mucho más corto. Algunas personas pueden tener una CDN, pero ni siquiera lo saben.

Las CDN tradicionales están diseñadas para sitios web estáticos, para almacenar imágenes y texto y otros elementos que no cambian a menudo. Pero las tiendas modernas, con precios dinámicos y búsquedas de inventario en tiempo real, necesitan mucho más que eso.

Incluso cuando las redes móviles son cada vez más rápidas y tenemos todas estas velocidades 4G y 5G, los sitios web móviles todavía se mantienen a las mismas velocidades, generalmente alrededor de 3-5 segundos por carga de página. Esto no ha mejorado a pesar de que casi todos los principales sitios de comercio electrónico utilizan una CDN hoy en día.

Los retos de integrar una CDN con Magento 2

• La versión local de Magento no viene con una integración de CDN fuera de la caja, aunque todavía puede usar la CDN de su elección.
• Magento Commerce (Cloud) tiene un módulo de almacenamiento en caché incorporado, pero no es una verdadera CDN. Carece de los puntos de presencia distribuidos (POP) que tendría una CDN real.

Layer0 CDN-as-JavaScript puede reemplazar su CDN o trabajar junto a él. Tenemos casi 100 COP. Los sitios web en Layer0 ven un ratio promedio de aciertos de caché de 95%+ para el contenido dinámico en el borde.

Programe una conversación consultiva para saber cómo Layer0 puede ayudarle a lograr cargas de página de sub-segundo en Magento 2.

Estamos aquí para ayudar

Layer0 hace que tener una tienda Magento rápida y sin cabeza sea súper simple, desde el desarrollo y la implementación hasta las reversiones fáciles. Puede hacerlo con cualquier frontend moderno sin cabeza: Next, Nuxt, React, SAP/Spartacus, React StoreFront, Vue StoreFront; todos los apoyamos.

Velocidad y conversión de elevación. Cuando se combinan, el aumento de la tasa de conversión y el aumento de tráfico orgánico generan un efecto sinérgico para su sitio de comercio electrónico, que se traducirá directamente en ingresos. Al ejecutar una tienda más rápida, no solo está aumentando en el SERP. En mercados más competitivos, significa que sus competidores están perdiendo tráfico a su sitio web. Los sitios web en Layer0 ven un aumento promedio de 15-30% en las tasas de conversión y el tráfico de búsqueda.

Simplicidad. En Layer0, nuestro objetivo es hacer que la Web sea instantánea y simple, a pesar de que estamos apoyando la tendencia sin cabeza, que no es una tarea simple. Los sitios web en Layer0 ven un aumento del 20% en la velocidad de los desarrolladores y la agilidad empresarial simplemente al poner el código en el centro de su flujo de trabajo con nuestra plataforma JavaScript sin servidor.

Colaboración. Cada vez que escribes un nuevo código, se genera automáticamente un entorno de preproducción. Sus personas de control de calidad y las partes interesadas del negocio pueden probarlo y proporcionar retroalimentación antes de que el código se fusione.

Actualice de Magento 1 a Magento 2 en 12 semanas Y obtenga un sitio web de sub-segundo.

Verdaderas pruebas A/B. Las pruebas A/B ralentizarán tu sitio web. No tendría sentido tener un sitio web optimizado para la velocidad y luego las pruebas A/B arruinan sus esfuerzos. Con Layer0 (Edgio), puedes experimentar en tu sitio web pero aún así tenerlo instantáneo. Por ejemplo, puedes hacer despliegues canarios para el 5% de los usuarios. Con Layer0, escribe reglas de ruta como escribe su aplicación y tiene control total sobre la división del tráfico.

Layer0 también viene con monitoreo de rendimiento y paneles para rastrearlo todo.

Escala ilimitada. Incluso en el Black Friday, Layer0 escalará automáticamente para absorber el aumento del tráfico a tu tienda. Con un tercio de los compradores estadounidenses visitando un sitio web en Layer0 cada mes, sabes que estás en buenas manos.

Seguridad. El Layer0 está preparado para la empresa, PCI nivel 1 DSS certificado con WAF, DDoS y mitigación de bots compatibles de forma inmediata.

Qué éxito lo hacen las tiendas: La tienda instantánea Magento 2 de AKIRA en Layer0

Un sitio web de comercio electrónico instantáneo puede tener un impacto masivo en su resultado final. Lo hemos visto muchas veces con nuestros clientes. Por ejemplo, el gigante de regalos y flores, 1-800-Flowers vio un aumento del 50% en las conversiones de su sitio web sub-segundo. Venus Fashion es otro ejemplo, el minorista de moda pasó del 15,25% de su sitio web cargando menos de un segundo al 72,75% en la Layer0, lo que resultó en un aumento del 24% en las conversiones.

El minorista de moda AKIRA elevó su tasa de conversión en un 37,25% con un sitio web de sub-segundo en Layer0. AKIRA pasó instantáneamente por una combinación de tecnologías avanzadas:

• Un eCommerce PWA increíblemente rápido construido con React StoreFront
• Renderizado del lado del servidor y soporte AMP
• Prefetching predictivo
• CDN-as-JavaScript con capacidades de computación perimetral

Los dos primeros aseguran velocidades de página ultrarrápidas desde el aterrizaje hasta el checkout. Los dos últimos aseguran que el sitio web se mantenga 5 segundos por delante del comprador al predecir su próximo movimiento, obteniendo previamente los datos JSON desde el borde donde se ha almacenado en caché y transmitiéndolos al navegador. De esta manera, el usuario siente que todo el sitio ya está en su teléfono y ya no hay una noción de una «carga de página».

Soporte AMP sin fricción para un tráfico de búsqueda más rápido y un mejor SEO

AKIRA supera a Amazon, Nordstrom, Zappos y otros competidores multimillonarios para frases clave. ¿Cómo? El minorista de moda ofrece las primeras cargas instantáneas desde la búsqueda utilizando la tecnología de conversión AMP de React StoreFront.

Cada página del sitio web del minorista obtiene una versión AMP generada automáticamente. Esto le da al minorista la ventaja competitiva necesaria para superar a los gigantes del comercio electrónico con equipos y presupuestos mucho más grandes dedicados a la optimización de motores de búsqueda.

SSR para un tráfico sin búsqueda más rápido

AKIRA utiliza la capacidad de renderizado incorporada en el servidor Layer0 para ofrecer primeras cargas instantáneas para canales que no son de búsqueda. Mostrar, redes sociales, correo electrónico, referencias y otros promedios de tráfico no-búsqueda justo al norte de un segundo, con páginas posteriores cargando en 500ms. Esta es una ventaja competitiva en un mercado que promedia 3-5 segundos por carga de página.