Optimice la velocidad de Magento 1 y Magento 2 [Guía para principiantes]

Muchos especialistas líderes en marketing y SEO dicen que la velocidad es un factor decisivo para su sitio web . Y estamos totalmente de acuerdo con esto.

Piensa en tus usuarios. ¿Que quieren ellos? … (a) para pagar facturas en un segundo, (b) recibir resultados rápidos pero relevantes, y (c) obtener lo que quieren con solo hacer clic. Si su página carga más de 3 segundos, 53 de cada 100 visitantes abandonarán su página irremediablemente . Dejando sus páginas rápido, proporcionan información sobre el crecimiento de la tasa de rebote. En última instancia, Google ve su sitio no solo como demasiado lento sino también como uno con contenido de mala calidad y, por lo tanto, lo clasifica más bajo de lo esperado. Sin embargo, Google también asegura que incluso las imágenes reducidas pueden hacer que su página sea más digerible y, por lo tanto, de carga rápida. En 2018 afirmó que el 25 % de las páginas web de todo el mundo podrían ahorrar unos 250 KB y el 10 % incluso más de 1 MB de esta manera.

Si la cosa te parece un problema de larga data, sigue leyendo. En esta publicación, hablaremos sobre los pasos de optimización de velocidad de Magento 2, como la activación de caché, Magento HHVM, aumento de velocidad usando .htaccess, fusión y minimización de archivos CSS y JS, aumento de Magento TTFB y más.

Pero primero, pruebe su velocidad de carga actual de Magento 2 con una de las herramientas y fije los resultados en su navegador.

¿Cómo acelerar el sitio web de Magento 2?

Si su sitio Magento 2 es lento, hay 2 formas de solucionarlo. Puede intentar acelerarlo desde el backend y usar extensiones especiales, o puede necesitar optimizarlo en el servidor. Para optimizar la velocidad, intente lo siguiente:

• Reducción de imágenes
• Carga lenta
• Optimización de archivos JavaScript y CSS
• Activación de caché de Magento
• Aceleración de HTTP/2 .

Reducción de imágenes

Las imágenes demasiado pesadas pueden arruinar todo el trabajo. Supongamos que ejecutó la prueba en PageSpeed ​​Insights y, a continuación, no solo ve la puntuación media, sino también el informe detallado que se proporciona a continuación .

Aquí verás la lista de las ilustraciones de mayor peso. Uno de los consejos de Google es usar los formatos JPEG 2000, JPEG XR y WebP para reemplazar las imágenes en su servidor y ahorrar en la velocidad de carga del sitio web. Vale la pena señalar que también puede comprimir las imágenes en el nuevo formato para estar 100 por ciento seguro de que no provocarán una reducción de velocidad.

Para realizar una auditoría completa, utilice esta herramienta . Descargue una lista completa de todas las imágenes en su sitio web con sus direcciones y valores de peso y decida qué hacer a continuación: encontrar una solución que reduzca todos sus archivos multimedia pesados ​​o manejarlos manualmente. En cuanto al peso, un valor óptimo para una foto .jpeg de 400 px de ancho es de unos 35 a 70 Kb.

Carga lenta

Esta tecnología lo ayuda a ahorrar recursos al cargar imágenes innecesarias. Por lo tanto, su Magento cargará imágenes solo en caso de que un usuario se desplace hacia ellas. De lo contrario, dejará los elementos sin explotar “sin tocar”. Por nuestra parte, aplicamos uno de los elementos, puedes verlo en la página principal . Nuestra imagen liviana de «diez» se vuelve clara al cargar la página. Para obtener más información sobre la carga diferida, lea esta página oficial de desarrolladores.

¿Cómo aplicar esta tecnología a tu Magento en un click? Pruebe nuestro Optimizador de velocidad de página de Google .

Optimización de archivos JavaScript y CSS

Hay 4 técnicas de optimización JS :

• descargando cada script por separado
• empaquetado
• fusionando
• agrupación y fusión

Este último es uno de los más efectivos porque te ayuda a reducir al mínimo el número de consultas. Todos sus archivos JS separados se pueden combinar en un solo archivo. Esto lo ayudará con el ajuste del rendimiento y mejorará significativamente la velocidad promedio de carga de una página de Magento 2. El mismo enfoque también es adecuado para archivos CSS.

