Optimización de velocidad de Magento 2: formas fáciles y avanzadas

Ya conoce el ejercicio, la velocidad de la página afecta en gran medida el éxito de una tienda, ya que las tiendas con un rendimiento lento están destinadas a tener tasas de conversión más bajas y, como resultado, perder frente a sus competidores. Y dado que realizamos optimizaciones de velocidad para nuestros clientes con regularidad, creemos que es nuestra competencia brindarle técnicas actualizadas sobre optimización de velocidad en Magento 2.

Optimización de velocidad y por qué es difícil hacerlo bien

Obviamente, si la optimización de la velocidad en los sitios web de Magento 2 fuera simplemente instalar y habilitar extensiones, no tendría problemas con la optimización del rendimiento. Es mucho más complicado que eso.

Muchas variables

Debe tener en cuenta las diversas variables involucradas en la medición de la velocidad de la página. Podría ser que la velocidad de su página sea realmente fantástica en la condición ideal, es decir, si el dispositivo del usuario es capaz de procesar todo lo que le lanza. O podría ser que la velocidad de su página no sea tan mala, pero el rendimiento percibido por el usuario es terrible debido al mal cambio de diseño acumulativo.

Hay muchas variables que deben tenerse en cuenta al optimizar el rendimiento de su tienda, por lo que siempre debe identificar primero los problemas específicos.

Prioridad

E incluso si hizo su tarea e identificó todos los problemas de funcionamiento que tiene actualmente su tienda, no sería una buena idea tratar de solucionarlos todos. Según nuestra experiencia, las microoptimizaciones no hacen casi nada para mejorar el rendimiento en el mundo real, y solo debe trabajar en la optimización de los problemas que cree que son los principales obstáculos que impiden que su tienda brinde el tipo de experiencia de compra que desea.

Compensación

Cuando realmente te involucras, la optimización de la velocidad es una compensación constante entre la funcionalidad y el rendimiento: siempre debes sacrificar algo para obtener un mejor rendimiento. A veces es un tema atractivo de Magento, a veces es una extensión útil que es perjudicial para el rendimiento de su tienda.

Técnicas generales de optimización

Estas técnicas generales de optimización son indoloras y no requieren mucho conocimiento técnico para implementarlas.

1. Verifique su alojamiento actual y la versión de Magento

El alojamiento juega un papel crucial en la velocidad del sitio web, ya que cuanto mejor es un plan de alojamiento, más capaz puede su tienda mantenerse rápida a pesar del aumento del tráfico o de los grandes catálogos.

Es aún más importante que un sitio de Magento tenga un alojamiento decente para facilitar su estructura robusta y compleja. Si bien el alojamiento de Magento requiere al menos 2 GB de RAM para funcionar, el plan de alojamiento adecuado depende de la escala del sitio web.

Por lo tanto, si su sitio web actual de Magento es lento y está ejecutando un alojamiento de gama baja, es hora de actualizar para una mejora significativa de la velocidad.

>> Ver más: 12 mejores proveedores de alojamiento de Magento

2. Utilice un servicio de CDN

(Foto/WPbeginner.com)

En la cadena de suministro logística, los artículos se envían más rápido si hay un almacén ubicado cerca de la ubicación del comprador. De manera similar, CDN (red de entrega de contenido) ayuda a entregar contenido más rápido al almacenar contenido en caché en un servidor de borde cercano a la geolocalización de sus usuarios.

CDN es mejor para grandes tiendas con visitantes internacionales, así como para sitios web con mucho contenido dinámico tanto en computadoras de escritorio como en dispositivos móviles. Por estas razones, encaja perfectamente con muchos sitios de Magento.

Si bien muchos proveedores de alojamiento ofrecen servicios de CDN, también puede elegir sus propios proveedores de CDN, como Fastly o Stackpath. Después de configurar el servicio, debe configurar CDN en su backend de Magento antes de ver los cambios.

3. Carga diferida de imágenes

