fbpx

Optimizar la velocidad de carga en Prestashop

Optimizar la velocidad de carga en Prestashop

La velocidad de carga de una web se ha convertido en uno de los parámetros más importantes para el posicionamiento en buscadores, por ello vamos a ver en este artículo algunos puntos que como gestores de una tienda online debemos revisar para mejorar el tiempo de carga de nuestra tienda.

Si habéis llegado hasta aquí, probablemente ya hayáis comprobado la velocidad de carga de vuestra tienda, si no, es el momento de revisarla, para ello podemos usar la herramienta de Google: PageSpeed Insights.

Google PageSpeed

Tras introducir la URL de tu tienda, podrás ver un listado de las mejoras necesarias tanto para la navegación desde dispositivos móviles como para ordenadores.

Los principales motivos por los que una tienda online con Prestashop tenga una velocidad de carga lenta son los siguientes:

  • Mostrar contenidos cargados mediante enlaces externos.
  • No tener optimizados los CSS, JS ni HTML, deben estar minimizados y unificados.
  • No tener optimizadas las imágenes.
  • No tener habilitada la comprensión ni el tiempo de expiración de la caché.
  • Tener instalados módulos que no están siendo usados.
  • La plantilla no está optimizada.

Seguro que en Google PageSpeed te habrá mostrado algunos de estos avisos, por lo que vamos a configurar nuestro prestashop para solucionarlos.

Lo primero es configurar el rendimiento de nuestro Prestashop:

Configurar el rendimiento de nuestro Prestashop:

 

  1. Apartado de rendimiento de Prestahsop
  2. Modificación del archivo .htaccess

 

1. Apartado  de Rendimiento de Prestahsop

Nos dirigimos a nuestro gestor de prestashop o backoffice a:
Parametros avanzados –>Rendimiento

– En el apartado SMARTY, debemos marcar la opción: NUNCA RECOMPILAR LOS ARCHIVOS DE PLANTILLA.

Configuración de smarty

Esta opción afecta a la velocidad de la tienda directamente, sin embargo, también hay que contemplar en qué momento activamos esta opción ya que si se realiza algún cambio en algún archivo debemos activar FORZAR COMPILACIÓN para que se muestre.

También es recomendable si la tienda aún está terminándose de desarrollar o en una fase de cambios importantes poner la opción RECOMPILAR LAS PLANTILLAS CUANDO LOS ARCHIVOS SEAN MODIFICADOS y una vez finalizados marcar que nunca recompile.

Pero si en la tienda ya no se van realizar grandes cambios optamos por la primera opción para mejorar la velocidad, recordando que si se hacen modificaciones en los archivos .tpl, hay que recompilar.

A continuación dejaremos marcada la opción de caché de Prestahsop:

Caché prestashop

– En el apartado CCC (COMBINACIÓN, COMPRESIÓN Y CACHE), activaremos todas las opciones para que comprima todo el código (HTML, CSS y JS) en un archivo y cargue mucho más rápido. Con esta opción se solucionaría el aviso de Minimizar los archivos CSS, JS y HTML.

Minimizar HTML, CSS, JS

– En el apartado CIFRADO, activaremos el cifrado RJINDAEL. Si modificamos esta opción las cookies serán reiniciadas, este cifrado es más rápido.

Cifrado Rjindael– En el apartado Caché, activamos «uso de caché» y se nos mostrarán una serie de opciones:

Configuración cache prestashop

Podemos probar qué sistema de caché es mejor para nuestro prestahsop, ya que no hay uno indicado como el mejor, para ello podemos usar nuestro navegador web Chrome y ver nuestra tienda, una vez en ella, pulsamos el botón derecho de nuestro ratón y le damos a la opción INSPECCIONAR,y se nos dividirá la página en dos: la parte de nuestra tienda y el inspector. En él buscamos la opción NETWORK

Tiempo de descarga

En este ejemplo, en «time» hay un excelente tiempo de carga de una imagen JPEG, pero si aún así quisiéramos probar, o no fuera nuestro caso, escogeríamos otro sistema de caché, iríamos a nuestro gestor y editaríamos la configuración de:

Configuración de Memchache:

Memcache

Volveríamos a Chrome, actualizamos la página con F5 y volveríamos a consultar el inspector–>Network columna «time».

Configuración de APC:

APC cache

Volveríamos a Chrome, actualizamos la página con F5 y volveríamos a consultar el inspector–>Network columna «time».

Y quedarnos con el que mejor tiempo de descarga tenga.

2.Modificar nuestro archivo .htaccess

Lo primero es revisar que tenemos activadas las URL amigables, vamos a: Preferencias –> SEO+ URLs

URL amigables en Prestashop

Una vez confirmado, y en caso de no tenerlas las activaríamos, nos vamos a la carpeta que contiene nuestro Prestashop y en su raíz nos encontraremos con el archivo .htaccess

