Optimizar la velocidad de carga en Prestashop

10 Mar 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.

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.

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:

– 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.

– 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.

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

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

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:

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

Configuración de APC:

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

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:

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.