De todos los tipos de recursos solicitados por sitios web populares, las imágenes son el tipo de recurso solicitado con más frecuencia, cuyo número de solicitudes, en promedio, ocupa el 35,6% (escritorio) del total de solicitudes realizadas por la página. En términos de peso de la página, los recursos de imagen en promedio ocupan el 46,6 % del peso medio de la página, lo que los convierte en la fruta más fácil en la optimización de la velocidad que produce resultados impresionantes cuando se hace bien.

La carga diferida es una forma eficaz de mejorar el rendimiento de su tienda, ya que elimina la necesidad de cargar todas las imágenes a la vez. Con la carga diferida, las imágenes se cargan en un momento posterior cuando el usuario las necesita, lo que reduce efectivamente el tiempo que lleva cargar una página sin dañar la experiencia del usuario.

En Magento 2, puede implementar imágenes de carga diferida en su sitio web de Magento con extensiones como Lazy Loading para Magento 2. Hay varias extensiones más como esta que están disponibles en el mercado de Magento de forma gratuita.

4. Usa WebP

Comparado a menudo como la navaja suiza de los formatos de imagen, WebP es un formato de imagen nuevo y flexible que está ganando popularidad rápidamente y se espera que sea el reemplazo de PNG, JPEG y GIF. En comparación con las imágenes PNG y JPG, las imágenes WebP suelen ser entre un 25 y un 35 % más pequeñas y casi no pierden la calidad de la imagen.

Debido a que todavía es un formato de imagen relativamente nuevo, WebP no es compatible de manera predeterminada en Magento 2, y deberá instalar extensiones de terceros como Magento 2 WebP Images Extension para habilitar la conversión automática de imágenes a WebP.

5. Usa temas ligeros

Solo a partir de las impresiones, puede saber cuándo un tema pesado ralentiza significativamente su tienda, y los usuarios con una conexión a Internet lenta y/o capacidades de hardware obsoletas solo se verán más afectados por esto.

Para evitar esto, deberá elegir selectivamente sus temas de Magento con un enfoque puesto más en el rendimiento. Sin embargo, entendemos que es difícil determinar con precisión si un tema es realmente liviano, por lo que generalmente debe verificar si la versión de demostración del tema le parece rápida, leer más reseñas de usuarios y si desea estar seguro acerca de utilice PageSpeed ​​Insights para probar el tema a fondo.

6. Deshabilitar catálogos planos

Solía ​​​​ser que habilitar el catálogo plano era el camino a seguir si desea reducir el tiempo que lleva realizar consultas SQL. Sin embargo, a partir de Magento 2.1 y versiones posteriores, esta ya no es una buena práctica y debe abstenerse de usar cualquier extensión que implique el uso de catálogo plano, ya que se sabe que esta característica provoca una degradación del rendimiento y otros problemas de indexación.

Para deshabilitar los catálogos planos, asegúrese de configurar Usar categoría de catálogo plano/Usar producto de catálogo plano en No en Tiendas > Ajustes > Configuración > Catálogo.

7. Reduzca las extensiones innecesarias de terceros

Como siempre, acumular extensiones de terceros no siempre es una buena idea, y las extensiones de terceros pueden causar aún más problemas si se descargan/compran de fuentes que no son de confianza. Para eliminar cualquier problema potencial, las mejores prácticas son mantener su número de extensiones en una cantidad esencial, actualizarlas regularmente y solo descargar/comprar extensiones de terceros de fuentes confiables.

8. Desactive el paquete de Javascript

Javascript Bundling agrupa muchos de sus archivos Javascript en un paquete. Como resultado, el servidor necesita solicitar menos archivos Javascript, por lo tanto, lleva menos tiempo hacerlo. Esto, en teoría, debería ayudar con el rendimiento.

Sin embargo, en realidad, la herramienta JS Bundling básica integrada en Magento no cumple con esa expectativa, pero a menudo resulta en una velocidad de carga más baja. Según una prueba realizada por un miembro del intercambio de pila de Magento, el tiempo de carga promedio de su página web aumenta de 5 a 15 segundos después de habilitar JS Bundling.

El paquete JS está desactivado de forma predeterminada. Sin embargo, puede verificar si estaba habilitado antes y deshabilitarlo nuevamente navegando a

