La temporada navideña está a la vuelta de la esquina. ¿Está su tienda a la altura del desafío? Ya es hora de que verifiques tu Magento 2 y lo optimices. Y esperamos que nuestra descripción detallada de Magento nativo y las opciones personalizadas lo ayuden con esa tarea.
Así que ahí vamos.
Resumen del artículo [ ocultar ]
- Optimización en Magento 2
- ¡Obtenga nuestra guía PDF GRATUITA sobre la optimización de JS!
- Opciones de optimización nativas de Magento 2
- Optimización HTML en Magento 2
- Optimización de JavaScript
- Opciones de optimización de CSS
- Flat Tables para Magento 2 más rápido
- Otros ajustes
- Complementos de Amasty
- Optimización JS personalizada
- Lazyload imágenes y otras técnicas
- Optimización de carga diferida para imágenes
- Opciones de optimización nativas de Magento 2
- Resumir
Optimización en Magento 2
Magento es un sistema flexible bastante amigable con la optimización. Pero hay un pequeño problema.
Las configuraciones prácticas de Magento y sus combinaciones son numerosas, y se necesita un poco de esfuerzo para comprender cuál de ellas requiere su tienda. Además, están dispersos por todo el tablero de configuración, por lo que en caso de que no tenga una guía voluminosa o un gurú de la optimización inteligente a mano, sus posibilidades de tener éxito en la optimización de Magento se reducen a cero. Este es el principal problema de Magento.
Magento 2 también ofrece un conjunto completo de configuraciones de optimización predeterminadas, y algunas de ellas mejoran el rendimiento del sitio en GTmetrix y PageSpeed Insights. Algunas configuraciones, como Usar categoría de catálogo plano y Usar producto de catálogo plano que describí y Minimizar HTML , son bastante populares, mientras que otras no lo son.
Para ahorrarle la molestia de saltar entre páginas de configuración y módulos, explicaré estas configuraciones en nuestra herramienta de optimización. Su ventaja clave es que nuestros desarrolladores lograron poner todas las configuraciones de optimización de Magento 2 en 1 página.
¡Muchas gracias, chicos!
Y hay un par de características nativas de Magento 2 que ayudan a impulsar los resultados de optimización. Pero primero lo primero.
¡Obtenga nuestra guía PDF GRATUITA sobre la optimización de JS!
Deja tu email y te lo enviamos en el momento.
if (!window.mc4wp) {
window.mc4wp = {
listeners: [],
forms : {
on: function (event, callback) {
window.mc4wp.listeners.push({
event : event,
callback: callback
});
}
}
}
}
})();
Opciones de optimización nativas de Magento 2
Magento 2 de hoy ofrece un conjunto de configuraciones bastante útiles para la optimización. Este conjunto puede ser suficiente para optimizar una tienda intermedia que opera en toda la región. Pero en cualquier caso, la optimización no es una tarea fácil. Se puede comparar con cruzar un peligroso río de montaña. Cuando consigamos cruzarlo, la tarea de optimización estará cumplida.
Partimos.
Inicie sesión como administrador y vaya a Tiendas > Configuración > Optimizador de velocidad de página de Google:
Verá una lista de configuraciones. Los optimizaremos uno por uno.
Así que empezamos con HTML.
Optimización HTML en Magento 2
La configuración de Minimizar HTML en la pestaña HTML ayuda a descartar elementos de código de página que no son necesarios para cargar la página a través de un navegador.
Volviendo al ejemplo . Imagine que para cruzar el ancho río, tiene que cruzar un puente colgante con algunos de los escalones rotos o faltantes. Para cruzar el río con seguridad, tienes que arreglar el puente.
Aquí la situación es muy parecida. El código de página estándar tiene pausas, comentarios y otros elementos que son irrelevantes para la carga de la página. Entonces, para acelerar la carga de la página, debe deshacerse de ellos. Y esto es lo que hace la minificación.
Entonces, si activamos la configuración Minify HTML , la cantidad de símbolos a cargar disminuye, al igual que el tamaño del archivo.
Ahora pasemos a la segunda pestaña: JavaScript.
Optimización de JavaScript
Aquí puede encontrar una herramienta de optimización de JS personalizada y opciones nativas de Magento para la optimización de JavaScript. Empezaremos con el segundo caso.
Combinar archivos JavaScript permite unir todos los archivos JS, lo que reduce la cantidad de solicitudes HTTP que se requieren para cargar JavaScript en la página.
De vuelta al puente . Ahora la superficie del puente está hecha de asfalto, y podemos atravesarlo fácilmente hasta el otro lado. Sin embargo, ahora el puente se volvió pesado y puede caer al río. ¿Asustado? No seas, lo haremos más ligero. Para hacerlo, pasemos a la siguiente configuración.
Habilitar el paquete de JavaScript también se usa para reducir la cantidad de consultas. Pero en este caso, dividimos el JS unido en varios archivos de tamaño pequeño.
De vuelta al puente. Esta vez no echamos asfalto sobre la superficie del puente. Intentamos allanar el camino utilizando baldosas de hormigón ligero. Esto ayuda a alcanzar el punto óptimo, lo que permite que el puente cruce de forma rápida y segura sobre el puente de máxima ligereza.
Minify JavaScript Files, al igual que Minify HTML , elimina todos los elementos que no son necesarios para cargar una página, creando un camino fácil hacia nuestro objetivo, que es llegar al otro lado del río rugiente.
¿Crees que está hecho? Realmente no. Solo espere y vea qué hacen otras configuraciones.
Mover JavaScript a la parte inferior de la página transfiere elementos JS a la parte inferior de la página. Esto lo ayuda a comenzar a cargar JS y mostrárselo a los usuarios en una sola acción.
De vuelta al puente. Imaginemos que nuestro buen puente viejo tiene 100 m de largo. Hay que cruzarlo siguiendo una regla específica: correr 5 m > caminar 10 m > correr 7 m > caminar 14 m y así sucesivamente. Tenga en cuenta que la longitud del segmento se elige al azar. Con Mover JavaScript al final de la página activado, la regla cambia: ahora puede ejecutar la suma total de segmentos, pero solo al final del puente.
De esta manera harás el cruce más rápido, sin perder tiempo en acelerar y desacelerar.
Y pasamos a CSS.
Opciones de optimización de CSS
El bloque CSS utiliza la estructura y los términos que ya conocemos. Aquí trabajaremos en descartar los elementos innecesarios, la compresión y la transferencia efectivas:
Por regla general, los archivos CSS se optimizan junto con los JS, ya que los dos tipos están estrechamente relacionados en el código de la página.
Ahora pasemos a otra sección: Mesas planas.
Flat Tables para Magento 2 más rápido
Esta es una de las herramientas de optimización más populares para sitios (tiendas electrónicas) que trabajan con big data:
Para obtener más información, lea nuestra publicación de blog sobre el uso del catálogo plano para la optimización .
Y pasamos a la última pestaña.
Otros ajustes
Esta pestaña incluye 2 configuraciones útiles:
- Firmar archivos estáticos que permite a los navegadores renovar automáticamente los elementos de la página en caché. Esto evitará situaciones en las que los navegadores carguen copias de páginas en caché desactualizadas y dañen la experiencia de usuario.
- Indexación asincrónica : una configuración de seguridad que ayuda a evitar conflictos entre las operaciones de lectura y escritura en la base de datos, lo que crea un almacenamiento temporal para los pedidos, que luego se mueven de forma masiva a la cuadrícula de Gestión de pedidos.
Complementos de Amasty
Nuestros desarrolladores lograron no solo ubicar convenientemente todas las configuraciones de optimización de Magento, sino también agregar algunas características útiles.
¡Solucione todos los factores de ralentización de la página con un módulo Magento 2!
IR A LA EXTENSIÓN→
Junto con la configuración de optimización nativa, aceleran la carga de la página con una mayor eficiencia.
Entonces, ¿qué características adicionales hay? Los describimos a continuación.
Optimización JS personalizada
Ahora vuelve a la pestaña de JavaScript. Allí encontrará la configuración de optimización de Amasty JS . Elija Habilitado (Recomendado) en el menú desplegable: 
Ahora podrá optimizar la página JS mediante el algoritmo que optimiza los archivos JS relevantes y descarta los redundantes. Para obtener más información, consulte la guía fácil de seguir .
Nuestra herramienta no es el único complemento útil que tiene el módulo. Hay algunas opciones que permiten la optimización de imágenes.
Lazyload imágenes y otras técnicas
Varias imágenes (productos, elementos de diseño y más) conforman una gran parte de una tienda Magento 2. Con eso en mente, decidimos agregar la opción de optimización de imágenes para imágenes JPEG, GIF y PNG. Sólo tenga en cuenta lo siguiente:
Si establece Optimizar imágenes en SÍ , comprimirá las imágenes y acelerará la carga de la página sin dañar la calidad de la imagen. Esto es posible gracias a una variedad de configuraciones flexibles disponibles, como Optimizar automáticamente las imágenes en el catálogo o la carpeta Wysiwyg , la herramienta de optimización JPEG, la herramienta de optimización PNG, la herramienta de optimización GIF , Usar el formato de imagen Webp , Crear imágenes en resoluciones más pequeñas y más.
Tenga en cuenta que puede aplicar esta configuración a las imágenes recién cargadas a través de menús desplegables:
Es posible adaptar las imágenes a diversos dispositivos, incluidos teléfonos inteligentes y tabletas. La configuración de optimización de imágenes en el módulo también le permite cortar y comprimir imágenes cuando sea necesario.
Para obtener más información sobre la optimización de imágenes, consulte esta sección de la guía.
Optimización de carga diferida para imágenes
Esta configuración le permite optimizar la carga de imágenes en su sitio.
La herramienta permite elegir la opción de carga de imágenes que mejor se adapte a su tienda electrónica. Por ejemplo, Use Lazy Loading Images = Yes activa la carga de imágenes retrasada. Las imágenes aparecen solo cuando un usuario se desplaza hacia ellas, lo que acelera la carga de la página.
Resumir
No existen reglas estrictas para promocionar y acelerar su tienda electrónica.
Habiendo reunido la configuración de optimización de Magento 2 en una solución , nuestros desarrolladores dejan la implementación exacta para usted. Puede combinar numerosos ajustes y experimentar para encontrar la configuración de ajuste óptima.
Y quién sabe, en algún momento, esta combinación podría incluso ayudarlo a clasificarse más alto que Amazon.
PD ¿No te has dado cuenta? Hemos cruzado el río; es una victoria!