Cómo Optimizar Prestashop 1.6

La velocidad de carga de una tienda virtual es algo muy importante desde el punto de vista del SEO y de la experiencia de usuario. Una tienda virtual cuya carga sea mas rápida posicionará mejor que otra (con el mismo grado de optimización SEO y contenido similar) que cargue más lenta, al mismo tiempo que mejorará la expriencia de usuario consiguiendo que nuestros usuarios accedan al contenido que demandan más rápido, con lo que conseguimos varias ventajas:

1. MU: Conseguimos más usuarios viendo nuestro contenido al evitar “fugas” de tráfico durante el periodo de carga.
2. MPV: Conseguimos más páginas vistas por usuario Posibilitamos la carga de mas páginas en el mismo tiempo.

MU + MPV = + Conversiones

Por esta sencilla razón merece mucho la pena detenerse a revisar el grado de optimización de nuestro Prestashop y hacer las mejoras que estén a nuestro alcance para mejorarlo.

Para mejorar la velocidad de carga debemos saber qué aspectos de la aplicación (sin entrar en detalles ajenos a Prestashop) influyen en ella y como mejorarlos. Vamos a enumerarlos:

1. Cantidad de recursos (imágenes, javascript y css principalmente, aunque no son únicos) a cargar.
2. Cantidad de consultas sobre la base de datos, y la complejidad de estas, que Prestashop debe realizar para saber que contenido cargar en cada sección de la tienda.

Estos son los dos ejes sobre los que debemos centrar los esfuerzos para optimizar la aplicación por lo que vamos a proceder a dar las pautas que debemos seguir estructuradas dentro de estos dos grandes grupos.

OPTIMIZAR RECURSOS

IMÁGENES

Son el recurso estrella. Todos nuestros productos tiene, o deben tener, como mínimo una imágen que lo representa. Esa imágen aparecerá en multitud de secciones (página de producto, sección de novedades, productos destacados, cesta de la compra, ….).

Partiendo de esta premisa, los desarrolladores de Prestashop añadieron a la aplicación un sistema de miniaturas. Este sistema toma la imagen que hemos asociado con cada producto (categorías/fabricante/proveedor,….) y genera una serie de miniaturas a diferentes dimensiones a partir de dicha imagen. Estas miniaturas, al ser de menor tamaño también tienen un menor peso, por lo que la descarga de dicha imagen se hace mucho mas rápida, optimizando asi la carga total de la página en ese aspecto.

No obstante, este sistema parte de una imagen que hemos subido previamente nosotros, por lo que si esa imagen no está bien optimizada, las miniaturas generadas tampoco lo estarán. Por este motivo lo primero que debemos tener en cuenta es:

UTILIZA IMÁGENES OPTIMIZADAS PARA TUS PRODUCTOS

En el siguiente vídeo te explicamos como puedes hacerlo:

 

 

CONTENIDO

La manera en la que Prestashop almacena la información y accede a ella es usando una base de datos relacional MySql para almacenar y consultar esta información. Cada elemento que muestra la tienda en el FrontEnd es obtenido de la base de datos tras realizar las consultas pertinentes. La forma en la que organizamos nuestro contenido y el tamaño del mismo influye DIRECTAMENTE en el rendimiento de la tienda virtual por que influye en la cantidad de consultas que se ejecutan en cada visita, la complejidad de estas consultas y el rendimiento de la base de datos para dar respuesta a cada una de esas consultas.

Veamos algunos casos concretos:

• Tamaño: Un catálogo muy grande deriva en un base de datos mucho mas cargada, lo que afecta a la velocidad con la que se atienden las consultas sobre dicha base de datos. Una misma consulta se atienda mas rápidamente en una base de datos optimizada y moderadamente cargada que en una base de datos sin el mantenimiento oportuno y con millones de registros en sus tablas.
  El catálogo de relleno puede ralentizar tu tienda y despistas a tus posibles clientes, al mismo tiempo que restan visibilidad a los productos importantes. No por tener más productos vas a vender más. SELECCIONA LOS PRODUCTOS QUE QUIERES VENDER. UTILIZA SÓLO AQUELLOS REALMENTE COMPETITIVOS Y VALIOSOS (mejor 100 de calidad que 10000 sin valor).