Tienda >> Configuración >> Avanzado >> Desarrollador >> Configuración de JavaScript y establezca Activar agrupación de JavaScript en No .

9. Optimizar el registro de datos de Magento

Los archivos de registro de su sitio web de Magento enumeran todos los cambios que se realizan en la base de datos. Con el tiempo, pueden acumularse hasta unos pocos GB, lo que ralentiza el rendimiento de su sitio.

La eliminación de grandes registros antiguos que ya no son relevantes para la actividad actual de su sitio es un paso necesario para mantener un buen rendimiento de velocidad.

Además, Magento genera automáticamente y con frecuencia nuevos archivos de registro, por lo que eliminar los antiguos no debería causarle ningún problema.

Para comerciantes no técnicos, puede navegar a Tienda >> Configuración >> Avanzado >> Limpieza de cola de mensajes de MySQL .

La limpieza eliminará automáticamente los archivos de registro antiguos después de un período de tiempo específico.

Magento ha establecido valores predeterminados para estos atributos anteriores, pero puede cambiarlos como mejor le parezca.

Yendo un poco más avanzado

10. Utilice el almacenamiento en caché de página completa de Varnish

Varnish Cache es un acelerador de aplicaciones web de código abierto que, según su arquitectura, puede acelerar la entrega de contenido con un factor de 300 a 1000x. Esta es la razón por la que Magento recomienda encarecidamente Varnish, ya que es una opción mucho mejor que el almacenamiento en caché de página completa incorporado. Además, dado que Varnish está diseñado para acelerar el tráfico HTTP, puede tener un tiempo de respuesta del servidor y un consumo de ancho de banda de red sustancialmente más bajos en solicitudes repetidas.

Para configurar y usar Varnish, siga la guía detallada paso a paso para hacer que su sitio web Magento 2 vuele.

Con la tecnología de Varnish, Fastly lo ayuda a lograr más por un costo

Específicamente para Magento Commerce Cloud, se requiere Fastly para su uso en entornos de ensayo y producción. En comparación con el uso exclusivo de Varnish, es un enfoque más repleto de funciones, ya que además de las capacidades de almacenamiento en caché rápidas de Varnish, también proporciona una CDN y mejoras de seguridad para su sitio web Magento 2 e infraestructura en la nube.

Los comerciantes de Magento Open Source pueden usar Fastly, pero aún debe tener en cuenta que, a diferencia de Varnish, Fastly no es una solución gratuita y tiene tarifas basadas en el ancho de banda y el uso de solicitudes por región.

Para configurar Fastly, consulte la guía oficial en Magento DevDocs.

11. Configurar Memcached/Redis

Se sabe que el almacenamiento en caché es una solución eficaz para optimizar la velocidad y reducir drásticamente el tiempo de carga.

Si bien Varnish es una solución de almacenamiento en caché para el front-end, Memcached y Redis ayudan con el almacenamiento en caché del back-end, que es muy recomendable para aplicaciones web a gran escala con bases de datos dinámicas.

Redis es más potente y más flexible que Memcached, y puede hacer todo lo que hace Memcached. Por lo tanto, es una opción más popular entre los desarrolladores. Sin embargo, Memcached es más sencillo de configurar y usar, y puede ser más ventajoso que Redis en casos específicos.

Se recomienda profundizar más para averiguar cuál funciona mejor para el entorno de su sitio web antes de intentar configurar Memcached, Redis o ambos.

12. Mover a HTTP/2

Lanzado en febrero de 2015, HTTP/2 es una nueva mejora realizada al protocolo HTTP existente. Ahora lo utiliza el 49,9 % de todos los sitios web y, a partir de ahora, verá más adopciones, especialmente porque las pruebas han demostrado que HTTP/2 ofrece una mejora de hasta el 14 % en la carga de la página y otros beneficios.

Por ejemplo, en el video de demostración a continuación, puede ver cómo HTTP/2 permite un mayor rendimiento cuando se lo lleva al límite:

En este video, tenemos cada imagen dividida en 379 mosaicos pequeños, lo que requiere que se realicen 379 conexiones separadas al servidor. Este es un escenario muy poco probable, pero nos brinda información sobre cómo funciona la multiplexación HTTP/2 y cómo puede brindar un rendimiento mucho más rápido en comparación con HTTP/1.

