¿Cómo aborda Optimizer las advertencias de Google?

La velocidad de la página es uno de los factores de clasificación para Google. Entonces, casi todos los propietarios de tiendas piensan en cómo optimizar el rendimiento de Magento.

Puedes consultar ahora mismo tu sitio web en PageSpeed ​​Insights para obtener una puntuación entre 0 y 100. Una puntuación de 0 suele indicar un error en PageSpeed ​​Insights. 100 es la mejor puntuación posible, lo que representa un sitio de alto rendimiento.

Si su puntaje es inferior a 90, entonces recibe recomendaciones de Google sobre cómo mejorarlo. En esta publicación, consideraremos cómo puede resolverlos todos con una solución de optimización .

Carga lenta de imágenes

La carga lenta de imágenes, fotos y gifs es uno de los problemas más evidentes para cualquier tienda Magento. Obstruyen la carga rápida de páginas. Por ejemplo, sus administradores pueden olvidarse de apretar las imágenes, o sus diseñadores pueden usar imágenes en formato PNG, o cargar la misma imagen dos o más veces, etc. Como resultado, incluso los sitios web de alto rango pueden recibir tales recomendaciones:

 

¡Acelere su tienda Magento en unos pocos clics!

 

Solución: Optimizar imágenes

Este debería ser el primer paso para acelerar Magento, ya que puedes hacerlo sin la ayuda de ningún desarrollador. Los principales errores en PageSpeed ​​Insights parecen:

Sirve imágenes en formatos de última generación.
Imágenes del tamaño adecuado.

Google sugiere usar formatos como JPEG 2000, JPEG XR y WebP, en lugar de PNG o JPEG. Pero, ¿y si ya tienes miles de imágenes en tu servidor? Puede convertirse en un problema convertirlos todos uno por uno.

Además, aunque Google no tiene requisitos especiales, existe una dificultad más: la pérdida de calidad:

Sabemos cómo resolver este problema. Este  optimizador de velocidad de página de Google puede reducir el tamaño de sus imágenes sin pérdida de calidad. En su panel de administración de Magento, puede elegir las carpetas necesarias para optimizarlas de forma masiva. Utilizamos herramientas de optimización especiales para JPEG , PNG , GIF , WEB . Por lo general, lleva de 5 a 10 minutos optimizar 1000 imágenes.

Además, si tiene un tráfico pesado de dispositivos móviles o tabletas, puede crear copias de sus imágenes con una resolución adecuada para dispositivos móviles. Hay 2 algoritmos: recortar y cambiar el tamaño. El algoritmo Recortar reduce la imagen al ancho o alto máximo y luego corta el exceso. Y puede ser desproporcionado con respecto a la imagen original. Y el algoritmo Resize comprime las imágenes según el tamaño de la imagen.

Después de eso, genera una cola basada en su configuración, que describimos anteriormente, y especifica el valor que indicará la cantidad de imágenes para optimizar en una sola solicitud a los archivos de la base de datos. A continuación, haga clic en el botón Ejecutar optimización ahora. Se iniciará el proceso de optimización de acuerdo a su configuración. Puede cambiar la configuración, generar la nueva cola y ejecutar un nuevo proceso de optimización en el futuro.

Carga diferida del sitio web

Los usuarios no ven la página completa de su sitio web en un momento. Para que pueda aprovecharlo y habilitar el sistema de carga diferida. Significa que las imágenes de su página se descargarán a pedido. Te ayuda a evitar este mensaje de Google:

Aplazar las imágenes fuera de pantalla.

Nuestro Optimizer tiene dos opciones: simple y avanzado .

La carga diferida simple tiene las siguientes configuraciones: usar imágenes de carga diferida, secuencia de comandos de carga diferida, imágenes precargadas, número de imágenes precargadas, estrategia de imágenes precargadas, ignorar imágenes que contienen .

