Intro

Alcanza el 99% en Google Page Speed Insights con el tema Milkyway 2.2 para Magento y Adobe Commerce

Seguramente estés familiarizado con la frase «el tiempo es dinero». Cuando se trata de la velocidad en un sitio web de comercio electrónico, esta frase no podría ser más cierta. Incluso un milisegundo puede tener un impacto significativo en las ventas.

Contents

26 Ene, 2023 / 6 MIN read

concluye que incluso una mejora de 0.1 milisegundos puede conllevar un aumento en las transacciones de comercio electrónico del 8.4% y elevar el el valor promedio del pedido en un 9.2%. Y esto solo si hablamos de dispositivos móviles.

Los motores de búsqueda también se preocupan por el rendimiento y la velocidad. Son factores que se consideran a la hora de determinar la relevancia y la autoridad de un sitio web y pueden ayudar a posicionar mejor en los resultados de búsqueda.

Mejores calificaciones → más tráfico → más ventas.

En Interactiv4 lanzamos recientemente una nueva versión del tema Milkyway, que es parte de nuestros Optimo Accelerators para Magento y Adobe Commerce y muestran excelentes resultados en Page Speed Insights: hasta un 99% de mejora en escritorio y hasta un 90% de mejora en móvil, según la complejidad de la página.

De cara a nuestros clientes esto significa que podemos actualizar de manera segura el nuevo tema a la versión 2.2 y lograr mejores resultados para sus tiendas. Si estás pensando en migrar a Magento y Adobe Commerce pero tienes dudas sobre el rendimiento, esto ya no es un problema con Optimo Accelerator.

En este artículo del blog profundizaremos en los detalles del tema Milkyway y sus mejoras de rendimiento; también brindaremos una breve introducción a nuestros programas Optimo Accelerator para aquellos que puedan no estar familiarizados.