Para habilitar HTTP/2 para su sitio web de Magento, debe configurarlo a través de su CDN (por ejemplo, Fastly) o a través de sus servidores web (Apache). Por ejemplo, aquí se explica cómo hacerlo en Apache y Nginx.

13. Minificación

La minificación, como su nombre indica, es un método para minificar el código de tu página. En el proceso de minificación, se eliminarán todas las partes innecesarias de sus archivos HTML, JavaScript o CSS, lo que garantiza que los recursos de su página se mantengan lo más reducidos posible. La minificación es una práctica estándar hoy en día y todos los sitios web deberían aplicarla en su infraestructura, ya que es esencialmente un aumento de rendimiento gratuito.

Para habilitar la minificación de su sitio web de Magento, puede confiar en las extensiones fácilmente disponibles, como Minify HTML CSS JS, o habilitar la minificación de CSS y JavaScript directamente a través del backend de Magento. Con el último método, deberá:

• Configure su tienda Magento 2 en modo de producción
• Luego ve a Tiendas > Configuración > Avanzado > Desarrollador
• Establezca Minimizar HTML/Minimizar archivos CSS/Minimizar archivos JavaScript en Sí
• Recuerde vaciar el caché después a través de Sistema> Administración de caché

14. Vaya sin cabeza con un escaparate de PWA

Dado que la mayoría de los sitios web de Magento que tenemos en este momento todavía se basan en la arquitectura tradicional, está más limitado por la infraestructura en uso más que nada, ya que la arquitectura tradicional en sí misma es rígida, conservadora y propensa a ralentizarse con el tiempo. La arquitectura sin cabeza resuelve más o menos este problema, ya que es un enfoque que busca brindar más flexibilidad, más escalabilidad y más mejoras de rendimiento a los escaparates.

Es por eso que ve que las marcas están optando por los escaparates de PWA (que es un escaparate sin cabeza) como una forma de traer más mejoras de rendimiento, y realmente es un durmiente que solo ganará más reconocimiento en el futuro cercano.

Dado que quedarse sin cabeza a menudo implica cambios importantes en la infraestructura de su sitio web, le sugerimos que solo confíe en un proveedor confiable de soluciones Magento PWA para llevar a cabo todo el proceso por usted.

 Lectura recomendada: Beneficios de PWA para su negocio

15. Eliminar las fuentes no utilizadas

Es común probar diferentes fuentes antes de decidir cuál se ve mejor en su sitio web y luego olvidarse de ellas. Sin embargo, estas fuentes aún se agregan a su "default_head_blocks.xml" y aún se están descargando.

Si desea optimizar la velocidad de su sitio Magento, es necesario eliminar todas las fuentes no utilizadas.

Del mismo modo, si usa una fuente personalizada, debe eliminar otras fuentes predeterminadas de su tema (por ejemplo, Open Sans, Helvetica, etc.).

Puede solucionar esto anulando _typography.less en su tema.

Simplemente reubique el

 /vendor/magento/theme-frontend-blank/web/css/source/_typography.less

A

 /app/design/frontend/Vendor/Theme/web/css/source/_typography.less

Luego elimine las fuentes innecesarias en los nuevos archivos _typography.less.

Además, deberá eliminar las fuentes en el archivo default_head_blocks.xml para que no se descargue más.

 <cabeza>
...
<eliminar src="fuentes/helvética/regular/helvética-400.woff2"/> 
<eliminar src="fuentes/helvética/negrita/helvética-700.woff2"/> 
...

16. Utilice el paquete avanzado de Javascript

En el paso 8, sugerimos desactivar el paquete JS nativo de Magento por su falta de eficiencia. Sin embargo, JS Bundling sigue siendo una práctica efectiva para lograr una mejor velocidad de Magento 2 si se sabe cómo personalizarlo.

Pero primero, hablemos de cómo el paquete predeterminado de Magento JS difiere de los avanzados:

