Mejorar la velocidad de PrestaShop

Qué no debes hacer en tu e-commerce

No actives la última opción de la página de Rendimiento.

Verás que hay una sección llamada “Caché” con un único selector. ¡No lo actives! Aunque pueda parecer algo útil, esta opción sólo aumenta el número de páginas de la caché, ralentizando el funcionamiento.

No utilices los módulos de estadísticas de PrestaShop. Sólo llenan tu base de datos con información que puedes obtener en Google Analytics de manera mucho más cómodaEvita el uso de demasiados archivos externos (tanto CSS como JS o fuentes). PrestaShop no puede incluirlos en los archivos minificados.

Módulos de caché para PrestaShop

Existen módulos que gestionan la caché de manera más eficiente que el sistema propio de PrestaShop.

En DominioZero hemos tenido oportunidad de probar varios de estos módulos y uno de los que mejores resultados han dado es Express Cache (por 49$, unos 40€), que recientemente ha publicado su versión 3.4.0.

Este tipo de módulos pueden mejorar notablemente el rendimiento de tu e-commerce.

Hay otros módulos que realizan funciones similares con más o menos funcionalidades, como el Page Cache Ultimate (por 149,99€ en PrestaShop Addons) o el más económico PrestaSpeed (39,99€)

Ajustando los detalles de tu tienda PrestaShop

Una vez que hemos afinado los ajustes básicos de rendimiento de nuestra web, vamos a descender a los detalles.

Puede ser más tedioso, pero merece la pena y los resultados pueden ser increíbles. utilices los módulos de estadísticas de PrestaShopPara hacernos una idea de todo lo que podemos mejorar en nuestra instalación, deberíamos comenzar por un análisis, que podemos realizar con herramientas como GTMetrix. Hemos seleccionado una tienda PrestaShop al azar en internet y la hemos pasado por esta herramienta.

Estos son los resultados:

En el Back Office, ve a Preferencias > Imágenes y cambia los valores que están configurados por los que has obtenido en el inspector. Haz lo mismo con todas las versiones que encuentres en la web (es posible que no todos los formatos que aparecen en el Back Office se utilicen en la web).

Cuando termines con eso, ve al fondo de esa página y haz clic sobre el botón “Regenerar miniaturas”. Puede que este proceso tarde un poco y si hay muchas imágenes puede exceder el tiempo de espera del servidor.

Si pasa esto, ve atrás, selecciona No en “Borrar las imágenes anteriores” y haz clic de nuevo en “Regenerar miniaturas”.

Repite este proceso hasta que la página se cargue normalmente y no falle. ser más tedioso, pero merece la pena y los resultados pueden ser increíblesTambién es posible que en los resultados de la prueba te indique que deberías combinar las imágenes usando sprites CSS. Este consejo es muy útil para reducir el número de solicitudes realizadas cada vez que se carga la web.

Las imágenes pequeñas que decoran tu tienda, como los iconos (que no sean fuentes) se pueden combinar en una única imagen y luego llamarlos utilizando una hoja de estilo.

Imagina que tienes cuatro imágenes de 50px x 50px y quieres hacer una única imagen.

Pues bien, con tu editor de imágenes favorito crea una imagen de 100px por 100px que contenga las cuatro que quieres combinar.

Una vez tenemos nuestra imagen combinada, tenemos que decirles a los navegadores qué parte de este sprite deben utilizar en cada ubicación.

Necesitarás acceder al archivo CSS global de tu tema, para asegurarte de que funciona en cualquier lugar de la tienda PrestaShop.

Crea una nueva clase para cada una de las imágenes que has combinado. Mira el ejemplo que te ponemos:

.icono1 {width: 50px; height: 50px; background: url(/img/cms/sprite.jpg) 0 0px;}

Esta clase nos da varios datos. En primer lugar, nos indica el tamaño (50px de ancho por 50px de alto). A continuación, nos indica que debe usar el sprite que hemos creado como fondo comenzando en 0 0px.

Esto significa que el navegador debe tomar una parte de la imagen de 50 píxeles de ancho por 50 píxeles de alto comenzando en la parte superior izquierda (coordenadas X: 0px Y: 0px)

Para que veas cómo seguir, te mostramos cómo poner la segunda imagen:

.icono2 {width: 50px; height: 50px; background: url(/img/cms/sprite.jpg) 0 -50px;}

Este icono tiene el mismo tamaño que el primero, pero está más abajo. Por esta razón, debes decirle al navegador que empiece 50 píxeles hacia abajo (-50px).

Cuando tengas tus clases creadas, sólo debes llamarlas desde tu web. Para ello, crea un div con la clase que le corresponda<div class=”icono1”></div>

Donde pongas este div, aparecerá la imagen deseada. Puedes poner los cuatro div consecutivos y los mostrará por separado, como si fueran cuatro imágenes diferentes, con la ventaja de que tu navegador sólo ha tenido que descargar una.