¿Cómo fusionar/minificar archivos CSS y JS en Magento 2?

• Combine y/o minimice CSS : vaya a Sistema>Configuración>Configuración>Avanzado>Desarrollador>Configuración de CSS , luego elija las opciones que necesita y haga clic en Guardar configuración ;
• Combine y/o minimice los archivos JS : permanezca en Sistema > Configuración> Configuración> Avanzado> Desarrollador , pero elija Configuración de JavaScript después de configurar esto, haga clic en Guardar configuración :

¿Cómo fusionar archivos CSS y JS en Magento 1?

• Combinar CSS : vaya a Sistema>Configuración>Desarrollador>Configuración de CSS>Combinar archivos CSS , elija Sí y haga clic en Guardar configuración .
• Combinar archivos JS : vaya a Sistema>Configuración>Desarrollador , luego configure Combinar archivos JavaScript en Sí , haga clic en Guardar configuración :

Si desea adoptar un enfoque complejo para la tarea, utilice nuestro Magento/Magento 2 Google Page Speed ​​Optimizer . Con esta extensión, minimizará HTML, CSS y JS, fusionará CSS y JS, moverá JS al final de la página y habilitará la optimización del rendimiento de Magento todo en uno para reducir la cantidad de consultas y su tiempo de procesamiento.

Activación de caché de Magento

Esta es una de las formas más simples y rápidas de liberar su sitio web del punto muerto. Tenemos muchos artículos útiles sobre el tema. Por lo tanto, puede encontrar todo sobre el almacenamiento en caché en Magento 1 , aprovechar el almacenamiento en caché del navegador en Magento 2 y profundizar en Magento 2 Cache Backend y 4 soluciones de almacenamiento en caché para el propósito: (1) sistema de archivos, (2) base de datos, (3) Redis y (4) Varnish, así como los pros y los contras de cada uno de ellos.

Además, si ejecuta Magento 2, no se olvide de OPcache, que se incluye con PHP 5.5.0 y versiones posteriores. El módulo utiliza la memoria compartida para mantener el código de bytes del script precompilado y acelerar la carga de su sitio web. Aprenda por qué y cómo usar OPcache en la publicación del blog de nuestro socio .

Aceleración de HTTP/2

Lo que tienes que saber sobre el protocolo es que la web se vuelve más rápida y el nuevo tipo HHTP/2 está forjado especialmente por estas razones y el tráfico móvil, por supuesto. La velocidad de carga de página rápida de 3 segundos es una “regla de oro” actual, como dicen muchos especialistas. En esto, la experiencia del usuario es uno de los algoritmos que Google considera primordial. Por lo tanto, si la nueva tecnología HTTP/2 mejora la velocidad de carga y el rendimiento del sitio, definitivamente puede esperar que Google anime a su Magento como su seguidor. Una de las formas de acelerar su sitio web es hacer menos solicitudes HTTP y la tienda Magento comenzará a funcionar más rápido.

Otra razón para pensar en esto es que en 2018 Google ya comenzó a penalizar los sitios web móviles de «cámara lenta» cuando implementó su actualización de velocidad, entonces, ¿qué sigue? (¡Algunos especialistas en SEO dijeron que viva aquí!?)

¿Cómo puede HHTP/2 mejorar su tráfico orgánico de Magento?

A pesar de los predecesores, HTTP/2 puede usar una única conexión TCP (Protocolo de control de transmisión) para enviar de forma asincrónica numerosas solicitudes de datos a su servidor. Por lo tanto, puede descargar varios archivos desde un servidor en modo ASync sin riesgos para el rendimiento del sitio.

¿Cómo verificar si su Magento carga con HHTP/2?

Simplemente puede elegir verificar esto en la herramienta de desarrollo de su navegador Chrome, simplemente presione Ctrl + Shift + i y vaya a Red desde el menú de navegación horizontal superior. ( Si no hay tal columna, agréguela haciendo clic derecho en su boca ):

Si no ve ningún protocolo http/2 en la columna, significa que no está allí. También puede verificar esto con una herramienta en línea gratuita. Ahora se sabe que el protocolo es utilizado por el 37,4% de todos los sitios web del mundo y la tendencia sigue aumentando:

Fuente

¿Cómo optimizar Magento 2?

Si su sitio es lento en localhost, puede usar técnicas de optimización del servidor como:

• reducir el tiempo al primer byte
• optimizar el archivo .htaccess
• usar la máquina virtual HipHop.

Consideremos todas estas opciones de optimización de velocidad y ayudemos a que su lento Magento 2 tenga un mejor rendimiento.

¿Qué es Magento TTFB y cómo funciona?

El tiempo hasta el primer byte (TTFB) de Magento le muestra cuánto tiempo necesita su Magento 2 para generar una página HTML, y es una de las principales métricas del rendimiento de su sitio web. Esta métrica afecta tu posición en SERP. Para analizar el proceso que consume más tiempo y reducir su TTFB de Magento 2, debe realizar una auditoría de TTFB y realizar una optimización de TTFB de Magento. Para ello, puedes ejecutar un generador de perfiles nativo de Magento .

¿Cómo auditar/reducir el tiempo de respuesta del servidor con el generador de perfiles Magento 2?

Puede habilitar y configurar el generador de perfiles de dos maneras: ya sea usando un comando o con la variable MAGE_PROFILER, consulte los documentos de desarrollo para hacerlo bien. A continuación puede encontrar qué información contiene en diferentes columnas del informe de auditoría:

• ID del temporizador : un identificador único que se aplica en la llamada a la función del generador de perfiles. Para identificar un nivel anidado de ID de temporizador, cuente los puntos a la izquierda;
• Tiempo / Promedio : uno o un período de tiempo promedio en segundos que la misma ID de temporizador tarda en pasar de la llamada de inicio del generador de perfiles a la llamada de parada;
• Cnt : identifica el número de veces que se ejecutó el bloque de código;
• Emalloc : una memoria consumida por PHP para ejecutar el bloque de código, medida en bytes;
• RealMem : toda la memoria que toma el sistema para ejecutar procesos PHP. Incluye páginas no utilizadas también.

Al ejecutar la auditoría, preste especial atención a Time y Cnt para identificar los ID de temporizador con la mayor cantidad de tiempo empleado y la mayor cantidad de código en ejecución. Una vez que lo haya definido, inspeccione los archivos de Magento para comprender dónde se colocan estos bloques. Además, cuando busque los ID de temporizador que consumen más tiempo, preste atención a aquellos con hijos, ya que las entradas de perfil están anidadas y el tiempo de una entrada incluye todos los de sus hijos. Por lo tanto, a menudo hay que bajar al primer nivel para comprender dónde están enterrados los esqueletos. Después, analícelos para ver si se ha perdido algunos patrones no optimizados o no. Digamos que ve que una plantilla se ejecuta 4 segundos 2 veces, eso es lo que hay que pensar.

¿Qué es el archivo .htaccess de Magento y cómo funciona?

Usando el archivo .htaccess, sus usuarios administradores pueden cambiar las configuraciones principales definidas en httpd.conf/apache.conf. Por lo tanto, pueden restringir el acceso a directorios por contraseña, habilitar redireccionamientos y reescrituras 301, evitar hotlinking y más. Sin embargo, el lado oscuro es que el uso de los archivos .htaccess puede ralentizar su servidor Apache. Por ello, los especialistas recomiendan no añadir demasiada información personalizada.

¿Cómo optimizar la velocidad de Magento con .htaccess?

Lo primero que puede hacer para acelerar Magento con .htaccess es deshacerse de todas las personalizaciones innecesarias que agregó al archivo o reemplazarlas. Después de eso, proceda a tareas más complicadas:

• establecer la configuración de PHP del dominio
• habilitar la compresión Magento Gzip
• y caducar encabezados.

Configuraciones PHP

El rendimiento de Magento no solo depende de la versión de PHP, sino también de la configuración de PHP del dominio. En este caso, puede preestablecer límites para los valores de PHP, como memory_limit , max_execution_time o desactivar session.auto_start o mods. Para hacerlo, use el siguiente parche de código:

div.embedPastebin { text-align:left; padding: 0; color: #000; margin: 0; font-family: monospace; background: #F7F7F7; border: 1px solid ddd; border-radius:3px; } div.embedPastebin { } div.embedPastebin div.embedFooter { background: #F7F7F7; color: #333; font-size: 100%; padding: 6px 12px; border-bottom: 1px solid #ddd; text-transform:uppercase; } div.embedPastebin div.embedFooter a, div.embedPastebin div.embedFooter a:visited { color: #336699; text-decoration:none; } div.embedPastebin div.embedFooter a:hover { color: red; } .noLines ol { list-style-type: none; padding-left: 0.5em; } .embedPastebin{background-color:#F8F8F8;border:1px solid #ddd;font-size:12px;overflow:auto;margin: 0 0 0 0;padding:0 0 0 0;line-height:21px} .embedPastebin div { line-height:21px; font-family:Consolas, Menlo, Monaco, Lucida Console,’Bitstream Vera Sans Mono’,’Courier’,monospace; } ol { margin:0; padding: 0 0 0 55px} ol li { border:0; margin:0;padding:0; } li.ln-xtra .de1, li.ln-xtra .de2 {background:#F8F8CE;} .embedPastebin ol li.li1 { margin: 0; } .embedPastebin ol li.li2 { margin: 0; }

Cuando hable sobre la optimización de la velocidad de Magento 2, use este parche:

div.embedPastebin { text-align:left; padding: 0; color: #000; margin: 0; font-family: monospace; background: #F7F7F7; border: 1px solid ddd; border-radius:3px; } div.embedPastebin { } div.embedPastebin div.embedFooter { background: #F7F7F7; color: #333; font-size: 100%; padding: 6px 12px; border-bottom: 1px solid #ddd; text-transform:uppercase; } div.embedPastebin div.embedFooter a, div.embedPastebin div.embedFooter a:visited { color: #336699; text-decoration:none; } div.embedPastebin div.embedFooter a:hover { color: red; } .noLines ol { list-style-type: none; padding-left: 0.5em; } .embedPastebin{background-color:#F8F8F8;border:1px solid #ddd;font-size:12px;overflow:auto;margin: 0 0 0 0;padding:0 0 0 0;line-height:21px} .embedPastebin div { line-height:21px; font-family:Consolas, Menlo, Monaco, Lucida Console,’Bitstream Vera Sans Mono’,’Courier’,monospace; } ol { margin:0; padding: 0 0 0 55px} ol li { border:0; margin:0;padding:0; } li.ln-xtra .de1, li.ln-xtra .de2 {background:#F8F8CE;} .embedPastebin ol li.li1 { margin: 0; } .embedPastebin ol li.li2 { margin: 0; }

compresión gZip

¿Por qué necesita Magento para habilitar la compresión gzip? El protocolo HTTPS le permite gZip los datos que envía. Le permite optimizar las páginas web y las hojas de estilo antes de enviarlas a los usuarios finales. Sin embargo, al hacerlo, puede restaurar fácilmente los datos originales descomprimiendo los archivos que comprimió. Para habilitar la compresión gZip, agregue este código a su archivo Magento gZip .htaccess:

div.embedPastebin { text-align:left; padding: 0; color: #000; margin: 0; font-family: monospace; background: #F7F7F7; border: 1px solid ddd; border-radius:3px; } div.embedPastebin { } div.embedPastebin div.embedFooter { background: #F7F7F7; color: #333; font-size: 100%; padding: 6px 12px; border-bottom: 1px solid #ddd; text-transform:uppercase; } div.embedPastebin div.embedFooter a, div.embedPastebin div.embedFooter a:visited { color: #336699; text-decoration:none; } div.embedPastebin div.embedFooter a:hover { color: red; } .noLines ol { list-style-type: none; padding-left: 0.5em; } .embedPastebin{background-color:#F8F8F8;border:1px solid #ddd;font-size:12px;overflow:auto;margin: 0 0 0 0;padding:0 0 0 0;line-height:21px} .embedPastebin div { line-height:21px; font-family:Consolas, Menlo, Monaco, Lucida Console,’Bitstream Vera Sans Mono’,’Courier’,monospace; } ol { margin:0; padding: 0 0 0 55px} ol li { border:0; margin:0;padding:0; } li.ln-xtra .de1, li.ln-xtra .de2 {background:#F8F8CE;} .embedPastebin ol li.li1 { margin: 0; } .embedPastebin ol li.li2 { margin: 0; }

Expirar encabezados

Al usar los encabezados, le dice a los navegadores que soliciten el archivo del servidor o lo tomen del caché. Para habilitar los encabezados, inserte el siguiente código:

div.embedPastebin { text-align:left; padding: 0; color: #000; margin: 0; font-family: monospace; background: #F7F7F7; border: 1px solid ddd; border-radius:3px; } div.embedPastebin { } div.embedPastebin div.embedFooter { background: #F7F7F7; color: #333; font-size: 100%; padding: 6px 12px; border-bottom: 1px solid #ddd; text-transform:uppercase; } div.embedPastebin div.embedFooter a, div.embedPastebin div.embedFooter a:visited { color: #336699; text-decoration:none; } div.embedPastebin div.embedFooter a:hover { color: red; } .noLines ol { list-style-type: none; padding-left: 0.5em; } .embedPastebin{background-color:#F8F8F8;border:1px solid #ddd;font-size:12px;overflow:auto;margin: 0 0 0 0;padding:0 0 0 0;line-height:21px} .embedPastebin div { line-height:21px; font-family:Consolas, Menlo, Monaco, Lucida Console,’Bitstream Vera Sans Mono’,’Courier’,monospace; } ol { margin:0; padding: 0 0 0 55px} ol li { border:0; margin:0;padding:0; } li.ln-xtra .de1, li.ln-xtra .de2 {background:#F8F8CE;} .embedPastebin ol li.li1 { margin: 0; } .embedPastebin ol li.li2 { margin: 0; }

¿Qué es Magento HHVM y cómo funciona?

HipHop Virtual Machine (HHMV) es una máquina virtual de código abierto que sus desarrolladores pueden instalar para ejecutar PHP5 o Hack. Aunque hace unos años hubo exageración: PHP7 frente a HHMV, el último está diseñado y luego es compatible con Facebook y ya tiene demanda debido a sus mejores presentaciones en comparación con PHP5. La máquina se creó para reducir los recursos del servidor y ofrecer resultados más rápidos. Así, usando JIT (Just In Time) transforma PHP en código máquina sobre la marcha.

Una palabra sobre HHMV vs. PHP7

Lo primero que debe saber es que tanto PHP7 como HHMV superan a las versiones anteriores de PHP. A pesar de que PHP7 es mucho más genial que todos los predecesores, también tiene margen de mejora.

Vea los últimos puntos de referencia de Kinsta para verificar una vez más, tal vez HHMV ya sea cosa del pasado. Sin embargo, si ejecuta una de las versiones anteriores a la séptima de PHP, HHMV es su oportunidad de aumentar el rendimiento de Magento. Aquí encontrará todas las guías necesarias . Tenga en cuenta que Magento 2.2+ no es compatible con HHVM .

Y eso no es todo. Si ejecuta proyectos de alta carga en su Magento 2 (solo Commerce), preste atención para configurar la replicación de base de datos opcional y la solución de rendimiento de base de datos dividida . Da una mejora máxima al rendimiento de su tienda. Además, lea nuestra publicación de blog sobre cómo mejorar la velocidad de Magento 2 usando un catálogo plano .

¿Cómo hacer que tu Magento 1 / 2 vuele con un mod?

Podemos hablar durante horas sobre las formas de mejorar la velocidad de Magento, sin embargo, todos los pasos requieren una amplia experiencia técnica, así como importantes inversiones de tiempo y dinero. Pero no se preocupe, nos encargamos de eso y diseñamos el Optimizador de velocidad de página de Google .

¡ Esta solución se ocupa de todos los indicadores de velocidad de Google PageSpeed ​​Insights !

 

• Optimiza imágenes automáticamente . Todos sus archivos JPEG, PNG, GIF se comprimirán sin pérdida de calidad.
• Minimice HTML, CSS, JS y fusione CSS y JS.
• Mover JS al pie de página .
• Firme archivos estáticos para que sus clientes vean la versión más actualizada de sus estilos y/o JS.
• Utilice la carga diferida para ahorrar recursos al cargar imágenes fuera de pantalla.
• Guarde e indexe los datos de pedidos de forma asíncrona .

Esta solución tiene todo para ayudarlo a hacer que su sitio web sea dos veces más rápido.

Verifique la configuración detallada en las guías:

→ Guía de usuario de la extensión Magento 1

→ Para la guía de usuario de la extensión Magento 2

→ Cómo el optimizador aborda las advertencias de Google

→ Preguntas frecuentes sobre el optimizador de velocidad de página de Google

Enlaces útiles:

→ Pruebas de velocidad Magento 1 vs Magento 2

Esta publicación se entregó con el apoyo del líder técnico de Amasty, Mihail Shagoiko.