Este artículo es parte de una serie de artículos más completa. Puedes ver en el siguiente enlace la serie completa, dedicada a la Optimización de Tiendas Magento.
En este artículo comentamos diversas técnicas que ayudarán a reducir el número de peticiones de usuarios que recibe tu servidor, lo que aumentará la capacidad de asumir visitas simultáneas.
Cuando un usuario desde su navegador web se conecta a tu tienda Magento, se debe descargar del servidor al navegador ciertos archivos, como los archivos de estilos css, archivos javascript, imágenes, tipografías si los hay, etc.
Para cada uno de estos archivos, el navegador debe conectarse a tu servidor web y descargar un archivo tras otro.
Si bien los archivos no son demasiado grandes y las conexiones hoy en día son suficientemente rápidas, si existe un número elevado de ellos, el tiempo de carga de la página completa puede verse afectado. Si existen varios usuarios navegando al mismo tiempo el número de conexiones totales a tu servidor puede crecer muy rápidamente, reduciendose el rendimiento de tu servidor.
Muchos de estos archivos (por ejemplo css y javascript, fuentes, logos, iconos, e imágenes generales) son además comunes a todas las páginas de tu Magento, y si no hacemos nada para evitarlo el navegador deberá descargarlos una y otra vez, cada vez que el usuario se mueva de una página a otra en tu tienda.
Para reducir el número de peticiones a tu servidor se pueden utilizar diversas técnicas.
Reducir el número de peticiones, no mejorará mucho el rendimiento de tu tienda cuando sólo estás conectado tú haciendo pruebas en tu entorno de desarrollo, pero cuando el número de visitas de tu tienda online comience a crecer, lo notarás y mucho.
Combinación de archivos js y css en Magento
Una de las opciones básicas de optimización de Magento que permite reducir el número de conexiones a tu servidor, es la unión de archivos js y css. Esto reduce el número de archivos de este tipo que debe descargarse un cliente, de veinte o treinta archivos, a sólo dos.
Esta optimización puede realizarse desde el administrador de Magento, accediendo a Sistema > Configuración > Desarrollador > Javascript Settings y CSS Settings
También te lo explicamos en el siguiente vídeo:
Activar la caché de navegador
Con esta optimización conseguimos que una vez descargados los archivos css, js, imágenes, etc. al navegador del usuario, éste los guarde durante un tiempo y no vuelva a descargarlos una y otra vez del servidor.
Para activar esta optimización de Magento es necesario que en tu servidor web tengas instalado alguno de estos dos módulos de apache: mod_expires o mod_headers.
El primero de ellos tiene el propósito específico de añadir esta cabecera de caché del navegador, mientras el segundo es un módulo más genérico que permite algunas cosas más.
Para ponerlo en marcha, asegúrate de tener instalada alguno de los módulos anteriores y también de que en el archivo .htaccess de la carpeta raíz de tu Magento tienes descomentadas las siguientes líneas:
<IfModule mod_expires.c> ExpiresDefault "access plus 1 year" </IfModule>
En caso de no tener instalado mod_expires pero disponer de mod_headers, añade estas líneas:
<IfModule mod_headers.c> <FilesMatch "\.(css|js|jpe?g|png|gif)$"> Header set Cache-Control "max-age=5259487, public" </FilesMatch> </IfModule>
Combinar iconos, logos e imágenes
Con esta técnica, pretendemos reducir el número de peticiones correspondientes a imágenes.
Imagina la siguiente situación habitual: en tu tienda Magento, probablemente tendrás en algún lugar unos iconos de redes sociales, y también tendrás probablemente logos de las tarjetas de crédito aceptadas, o de algunos medios de pago o agencias de transporte. También tendrás iconos gráficos, bullets u otros pequeños elementos gráficos auxilares que utilices para la maquetación de tu plantilla en Magento.
Al igual que ocurría con los archivos css y javascript, podemos combinar todos esos pequeños archivos en un único archivo de imagen y referenciar este archivo siempre que lo necesitemos mediante css, para mostrar el icono adecuado.
Esta técnica supone probablemente algunos cambios considerables en la plantilla de tu tienda Magento, pero puedes reducir mucho el número de peticiones en la tienda, y el rendimiento genera del servidor aumentará.
Lazy load de imágenes
En las páginas de categoría de tu tienda Magento, probablemente se esté mostrando decenas, o en el peor de los casos, centenares imágenes de producto.
Todas ellas se cargan al acceder a la categoría en cuestión, pero sólo un pequeño número de ellas se muestra en pantalla. Si el usuario no hace scroll hace abajo, todas esas imágenes que se han descargado pero no se han mostrado, habrán sido peticiones innecesarias al servidor.
Para reducir este efecto y así el número de peticiones, se utilizan técnicas de Lazy Load, o lo que es lo mismo, no descargar las imágenes hasta que no son visibles en pantalla. Por tanto, si no hay scroll, no hay descarga de imágenes.
Existen muchas librerías para hacer Lazy Load de imágenes, pero una de nuestras favoritas es este plugin para jQuery:
Para utilizarlo simplemente hay que modificar los tag de las imágenes, cambiando:
<img src="img/example.jpg" />
por:
<img class="lazy" data-original="img/example.jpg" />
Además tendrás que incluir el plugin en la página y finalmente tendrás que llamarlo de esta forma:
jQuery(function() { jQuery("img.lazy").lazyload(); });
Utiliza un CDN para tu Magento
Finalmente, la mejor optimización que puedes realizar para reducir el número de peticiones, es eliminarlas por completo ;)
Utilizando un CDN para todos los contenidos estáticos de tu tienda Magento (imágenes y archivos js y css entre otros), conseguimos que todas las peticiones de todos los clientes de tu tienda se realicen a un servidor especializado para este tipo de contenidos.
Los sistemas CDN solicitan a tu tienda una única vez cada archivo y lo almacenan para servirlo directamente a los futuros visitantes de tu tienda online.
Todas las peticiones correspondientes a archivos estáticos son derivadas al CDN, lo que libera a tu servidor de bastante trabajo. Algunos sistemas CDN que se integran bien y de forma sencilla con Magento son estos:
¡Fantástico blog Daniel!
Aunque hemos contactado en algún trabajo, no conocía tu blog. Lo acabo de descubrir y estoy encantado.
Hoy mismo vamos a darle uso a algunos de los consejos que expones para optimizar Magento y que no tenemos aplicados.
Muchas gracias ;)
Buenos días Daniel;
Estoy intentando rebajar el tiempo de carga de mi web y para ello lo primero que he intentado ha sido lo mas fácil, combinar los archivos js/css desde magento. Al hacerlo, mi theme queda desconfigurado y no se porque , podrías darme luz en este aspecto?
Un saludo y muchas gracias por compartir tus conocimientos :)
Excelente artículo Daniel, lo he podido poner en práctica a pesar de que soy novata, muchas gracias