Más del 79% de los clientes abandonan una tienda si la tienda electrónica carga lentamente, y si hablamos de compradores móviles, esta tasa alcanza el 91%. La optimización de Javascript hace un esfuerzo eficiente para mejorar la velocidad de la página. ¿Cómo hacerlo en Magento 2?
Magento listo para usar ofrece 4 técnicas de optimización de código Javascript, a saber:
- Descargar cada script por separado
- Agrupación
- fusión
- Agrupación y fusión
Describiré los pros y los contras de cada método a continuación.
Así que ahí vamos.
Antes de comenzar con la optimización de Javascript, debe evaluar la velocidad de la página en su tienda. Para este asunto, usaremos PageSpeed Insights . Lo ejecutaremos en MagentoCloud, que tiene suficiente capacidad por defecto.
Resumen del artículo [ ocultar ]
- Método #1 Descargar cada script por separado
- Estadísticas relevantes
- Método #2 Agrupación
- Estadísticas relevantes
- Método #3 Fusión
- Método #4 Agrupación y fusión
- Estadísticas relevantes
- Optimización de Javascript por Amasty
- Estadísticas relevantes
- ¿La velocidad de la página es inferior a la necesaria?
Método #1 Descargar cada script por separado
Magento 2 tiene muchos archivos Javascript. Por ejemplo, el tema Luma listo para usar carga casi 200 scripts en la página de inicio. Y cada descarga de script requiere la ejecución de más de 3 operaciones:
Entonces, ¿qué tenemos en términos de tiempo? Aumenta, y cuantos más scripts tenga, más tardará la optimización.
Estadísticas relevantes
- Tamaño total de los scripts cargados : 1,6 MB (500 KB gzip);
- Número de solicitudes : 180 +10 plantillas html. Eso es mucho.
Sin embargo, este método de optimización de javascript tiene una ventaja : nos permite reducir la cantidad de errores resultantes de un código incorrecto. Se adapta mejor a los dispositivos móviles.
Método #2 Agrupación
Con este método, recopilamos todos y cada uno de los archivos Javascript disponibles en el frontend/backend y los unimos en varios archivos.
Pros : menor número de solicitudes al servidor.
Contras : con este método, descargamos literalmente todos los archivos Javascript. Da como resultado un gran tamaño total de scripts cargados. Esta peculiaridad lleva a otra estafa: es mejor que no utilice este método para dispositivos móviles, ya que los errores en los scripts pueden hacer que el sitio móvil se caiga.
Estadísticas relevantes
- Tamaño total de los scripts cargados : 6,5 MB (1,5 MB gzip);
- Número de solicitudes : 17.
Método #3 Fusión
Es muy parecido al Método n.° 1, solo que la cantidad de secuencias de comandos es un poco menor (180 secuencias de comandos en el Método n.° 1 frente a 173 secuencias de comandos en el Método n.° 3).
Método #4 Agrupación y fusión
Este método requiere el uso de los dos métodos descritos anteriormente.
Primero, aplicamos Bundling y luego unimos estos archivos en un archivo grande. Esto ayuda a reducir el número de consultas al mínimo. Esto hace que el método sea mucho más adecuado para las versiones de escritorio de una tienda que los otros 3 métodos.
En cuanto a los contras , son los siguientes:
- Un solo error en el guión descompone todo el sitio.
- El método requiere un canal de transferencia de datos estable, lo que lo hace inaplicable a dispositivos móviles.
Estadísticas relevantes
- Tamaño total de los scripts cargados : 6,5 MB (1,5 MB gzip);
- Número de solicitudes : 1.
Como puede ver, la optimización de Javascript necesita algunos esfuerzos programáticos. ¿No es su campo de especialización? Los proveedores de Magento ofrecen muchas herramientas de optimización de JavaScript y nosotros no somos una excepción.
Optimización de Javascript por Amasty
Habiendo estudiado las técnicas anteriores, hemos decidido desarrollar una solución de optimización de Magento 2 que toma las mejores funciones de cada una de ellas y ayuda a mejorar el rendimiento de Javascript. ¿Qué hay ahí dentro?
- Un archivo que tiene el conjunto básico de archivos Javascript;
- Solo 1 solicitud;
- Idoneidad tanto para dispositivos móviles como de escritorio.
Estadísticas relevantes
- Tamaño total de los scripts cargados : 1,6 MB (500 KB gzip);
- Número de solicitudes : 1.
Y eso no es todo lo que tiene para ofrecer.
¿La velocidad de la página es inferior a la necesaria?
Use una herramienta de Magento 2 para abordar los factores de ralentización de la página. ¡Reduzca el código en un 10-20%, optimice automáticamente las imágenes sin dañar la calidad!
IR A LA EXTENSIÓN→