Table of contents:
    CAPÍTULO 1

    Qué es Optimo

    Optimo es un acelerador para Adobe Commerce y Magento que nos ayuda a lanzar tiendas de comercio electrónico 2-3 veces más rápido, con un mayor número de características respecto a lo que las plataformas de comercio electrónico ofrecen inicialmente. Este enfoque no solo nos permite lanzar tiendas en línea más rápido, sino también entregar un producto que ofrece mejores experiencias de usuario.

    Optimo fue diseñado en 4 versiones diferentes, cada una con un conjunto de funcionalidades que reflejan diferentes modelos y necesidades comerciales.

    • Optimo One – Una solución que cubre la mayoría de las necesidades de cualquier proyecto de comercio electrónico.
    • Optimo Retail – Una solución que conecta las experiencias de tus clientes de canales de comercio electrónico y minoristas.
    • Optimo B2B – Una solución diseñada para cubrir las necesidades de las empresas B2B.
    • Optimo Marketplace – Una solución que incluye la integración con Mirakl para ampliar las posibilidades de tu comercio electrónico y agregar funcionalidad de mercado.
    CAPÍTULO 2

    Qué es Milkyway

    Milkyway es el tema que se desarrolló específicamente para las soluciones Optimo. Es un tema visual único que se basa en la tecnología frontend nativa de Magento. Lo mejor es que no añade complejidad a su pila tecnológica; esto ayuda a mantener los costes de mantenimiento bajos a corto, medio y largo plazo. 

    Milkyway ofrece varios temas predefinidos para cubrir las necesidades de diferentes modelos de negocio: MilkywayMilkyway B2B, Milkyway EE y Milkyway Mirakl.

    Para ver el tema en acción, haz clic en este enlace: https://demo.optimocommerce.com

    La primera versión de Milkyway nos permitió acelerar drásticamente el desarrollo en Magento 2 y Adobe Commerce. Al mismo tiempo, brindamos una experiencia mejorada a los usuarios y esto nos permitió garantizar buenos resultados.

    La segunda versión de Milkyway se enfoca en mejorar el rendimiento y ofrecer a los usuarios una experiencia de navegación aún más rápida.

    ¿Qué ventajas ofrece Milkyway 2.2? 

    • Mejora la conversión de las ventas de tu tienda online, aumentando el ticket medio.
    • Mayor satisfacción del usuario que hace que aumente la recurrencia.
    • Mejora del SEO. El objetivo del SEO es clasificar las páginas lo más alto posible en los resultados de búsqueda y así hacer que fluya más tráfico a un sitio web.
    • Reduce los tiempos de mantenimiento y actualizaciones de tu tienda.

    Como ya mencionamos anteriormente, el rendimiento del sitio web juega un papel significativo y medible en las tasas de conversión. Los estudios demuestran una y otra vez que las páginas web con velocidades de rendimiento más altas conducen a una mayor tasa de conversión.

    Performance y conversions

    Asegurando un mejor rendimiento con Milkyway aumentarás las tasas de conversión de tu sitio web. Pero vamos al aspecto interesante: los resultados.

    A continuación puedes ver las puntuaciones (proporcionadas por Lighthouse) relacionadas con el rendimiento, la accesibilidad, las buenas prácticas y el SEO que nuestra demo de Optimo está brindando.

    Resultados de la página de inicio

    Inicio Resultados

    Resultados de la página de categoría

    Página de categoría Milkyway

    Resultados de la página de categoría

    Resultados de la página de producto

    Página de producto

    Resultados de la página de producto

    CAPÍTULO 3

    ¿Qué mejoras se realizaron en la nueva versión?

    Optimización de la carga de imágenes

    La optimización de las imágenes es crucial si deseas reducir los tiempos de carga. Esto disminuye drásticamente el tiempo de espera para los usuarios y, por lo tanto, será una fuerza impulsora para ayudar a aumentar la conversión.

    ¿Qué pasos hemos tomado para mejorar el rendimiento?

    • Optimización de todas las imágenes utilizadas en el tema.
    • Optimización de imágenes de catálogo a través del CDN, adaptando las configuraciones desde Magento y en el servidor del proveedor de la infraestructura.
    • Se aumenta el TTL de los recursos en el lado del servidor, agregando el atributo max-age a los request headers. Esto genera una mejor puntuación en Google.
    • Utilizamos la carga lazy nativa, disponible en los navegadores más recientes, evitando así carga de scripts que reduzcan el rendimiento.
    • Preload para imágenes LCP (Largest Contentful Paint). Se añade una funcionalidad para activar un preload de estas imágenes en Home, PLP y PDP.

    Optimización de la carga de fuentes

    Cada detalle importa cuando se trata de optimización. Respecto a las fuentes, mejoramos su carga y visualización, además de de reducir el número de formatos de fuente cargados, para cargar solo los necesarios.

    JS optimization

    Las mejoras de JS reducen el tiempo de espera hasta que el usuario puede interactuar con la página. Así ofrecemos una mayor sensación de velocidad.

    ¿Qué mejoras se han introducido?

      • Se reduce el código JS utilizado y se actualizan librerías para mejorar el rendimiento y evitar vulnerabilidades.
      • Se evita cargar librerías y JS innecesarias del núcleo de Magento. Así obtenemos una carga más rápida de la página.
      • Un minificado de JS avanzado, moviendo la carga de scripts al final de la página.
      • Cambio de llamadas imperativas por llamadas declarativas en require. Esto nos ayuda a ahorrar tiempo de ejecución en la carga de la página y como resultado reducimos el tiempo total de bloqueo.
            • Si tenemos menos ejecución JS nuestra página estará bloqueada menos tiempo.
            • Los scripts declarativos son asíncronos, por lo que no bloquearán nuestro hilo en el navegador al cargar la página.
            • Scripts más pequeños y con carga lazy, por lo que el contenido de la página no estará bloqueado cuando se está ejecutando.

     

    • Cambio en la forma de cargar los sliders. Uso de Snap en vez de Slick: es más rápido al estar construido con funciones CSS.
    • Uso de Rocket Loader en Cloudflare. Rocket Loader es un acelerador de Javascript para que la página web cargue más rápido. Permite obtener una experiencia de carga mucho más rápida para los usuarios y mejorar las métricas de rendimiento.

    Optimización de CSS

    Con las mejoras en el CSS reducimos la carga de estilos y creamos un código mucho más legible y reutilizable. Se disminuyen así los tiempos en el mantenimiento.

    • Limpieza de ficheros CSS eliminando código innecesario.
    • Mejor organización de estilos para facilitar los cambios.
    • Uso de propiedades de estilos modernos y compatibles en la gran mayoría de los motores de renderizado de los navegadores web.

    Mejoras en el diseño

    La versión anterior de Milkyway estaba diseñada para asegurar una experiencia de usuario fluida en el sitio web, pero no hay límites a la hora de mejorar. En la nueva versión hemos aplicado algunos cambios para asegurarnos de que la navegación es cómoda y rápida.

    Cómo te puedes beneficiar 

    Es muy fácil: no lo pienses ni un segundo más y aprovecha la oportunidad de hacer tu tienda más rápida y aumentar tu conversión.

    Si ya tienes Optimo, contacta con tu gerente de cuenta y solicita un presupuesto personalizado para el paquete de rendimiento 2023. Incluso puedes actualizar Milkyway si tienes una versión de Magento que no sea anterior a 2.4.3.

    Si tu tienda está construida en otra tecnología pero estás explorando nuevas alternativas, ¡habla con nosotros! Te proporcionaremos más información sobre nuestros aceleradores.

    ¡Construyamos algo grandioso juntos!

    ¿Quieres mejorar los resultados de tu tienda online? Póngate en contacto con nosotros.

      Elegir archivo
      Responsable: We are Marketing, S.L. responsable de la marca Interactiv4 (En adelante Interactiv4) /CIF B87012654 /C/ Orellana 5, 28004 Madrid / 910841760 / Grupo Adaptalia Legal Formativo. [email protected] | Finalidad principal: Atender las consultas y remitir la información que nos solicita. Si nos facilita su consentimiento podremos enviarle presupuestos, ofertas o información de manera posterior. | Derechos: Acceso, rectificación, supresión y portabilidad de sus datos, de limitación y oposición a su tratamiento, así como a no ser objeto de decisiones basadas únicamente en el tratamiento automatizado de sus datos, cuando procedan. | Información adicional: Puede consultar la información adicional y detallada sobre nuestra Política de Privacidad en interactiv4.com/politica-de-privacidad.