Para el paquete JS básico de Magento, puede agrupar o fusionar todos los archivos JS en un solo paquete gigante. Como resultado, cuando se requiere una página, el navegador necesita cargar este paquete JS grande y pesado, lo que inevitablemente aumenta el tiempo de carga.

Mientras tanto, con la agrupación avanzada de JS, puede personalizar sus propios paquetes para que el navegador solo tenga que descargar un paquete que sea relevante para el contenido de cada página. Como estos paquetes son más pequeños y livianos, no causarán más problemas de velocidad.

De manera flexible, puede crear paquetes para cada tipo de página o para diferentes propósitos.

Por ejemplo, personalice un paquete para las páginas de categoría y otro para las páginas de pago.

En cuanto a las instrucciones detalladas, puede confiar en la guía oficial de Magento para el paquete JS avanzado.

17. Usar aplazar la carga de JS

Cuando un navegador carga una página, carga todos los archivos Javascript, HTML y CSS de la página ubicados de arriba a abajo. Los archivos de Javascript, que a menudo se encuentran en la parte superior, se cargan primero. Una vez que se carga Javascript, el navegador continúa procesando archivos HTML y CSS.

Sin embargo, Javascript es un lenguaje más complicado, que generalmente tarda más en cargarse que HTML. Por lo tanto, para optimizar la velocidad de Magento 2, se recomienda mover Javascript al final para que se cargue solo después de que se procesen los archivos HTML y CSS.

Puede hacerlo siguiendo la guía oficial de Magento o usando una extensión de aplazamiento JS para Magento 2.

18. Habilitar la ruta crítica de CSS

Es una práctica común que los codificadores almacenen CSS en un archivo externo. Sin embargo, según Magento, todos los estilos CSS de fuentes externas bloquearán el renderizado. Para decirlo de otra manera, su página no mostrará nada si todos estos archivos no están cargados.

Como resultado, aumenta la primera métrica de pintura significativa en la información de velocidad de la página de Google y hace que la página se cargue más lentamente.

La ruta crítica de CSS permite la selección de CSS crítico mientras difiere todos los estilos no importantes. Estos estilos CSS críticos luego se minimizan y ensamblan en línea en <head> .

Por lo tanto, ayuda a mejorar el tiempo necesario para renderizar una página por primera vez. Magento ha experimentado una caída en la Primera Pintura Significativa de 3,5 a 2,3 segundos al habilitar esta función, y puede descubrir cómo lo hacen siguiendo su guía de ruta crítica de CSS.

19. Asegúrate de que esté en modo de producción

Magento tiene tres modos de funcionamiento: modos predeterminado, desarrollador y producción.

El modo de producción, que está optimizado para el rendimiento al permitir el almacenamiento en caché de página completa, paquetes JS y más, es el más recomendado para todos los sitios en vivo de Magento. Es el modo Magento más rápido, que es entre un 20 % y un 30 % más rápido que el modo desarrollador.

Verifique su modo actual ejecutando el comando:

 bin/magento desplegar:modo:mostrar

Recibirás un mensaje como este:

Modo de aplicación actual: {modo}. (Nota: las variables de entorno pueden anular este valor).

Si el modo actual no es producción, puede cambiar al modo producción ejecutando el comando:

 bin/magento deployment:mode:set {mode} [-s|--skip-compilation]

Conclusión

Con todas estas técnicas, ahora puede trabajar para que su Magento sea más rápido y, por lo tanto, obtenga una mejor ventaja competitiva sobre sus competidores. Sin embargo, debe tener en cuenta que la optimización del rendimiento no siempre vale la pena, ya que las microoptimizaciones son la mayoría de las veces un esfuerzo inútil y pasan desapercibidas en el uso del mundo real. La mejor estrategia, según nuestra experiencia, es identificar primero los problemas de impacto y centrarse solo en ellos hasta que haya obtenido los resultados que desea.

Para los comerciantes de Magento que tienen problemas con el rendimiento, aquí en SimiCart ofrecemos una amplia gama de servicios, incluida la optimización de la velocidad para su negocio. Comience a explorar sus opciones ahora y logre un rendimiento de tienda líder en la industria.