• Organización: Por poner un ejemplo, el sistema que utiliza prestashop para mostrar el árbol de categorías pide a la base de datos las categorías de productos por niveles, es decir, cuantos mas niveles (mas profundo sea nuestro árbol) mas cantidad y mayor complejidad en las consultas necesarias para construir el arbol de categorías. A parte de esto, si nos empeñamos en mostrar nuestro arbol de cateogorías de manera redundante, en la columna lateral + pié de página + menu superior…, lo que hacemos es multiplicar x2, x3, o más, las veces que esas consultas se emplean por visita.
  Asegurate de NO construir un árbol de más 2-3 NIVELES. Normalmente no es necesario y casi cualquier catálogo se puede organizar para usar sólo 2-3 niveles.
• Información mostrada: Aún cumpliendo con los dos casos anteriores, podemos caer en el error que quere mostrar en todas nuestras páginas, o en muchas de ellas, listados de:
  • Productos destacados
  • Novedades
  • Productos más vendidos
  • Productos en la misma categoría
  • Productos más vistos
  • y un larguísimo etc de posibles listados…

  Esto es un error ya que no suelen ser demasiados útiles esos listados salvo en una página de inicio, pero no en las fichas de los productos, en las páginas de las categorías, etc…
  Este tipo de módulos suelen ser una de las principales causas del aumento de consumo de Prestashop y de su ralentización.
  NO ABUSES DEL USO DE ESTOS MÓDULOS PARA LISTADOS DE PRODUCTOS. Al final resultará en un montón de información redundante (un producto que sea nuevo, destacado, que esté en oferta, que sea muy visitado,…, puede aparecer en 5-6 listados al mismo tiempo). Usalos con cabeza, y limita su uso lo más que puedas.

 

 

CONFIGURACIÓN

Ya hemos hablado a cerca de la información y elementos que vamos a usar para definir nuestro catálogo y como podemos plantearlo para que esta sea mucho mas eficiente. Ahora vamos a ver como podemos configurar Prestashop para hacer que funcione lo mas ágilmente posible dentro de las posibilidades que su configuración nos ofrece.

Desde la versión 1.4 Prestashop ha incluido, y ha ido completando, las opciones con las que podemos optimizar el rendimiento de la aplicación. Estas opciones se encuentran dentro de la sección “PARÁMETROS AVANZADOS ⇒ RENDIMIENTO“.

El contenido de esta página se encuentra dividido en varias secciones. Vamos a repasarlas una a una:

SMARTY

Smarty es un motor de plantillas para PHP. Para simplificarlo (mucho 😉 ) se trata de una herramienta cuyo objetivo es separar, desde el punto de vista técnico, las partes de la aplicación que “hacen” y las partes de la aplicación que “muestran”. En este caso, Smarty se encarga de “mostrar” y para ello parte de unos archivos en un formato y sintaxis propia de smarty los cuales son procesados (el término correcto es “Compilados”) para obtener como resultado un código HTML que mostrar en un navegador.

 

La cuestión es que Smarty compila todos los archivos necesarios en cada visita, y esta es clave, HAYAN O NO HAYAN CAMBIADO, y en compilarlo se pierde un tiempo y unos recursos muy valiosos. No existe una configuración perfecta para esta sección ya que depende del estado de desarrollo de la tienda pero nosotros nos enfocaremos, para esta y el resto de secciones, en que estamos en una fase de producción, por lo que si aún te encuentra desarrollando tu plataforma deberías esperar a tenerla lista para seguir estos pasos.

La configuración ideal para cuestiones de rendimiento sería:

• Cache de plantillas: “Nunca recompilar los archivos de las plantillas”. Ya hemos terminado los cambios y no vamos a hacer más, por lo que no es necesario volver a compilar por si ha cambiado algo.
• Cache: “Si“. Un sistema de cache nos permite acceder a una información de una manera mucho más rápida ya que es una información que ya habíamos generado durante compilaciones anteriores.
• Tipo de Cache: “Sistema de archivos“. Esa cache debe almacenarse en algún sitio, y Prestashop nos da la opción de almacenarla como archivos en el disco o como registros en la base de datos, y ya hemos dicho que la DB cuanto mas limpitia, mejor. El problema es que debemos tener un ojo en el espacio ocupado, y vaciar la cache de vez en cuando.
• Vaciar la Cache: “Limpiar la cache siempre que algo se haya modificado”. Esta opción nos permite que la cache se descarte siempre que alguno de los arhcivos que smarty debe compilar haya cambiado. Si no hay cambios no se vacía la cache y no hay que recompilar.

 

CARACTERÍSTICAS OPCIONALES

Prestashop, a la hora de la inserción de los productos y del tipo de acceso a estos, nos permite especificar una serie de información adicional que entrará en juego a la hora de mostrar dichos productos y de la navegabilidad de los clientes.

• Combinaciones: Si vamos a utilizar atributos para definir nuestros productos. Si no vamos a necesitar la funcionalidad de los atributos es MUY MUY RECOMENDABLE desactivar esta opción. Esto simplificará sensiblemente las consultas sobre productos. Antes de poder desactviarla deberemos eliminar todos los atributos y valores de atributo de todos los productos que actualemente estén creados
• Funcionalidades: Para cada producto podemos definirle una serie de características técnicas como el alto, ancho, capacidad, velocidad, etc… y cualquier otra características que queramos o necesitemos. Si no lo vamos a usar podemos desactivarla.
• Grupos de clientes: Si no vamos a distinguir a los clientes por grupos es recomendable desactivar esta opción. Una vez más conseguiremos simplificar las consultas sobre la base de datos.

 

CCC – Combinar/Comprimir/Cachear

Esta opción nos permite:

• Combinar todos las hojas de estilos CSS en un sólo archivo y todos los archivos js (javascript) en una sola librería js. Esta acción lo que consigue es que el nº de peticiones que debe hacer el navegador al servidor para cargar la web (recordamos que cada archivo de imagen, css o js genera una petición) se vea reducida de varias decenas a sólo dos en el mejor de los casos. (Opciones 1, 2)
• Comprimir del código html, css y javascript que se envía al servidor eliminando saltos de linea, espacios en blanco y lineas vacías. Con esto se consigue reducir el tamaños del código haciendo que la transferencia sea mucho más rápida. (Opciones 2,3,4, aunque esta última es mas una cuestión práctica que de rendimiento.)
• Cache de los recursos estáticos. Se define el tiempo de duración en cache local (la del navegador del visitante) de recursos como imágenes, archivos css y archivos js. (Opción 5)

El correcto funcionamiento de la aplicación tras activar estas opciones dependerá de como estén desarrollados los módulos y la plantilla activa. Si no han sido desarrollados siguiendo estrictamente las directrices de desarrollo de Prestashop pueden ocurrir fenomenos inesperados, desde archivos css y js que queden fuera de la combinación hasta que se produzcan errores de sintaxis tras la combinación. La configuración óptima es TODOS ACTIVOS pero despues de activarlos se recomienda una revisión a fondo de la tienda, y si se encuentran malfunciones, entonces será el momento de empezar a jugar con las opciones (activando unas y desactivando otras) hasta encontrar la combinacion óptima para la instalación en concreto.

SERVIDORES MULTIMEDIA