Habilite Lazy Loading Images para hacer que las imágenes fuera de pantalla se carguen cuando un cliente se desplace hacia ellas. Pruebe 2 scripts diferentes jQuery Lazy Script y Native JS Lazy Script para elegir el que mejor se adapte a su sistema.

Establezca imágenes precargadas para cargar el sitio web sin problemas. Estas imágenes se cargarán en el flujo principal. También puede decidir qué usar la estrategia de recarga previa de imágenes :

• Formato WebP + Resolución de imagen : esta opción es mejor para la optimización de la velocidad, pero a veces puede generar algunos errores, como problemas con las muestras.
• Formato original de las imágenes : con esta opción, las imágenes se cargarán en el formato predeterminado.

La opción avanzada permite una amplia gama de personalizaciones. Por ejemplo, puede desactivarlo para algunas páginas o usar otro Lazy Load Script, ya que varían al aplicarse a diferentes páginas.

Archivos JavaScript + CSS

Los archivos JavaScript y CSS son otro dolor de cabeza para todos los especialistas en SEO. Su procesamiento suele llevar mucho tiempo.

Minificar y fusionar CSS y JavaScript

Eliminar CSS no utilizado.
Reducir el tiempo de ejecución de JavaScript.
Minificar JavaScript.
Minimizar CSS.
Minimice el trabajo del subproceso principal.

Si recibe estos mensajes, prepárese para trabajar con el código. Google sugiere reducir las partes innecesarias del código y organizarlo en partes más pequeñas. Minimizar los archivos CSS y JS puede reducir el tamaño de la carga útil de la red y el tiempo de análisis del script. Como resultado, el tiempo dedicado a analizar, compilar y ejecutar será menor.

Pero, ¿y si no eres un desarrollador? Google Page Speed ​​Optimizer vendrá al rescate. Simplemente active la configuración y hará todo el trabajo.

Amasty JS Optimization elige los archivos JS más importantes y los fusiona en uno solo. Esto significa que su servidor procesará solo un archivo. Como resultado, su tienda funcionará más rápido. Combinar y minimizar archivos CSS funciona de la misma manera que la optimización de archivos JS.

Uso de caché

El caché incluye HTML, CSS, archivos JavaScript e imágenes que se almacenan en el navegador de los usuarios. Si su servidor está configurado correctamente, el navegador almacena en caché sus archivos estáticos. Aumentará la velocidad de respuesta del servidor porque la cantidad de solicitudes será la menor posible.

Obtenga más información sobre cómo aprovechar el almacenamiento en caché del navegador . Allí obtendrá la información sobre cómo verificar si ya usa el caché y habilitarlo en diferentes servidores.

Google Page Speed ​​Optimizer mejorará el rendimiento de Magento con archivos estáticos.

Pero no te olvides del caché de la página de Magento. Full Page Cache Warmer lo ayuda a mantenerlo en el estado actual. Guardará en caché y actualizará automáticamente todas las páginas necesarias por adelantado. Instale estos módulos juntos para obtener los mejores resultados.

Herramientas adicionales

Mesas Planas

Habilitar un catálogo plano es una opción adicional que puede usar para optimizar el rendimiento de la tienda Magento 2. Es una tabla que almacena toda la información sobre un producto o una categoría. Funciona según el principio simple: cuantas menos solicitudes se envíen al servidor, mejor. Si tienes una gran tienda con 300 productos en muchas categorías, el resultado será claro.

Indexación asíncrona

Su servidor puede experimentar cargas máximas durante la temporada de ventas activas. Esto significa que puede tener conflictos entre los flujos de tráfico de frontend y backend. Para evitar esto, utilice la indexación asíncrona. Por lo tanto, los datos del pedido se colocarán en un almacenamiento temporal y se trasladarán a la cuadrícula de Gestión de pedidos de forma segura. La carga del servidor será menor en ese caso y, como resultado, el procesamiento de pedidos será más rápido.

 

¡No necesitas ser un especialista para acelerar tu Magento!