En el archivo debemos incluir la fecha de caducidad para los archivos del tipo: javascript, imágenes, css y texto. Copiamos y pegamos el siguiente código.

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType text/css "access plus 1 week"
ExpiresByType text/javascript "access plus 1 week"
ExpiresByType application/javascript "access plus 1 week"
ExpiresByType application/x-javascript "access plus 1 week"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresByType image/svg+xml "access plus 1 year"
ExpiresByType image/vnd.microsoft.icon "access plus 1 year"
ExpiresByType application/font-woff "access plus 1 year"
ExpiresByType application/x-font-woff "access plus 1 year"
ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
ExpiresByType font/opentype "access plus 1 year"
ExpiresByType font/ttf "access plus 1 year"
ExpiresByType font/otf "access plus 1 year"
ExpiresByType application/x-font-ttf "access plus 1 year"
ExpiresByType application/x-font-otf "access plus 1 year"
</IfModule>

Después añadiremos también el siguiente código en el archivo .htaccess para la compresión de prestashop mediante el llamado mod deflate.

FileETag INode MTime Size
<IfModule mod_deflate.c>
   <IfModule mod_filter.c>
      AddOutputFilterByType DEFLATE text/html text/css text/javascript application/javascript application/x-javascript
   </IfModule>
</IfModule>

En caso de que al modificar el archivo .htaccess vieramos que nuestro prestahsop no hace correctamente la redirección, volveríamos a Preferencias –> SEO + URLs y desactivamos y activamos las URls amigables para que regenere el .htaccess

Eliminar contenidos cargados mediante enlaces externos:

Otro de los avisos que nos podía mostrar Google PageSpeed, era que se están mostrando recursos como; imágenes, fuentes, css, módulos, etc., enlazados a recursos externos a nuestra web. Por ejemplo, redes sociales, chats, etc. La única posibilidad es eliminarlo si no es posible cargarlos desde nuestra propia web.

Por ejemplo,si usamos un banco de contenidos y utilizamos una imagen, como éstos funcionan almacenando las imágenes que queramos en nuestra sesión y nos dan un enlace para ponérselo a nuestras imágenes, estaríamos cargando esa imagen desde otro servidor,otro sitio externo a nuestra web. Cada vez que nuestra tienda quiere mostrar esa imagen, llama a ese banco de contenidos, por eso decimos que es un recurso que carga externamente. Si Google PageSpeed nos muestra este aviso, deberíamos coger esas imágenes, optimizarlas y subirlas a nuestro servidor y prestashop para que cargue internamente y mucho más rápido.

Optimizar imágenes:

Nos refierimos a la reducción de peso de nuestras imágenes sin pérdidas de calidad visual. Existen multitud de herramientas gratuitas para ello por ejemplo RIOT, también por supuesto podemos usar herramientas de pago como Photoshop o Firework.

Módulos instalados sin uso:

Es bastante habitual que cuando se instalen las plantillas o prestashop se empiecen a instalar módulos por si nos hicieran falta. En sí es un error porque ahora, que Google PageSpeed nos avisa que tenemos una tienda lenta, tenemos que revisarlos y desinstalar todos aquellos que no estén en uso.

Por ejemplo, los módulos de estadísticas de prestahsop, si nosotros usamos otros sistemas de estadística como google analytics, no necesitamos estos módulos, se deberían desinstalar.

Para ello vamos a Módulos y Servicios — > Módulos

Buscamos el que queremos quitar y desinstalamos:

Módulos Prestahsop

También se da el caso de HOOKs que no están siendo mostrados por la plantilla que usamos y que contiene módulos, que por lo cuál no se están usando. Es importante no solo desactivar, sino desinstalar.

Siempre estarán ahí si quieres instalarlos en el futuro pero no afectarán a la carga de la tienda.

Limpieza de Prestahsop:

Es importante hacer una copia de seguridad antes de nada, para ello vamos a: Parámetros Avanzados –> Copia BD

Debe realizarse por un usuario avanzado para tras hacer la copia, editar en la Base de datos las tablas, por ejemplo referentes a estadísticas.

Con estas pautas esperamos haberos ayudado para mejorar la velocidad de carga de vuestra tienda con Prestashop pero si no fueran suficientes, podéis consultarnos por nuestros Clouds Optimizados para Prestashop  a través de nuestro sistemas de tickets si ya eres cliente o a través de nuestro formulario de contacto si aún no lo eres.

3 comentarios
  • Nilo Velez
    Enviado el 19:30h, 15 marzo Responder

    Hace poco hemos descubirto que el módulo «experiencia minorista» que viene activado de serie hace que el back-end de muchas tiendas vaya a pedales. Hace llamadas constantes a la web de prestashop para mandar estadísticas chorras y cargar cartelitos del tipo de «¿sabía que las ventas en comercio electrónico aumentaron un 60% en 2013?».

    Medid los tiempos de carga del back-end, desactivad el módulo y volved a medir. Ya me contaréis.

  • Daniel Cedeño
    Enviado el 08:15h, 01 junio Responder

    Me as salvado la vida, esto realmente funciona, mi web estaba super lenta y a pasado de un puntaje de 44/100 a 73/100, ahora va mas rápida a pesar de estar en un servidor malisimo, en elementos a corregir solo me queda » Reducir el tiempo de respuesta del servidor «, puff en cuanto pueda me cambio de hosting pero por el momento ya se puede navegar decentemente en mi tienda online, realmente te lo agradezco!

  • módulos Prestashop
    Enviado el 09:24h, 19 mayo Responder

    Instalar y módulo mod_pagespeed activo para su servidor podría ayudar más.

Déjanos un comentario