Ya hemos dicho con anterioridad que “ que cada archivo de imagen, css o js genera una petición“. Otro aspecto técnico que el usuario medio no tiene en cuenta es la manera en la que se gestionan las peticiones entre un dispositivo cliente y el servidor web. El caso es que un navegador web sólo puede hacer un determinado nº de peticiones simultaneamente a un servidor web (el nº de peticiones dependerá de la configuración del servidor) por dominio, es decir, que si mi servidor sólo permite un máximo de 10 peticiones simultáneas y mi web carga 30 recursos (recordamos: recurso = imágen ó css ó js ó cualquier otro elemento que forme parte de la web), el navegador web del usuario que quiera cargar mi web deberá realizar 10 peticiones y esperar a que estas 10 vayan atendiendose para poder ir solicitando el resto de recursos hasta obtener los 30 necesarios para cargar la web.

Esta limitación es por dominio por lo que podemos servirnos de esta opción de Prestashop para “hacer trampas” a este respecto.

La opción de “Servidores Multimedia” nos permite hacer que prestashop cargue nuestros recursos por separado, es decir, imágenes por un lado, css por otro lado , javascript por otro y el resto por otro, es decir, solicitar el contenido de la web por 4 vías distintas, y lo mas importante, DE MANERA SIMULTÁNEA.

Lo que buscamos es que al cargar los recursos desde 4 “direcciones/dominios/subdominios”, en lugar de estar limitados a 10 peticiones simultáneas, podremos pedir “10 imágenes a la vez” con el primer subdominio, “10 archivos css a la vez” con el segundo subdominio, “10 archivos js a la vez” con el tercer subdominio, y del resto de recursos de la web podremos pedir “10 de ellos a la vez” a través del dominio principal de la tienda, pasando de estar limitados a 10 peticiones, a poder hacer hasta 40 al mismo tiempo.

Esto tiene un problema relacionado con el sitemap, ya que en él aparecerán las direcciones http://subdominioX.dominiotienda.com cosa que no es muy recomendable desde el punto de vista del SEO. La solución sería cambiar estas direcciones por http://dominiotienda.com. La mejor forma de evitar esto es generar el sitemap antes de poner los subdominios o, si ya tenéis la tienda online funcionando y lo que necesitas es actualizar tu sitemap, quitar los subdominios, generar el sitemap y volver a poner los subdominios. No hay que olvidar desactivar la tarea del cron que actualiza el sitemap para que no los genere de nuevo con los subdominios. Siempre que queramos actualizarlo seguimos los pasos indicados.

CIFRADO

Prestashop utiliza un sistema de cifrado para sesiones basado en un algoritmo llamado Rijndael. Este algoritmo se encuentra implementado en una librería de PHP que no tiene por que estar compilada en tu sistema obligatoriamente. Esa libreía es Mcrypt. Sabiendo que no todos los servidores cuenta con ella, los chicos de prestashop han incluido dentro de la aplicación un sistema de cifrado propio al que han llamado BlowFish. Este sistema de cifrado propio no es tan rápido ni eficiente como el proporcionado por Mcrypt pero ha sido inlcuido para ser usado en los casos en los que el primero no esté disponible.

Si tu servidor cuenta con Mcrypt instalado no dudes en activar la primera opción. En caso contrario no te quedarás mas opción que usar Blowfish con la consecuente perdida de rendimiento. Esto no es habitual ya que la inmensa mayoría de servidores actuales cuenta con Mcrypt ya integrados.

CACHE

Por último tenemos el sistema de cache integrado por Prestashop. Ya habíamos dicho que “Un sistema de cache nos permite acceder a una información de una manera mucho más rápida ya que es una información que ya habíamos generado en ocasiones anteriores” evitando así tener que volver a generarla.

Prestashop 1.6 incluye 4 sistemas de cache disponibles:

De estos 4, el “Sistema de archivos” es el único es es 100% compatible con todos los servidores, ya que no requiere de ningún requisito adicional para poder funcionar. NOTA IMPORTANTE: Es importante que después de activarlo compruebes que todo en tu tienda funciona correctamente. Navega por ella como si de un cliente se tratase, e incluso realiza algún pedido de prueba, ya que puede ocurrir que tengas algún módulo/tema instalado que no sea 100% compatible con estos sistemas de cache. Si tras activarlo compruebas que algo no funciona como antes deberás desactivar la cache.

Su funcionamiento es muy sencillo, básciamente se dedica a almacenar en disco versiones estáticas de tu contenido dinámico, es decir, de las páginas de tu tienda. Después, en lugar de tener que lanzar todas las consultas a bases de datos, compilar sintáxis de smarty o ejecutar código PHP, simplemente muestra la versiones estáticas cacheadas. Esto mejora la velocidad a costa de ocupar espacio en disco. La ocpión de “Profundidad de los directorios” es algo que no debemos cambiar a menos que sepamos lo que estamos haciendo. “1” es el valor por defecto y la mejor opción para la mayoría de los casos.

Si activamos esta opción deberemos tener un ojo puesto siempre en el espacio en disco, ya que este se irá agotando con el tiempo debido al aumento de espacio ocupado por esta cache. En ciertas ocasiones habría que vaciar la la cache.

Para los usuarios interesados en este tipo de cache, comentar que existen otras alternativas en forma de módulos para Prestashop, que ofrecen un sistema de cacheado basado en archivos, más configurable y efectivo. Pueden encontrar varios ejemplos en la Store Oficial de Prestashop.

Respecto a los otro tipos de cache MEMCACHED, APC o XCACHE, se trata de extensiones de PHP que no tienen por que estar integradas en el sistema (al igual que pasaba con Mcrypt), y de hecho, si tu hosting es un hosting compartido, no suelen estarlo. No obstante Memcached es un sistema muy extendido, y APC será integrado en PHP en futuras versiones, por lo que cuando esto ocurra todos los servidores contarán, al menos, con APC.

El funcionamiento de estos sistemas es complejo y dificil de explicar en pocas líneas y no siempre es recomendable su uso ya que si bien puede mejorar muchísimo el rendimiento de la tienda, dependiendo del contenido de esta o los módulos instalados, pueden incluso empeorarlo (por cuestiones de fragmentación de cache, un problema técnico/teórico inherente a los sistemas de cache que funcionan con ‘hashing’).

MÓDULOS

Sabemos que Prestashop es un sistema modular, con una funcionalidad básica (núcleo de Prestashop) complementada con funcionalidades extra proporcionadas por los módulos y plantillas que se le pueden instalar.

Cada módulo/Plantilla instalada y activada añaden funciones y añaden TAREAS a realizar por Prestashop en cada carga. Una correcta configuración de los módulos, asi como una correcta selección de aquellos que queremos mantener activos, supondrá un efecto importante sobre el rendimiento de la tienda.

En este aspecto recomendamos revisar todos los módulos instalados en el back office de Prestashop y desinstalar o eliminar los que no estemos usando o no sean 100% imprescindibles. Aunque los módulos instalados no sean visibles en la tienda, el servidor los va ha procesar, aumentando el tiempo de carga de la página web. Como ya hemos comentado anteriormente, los módulos que más aumentan la carga de la página web son los que realizan consultas SQL sobre la base de datos (Productos destacados, Últimos productos, Productos en oferta).

Es muy importante que prestemos atención “al lugar donde los módulos están posicionados“, sobre todo si usamos plantillas con 1 ó 2 columnas, columna central e izquierda (Left column), o columna central y derecha (Right column).

El servidor va a procesar todos los módulos anclados en la columna de la izquierda o de la derecha, a pesar de que la plantilla instalada no la/s use. Lo mejor es acceder a “Módulos ⇒ Posiciones de los módulos” y eliminar todos los módulos de la columna no usada por la plantilla, en la siguiente captura de pantalla vemos donde se encuentra la opción para desenganchar un módulos situado en la columna de la izquierda (Display Left Column):

 

Y creo que eso es todo lo que se puede tener en cuenta, desde el punto de vista del usuario, para aumentar el rendimiento de nuestra página. Se podría profundizar mucho mas en ciertos aspectos pero es mejor dejar esa parte en manos de profesionales antes de enfrascarnos en esa tarea, ya que podemos afectar negativamente al rendimiento en lugar de mejorarlo.