WPO para optimizar Prestashop

Prestashop es uno de los CMS más utilizados para la creación y gestión de tiendas online o ecommerce, junto a su competidor Magento.

Se trata de un CMS opensource que puedes instalar en cualquier hosting que disponga de un servidor web con intérprete PHP y un motor de bases de datos MySQL / MariaDB. Necesita exactamente los mismos requisitos que WordPress, pero Prestashop consume más recursos.

Prestashop tiene una cuota de uso del 1,4% en el terreno de los CMS y, por otro lado, el 0,8% de los sitios web del mundo están creados y gestionados con Prestashop. WordPress + WooCommerce tiene una cuota de mercado muchísimo más alta, compitiendo en el mismo sector.

Aunque Prestashop es un buen CMS, su curva de aprendizaje es más compleja que la de WooCommerce + WordPress. Además, a nivel técnico, Prestashop es un CMS mucho más complejo y difícil de administrar.

Un ejemplo de esta complejidad técnica es cuando tenemos que actualizar Prestashop de una rama estable a otra. Normalmente tendremos problemas importantes con los módulos, con el theme y con el proceso de actualización en general.

Prestashop es un CMS que consume bastantes más recursos que WordPress + WooCommerce. Sin embargo, hay que destacar que Prestashop se comporta mejor que WordPress + WooCommerce al trabajar con catálogos muy grandes de productos con muchas variaciones.

De forma nativa, Prestashop carece de un cache de página, algo que necesita para poder servir paginas rápidamente y sin retrasos.
Además, tampoco existen módulos para implementar un cache de página de forma gratuita, por lo que tendremos que tener uno de pago sí o sí.

Por otro lado, tener un servidor web con PHP7 también ayuda mucho a que Prestashop cargue rápido, independientemente del cache de página, ya que existen algunas zonas de la tienda online (como los carritos y las páginas de sesión) que no se pueden cachear con ningún cache de página.

No voy a esperar mucho más, simplemente voy a explicar algunas técnicas para mejorar el WPO de tu Prestashop y optimizar su velocidad de carga (además de su consumo de recursos).

 

Configurar cache de página en Prestashop

Siempre pongo el cache de página como principal técnica WPO para cualquier CMS. El motivo es que el código de los CMS es cada vez más complejo. Esto provoca problemas de ralentizaciones y retardos en la carga de las webs a menos que tengamos un cache de página correctamente implementado.

Ya he tratado el tema del cache de página en WordPress y de WP Rocket para WordPress en un par de artículos en este blog. Ahora vamos a explicar cómo configurar un cache de página en Prestashop.

Existen varios módulos de cache de página para Prestashop. Yo, personalmente, utilizo uno cuya evolución y cambios he ido siguiendo durante años: Page Cache Ultimate. Podemos encontrar Page Cache Ultimate en el repositorio oficial de addons de Prestashop: https://alvaro.click/prestashoppagecacheultimate

Es un módulo caro si lo comparamos con los de WordPress. Concretamente, 149 dólares.

La implementación de un cache de página es la técnica WPO que mejores resultados trae en la mayoría de los casos. De hecho, en la siguiente imagen puedes ver una comparación entre tener o no cache de página con Page Cache Ultimate en un Prestashop con el contenido del ejemplo:

Además, el cache de página no solo ayuda a tener tiempos de carga más rápidos para los clientes. También nos ayuda con el bot de Google, que nos premiará al aprovechar mucho mejor el crawl budget asignado a la web. Esto es lo que podíamos ver en el antiguo Google Search Console después de implementar un cache de pagina en un sitio web:

Evidentemente, el resultado cambia dependiendo del tipo de cache de página configurado y de las circunstancias de cada caso concreto.

Cuando tengamos mucho tráfico por un pico o por una promoción viral, también notaremos la diferencia entre tener cache de página y no tener cache de página:

El caso de la imagen anterior es precisamente eso: un Prestashop en un hosting compartido con Page Cache Ultimate y sin cache.
Con Page Cache Ultimate para Prestashop, somos capaces de servir muchas más peticiones con unos tiempos medios y máximos de respuesta mucho mas rápidos.

Siempre y cuando el servidor o hosting no tenga ningún problema, el cache puede agilizar la carga general de la web y al mismo tiempo reducir de forma radical el consumo de recursos del CMS.

Otra cosa que debemos tener en cuenta es que Prestashop tiene algunas partes que no pueden ser cacheadas con un cache de página, ya que contienen datos cargados de forma dinámica. En estos casos, podemos acelerar la carga de estas partes con un cache de objetos (el básico de Prestashop, por ejemplo) o con un buen hosting con PHP7. Esta última opción la vamos a tratar algo más adelante en este artículo.

Me gustaría recomendar un modulo gratuito de cache para Prestashop, PERO no hay. Si buscas uno, lo que puedes hacer es contratar un hosting Prestashop con Raiola Networks, ya que podrás instalar el módulo LSCache para Prestashop, que gestiona el cache de LiteSpeed de forma eficiente desde Prestashop.

La funcionalidad ESI de LiteSpeed Cache es especialmente útil para cargar bloques dinámicos cacheados en Prestashop.

Si quieres más información acerca de LiteSpeed Cache para Prestashop, puedes consultarla aquí: https://www.litespeedtech.com/products/cache-plugins/prestashop-acceleration

 

Prestashop y PHP7

En el punto anterior hablé de PHP7 y es que, para ciertas aplicaciones con mucha ejecución de PHP, la actualización a PHP7 ha sido determinante. ¿El motivo? Las mejoras de rendimiento y consumo de recursos a igualdad de condiciones. En la documentación oficial de Prestashop recomiendan PHP7 para acelerar las tiendas online creadas con el CMS.

En el siguiente gráfico puedes ver un benchmark comparativo de las versiones antiguas de PHP frente a las nuevas:

El benchmark anterior fue realizado con un script PHP que realiza operaciones matemáticas. Se ha realizado siempre con los mismos recursos, pero con distintas versiones de PHP. Cuantos menos segundos tarde el script PHP en terminar, mejor.

En el test mostrado en la imagen anterior, PHP7.0 finaliza la ejecución en 1,6 segundos, mientras que PHP5.6 tarda 4,6 segundos.
PHP5.6 tarda 3 veces más en ejecutar el mismo código PHP que PHP7.0

Precisamente por esta razón, para que tu Prestashop vuele, tu hosting o servidor debe ejecutar una versión de la rama 7 (es decir, PHP7.0 o superior). Además, PHP7.0 lleva incluido de forma nativa OPCache, lo que mejora los tiempos de respuesta al procesar código PHP.

Actualmente, la mayoría de proveedores de hosting (por ejemplo, Raiola Networks) ofrecen selectores para que el propio usuario pueda elegir desde el panel de control la versión de PHP utilizada e incluso algunas partes de la configuración de variables.

Junto con el cache de página, utilizar PHP7 es una de las mejoras WPO más efectivas para un CMS tan pesado como Prestashop.

 

Cómo optimizar imágenes en Prestashop

Como digo yo siempre en mis ponencias, el 99% de los sitios web de Internet tienen un problema con las imágenes y necesitan optimizar y reescalar las imágenes del sitio web.

Aunque existen muchos servicios online que nos van a permitir optimizar las imágenes, como Kraken.IO o TinyPNG, lo que buscamos en este caso es un módulo para optimizar las imágenes en Prestashop de forma automática.

El único problema es que Prestashop no es como WordPress. No existen tantos plugins diferentes para optimizar imágenes en Prestashop y mucho menos gratuitos. En Prestashop casi podemos decir que hay que pagarlo TODO.

Existen varios plugins interesantes para optimizar imágenes en Prestashop. Personalmente, me gustan dos que utilizan el API remush.it para optimizar las imágenes.

Por un lado, me gusta Prestashop ReSmush Image Compression. Se trata de un módulo relativamente barato que utiliza el API de resmush.it, que es completamente gratuita y bastante efectiva. Sirve justo para lo que indica su nombre: optimizar y comprimir imágenes.

Puedes encontrar más información acerca de este módulo para optimizar imágenes en Prestashop en la siguiente URL: https://alvaro.click/prestashopremushit

Por otro lado, existe un módulo de los mismos desarrolladores mucho más potente y que también utiliza el API ReSmush.IT para optimizar las imágenes. Lo bueno es que incluye muchas más funcionalidades, como la posibilidad de regenerar las miniaturas o la de detectar imágenes que no se utilizan y poder borrarlas.

Puedes encontrar más información acerca de este módulo para optimizar imágenes en Prestashop en la siguiente URL:

Si quieres, también puedes optimizar las imágenes manualmente antes de subirlas a Prestashop. Antes he mencionado dos servicios online que son los que más me gustan, pero añadiré otro más: Kraken.io, TinyPNG y Imagify.

Con Adobe Photoshop también podemos optimizar las imágenes antes de subirlas a nuestra tienda online Prestashop.

Si quieres ver la diferencia al servir imágenes de distintos pesos, este es un ejemplo:

Como puedes observar en la prueba de la imagen anterior, no se tarda lo mismo en servir una imagen de 66kB que una imagen de 361kb. Cuanto más pesa una imagen, más tardara su descarga desde el servidor al ordenador del visitante.

 

Configurar un CDN en Prestashop

Un CDN o Red de Distribución de Contenidos es un servicio que nos permite servir contenidos estáticos (imágenes, PDFs, vídeo, JavaScript, CSS, etc.) desde puntos de presencia más cercanos geográficamente al visitante.

Implementar un servicio CDN en un sitio web es una técnica WPO ideal para sitios web multiregión, que tienen tráfico desde distintos puntos del planeta. Por ejemplo, sitios web de habla hispana con tráfico desde España y América Latina.

Existen muchos servicios CDN que puedes utilizar en tu web. A mí me encantan CDN77, KeyCDN y Amazon CloudFront. Aunque en algunas ocasiones también suelo utilizar CloudFlare CDN pese a que es un sistema completamente diferente. Precisamente, en el artículo de este blog donde hablo de cómo configurar un CDN en WordPress, hablo del CDN KeyCDN como ejemplo.

Desde ya hace muchas versiones, Prestashop incluye una parte de la configuración donde podemos especificar servidores de medios. Lo que viene siendo lo mismo: varios campos donde podemos especificar hostnames desde los que cargar contenidos estáticos.

Desde “Parámetros avanzados” >> “Rendimiento” en el panel de administración de Prestashop, podemos acceder a la siguiente pantalla:

Otros CMS como WordPress necesitan un plugin para configurar un CDN, mientras que Prestashop ya tiene configuración específica para esto de forma nativa.

¿Has visto mi post sobre como configurar un CDN en WordPress? Es este: https://alvarofontela.com/configurar-cdn-en-wordpress/

El proceso para configurar un CDN en Prestashop es más o menos el mismo que en WordPress. Al menos, la parte inicial que hemos explicado en el post anterior.

En el punto 5 del artículo sobre cómo configurar un CDN en WordPress (al que puedes entrar desde AQUÍ), la cosa cambia y se simplifica para Prestashop. Pero los puntos del 1 al 4 son exactamente los mismos para WordPress que para Prestashop, siempre y cuando el CDN configurado sea KeyCDN.

En Prestashop, simplemente debemos especificar en los campos de servidores de medios TRES hostnames o CNAMEs que apunten al hostname del CDN elegido (en este caso, KeyCDN como ejemplo).

Como se especifica en la interfaz de Prestashop, las funcionalidades CCC deben estar activadas para que se pueda cargar contenido desde los servidores de medios.

Si no utilizamos un CDN y simplemente queremos utilizar la posibilidad de configurar servidores de medios, esta funcionalidad nos servirá para servir contenido desde subdominios (CNAMEs) libres de cookies.

 

Optimizar el motor de plantillas Smarty y Prestashop

Antes de empezar con esta sección, quiero decir que no me gusta el motor de plantillas Smarty de Prestashop, aunque ya me he encontrado con otros CMS y sistemas de gestión que utilizan Smarty como sistema de templates.

Aunque no soy un experto en Smarty, sé que es un sistema bastante pesado y que, si no activamos el cache de plantillas Smarty, hará que tu web Prestashop cargue muy lento.

En la sección “Smarty” y dentro de “Parametros avanzados” >> “Rendimiento” en el panel de Prestashop, podrás encontrar un panel de configuración como este:

La configuración, en el 90% de los casos, debes dejarla como en la imagen anterior, aunque te voy a explicar varios puntos:

• Si utilizas discos duros SSD (sobre todo con NVME) en tu servidor, es muy recomendable que el cache se guarde en el sistema de archivos en lugar de en MySQL. Ahora bien, debes tener muchísimo cuidado con el cache de Smarty en disco duro en tiendas grandes, ya que puedes llegar al número máximo de inodos.
• El cache de Smarty debe estar SIEMPRE activado para garantizar siempre buenos tiempos de carga. Como he dicho, el sistema de templates Smarty es bastante pesado.

La configuración anteriormente mencionada es la que funcionará bien en los servidores de hosting Prestashop de Raiola Networks.

Cuanto más complejo sea el theme utilizado en Prestashop, más impacto tendrá la mejora en el rendimiento que nos aporta el cache de plantillas Smarty.

 

Configurar CCC (Combinación, Compresión y Cache)

Al igual que el panel de “Smarty”, el panel de configuración de CCC (Combinacion, Compresion y Cache) lleva muchas versiones de Prestashop en el mismo sitio.

En WordPress, el proceso de minificar y combinar es complejo, ya que los themes no están preparados para este tipo de plugins al no seguir un proceso o procedimiento exacto. En Prestashop esto no pasa, ya que desde la versión 1.4 la mayoría de themes son compatibles con el módulo CCC. Por lo tanto, las optimizaciones de código JavaScript y CSS se realizan correctamente.

En esta parte de la configuración de rendimiento de Prestashop nos encontramos dos tipos de opciones. En condiciones normales, si tu theme o plantilla Prestashop es compatible y utilizas un servidor web Apache, puedes dejar la configuración como en la imagen anterior. Si utilizas LiteSpeed también puedes dejarlo así, pero si utilizas Nginx como servidor web debes desmarcar la opción “Optimización de Apache”.

Por un lado, tenemos estas dos opciones:

• “Smart cache” para las hojas de estilo (CSS): Permite combinar y minificar el código CSS del theme.
• “Smart cache” para el código de JavaScript: Permite combinar y minificar el código JavaScript del theme.

Y, por otro, tenemos la opción “Optimización de Apache”, que simplemente sirve para que Prestashop escriba en nuestro .htaccess algunas líneas para activar la compresión GZIP si está activa y también el cache de navegador (browser cache).

La principal diferencia entre los plugins de optimización de código JavaScript y CSS de WordPress y este módulo para Prestashop, es que en el caso de este módulo de Prestashop no optimiza ningún CSS ni JS que no sea del theme o plantilla, es decir, no llega a optimizar ningún código JS o CSS insertado por los módulos.

Como ya he comentado, la mayoría de los themes desde la versión 1.4 de Prestashop deberían ser compatibles. Sin embargo, si encuentras errores tendrás que desactivar CCC.

 

Configurar cache nativo de Prestashop

Esta funcionalidad SÍ que viene en la instalación base de Prestashop, es decir, Prestashop nos permite configurar cache (que intuyo que será cache de objetos) para guardarse en Memcached, APC o XCache.

No existe mucha documentación que nos especifique cómo funciona o qué tipo de cache es el cache nativo de Prestashop. Yo intuyo que es una mezcla: sin ser un cache de página puro, guarda ciertos elementos para evitar consultas a la DB MySQL y evitar ejecuciones de PHP.

Como puedes ver en la imagen anterior, podemos guardar cache de Prestashop en distintos sistemas que nos permiten guardar el cache en la memoria RAM: Memcached, APC o XCache.

Normalmente, es recomendable tener el cache nativo de Prestashop activo, salvo que tengas problemas con el firstbyte de tu tienda online. Lo recomendable es guardarlo en Memcached (al menos, es lo que mejor resultado me ha dado a mí).

Si utilizas un cache de página con un módulo como Page Cache Ultimate, te recomiendo desactivar el cache nativo de Prestashop para evitar incoherencias en los datos cacheados.

 

Configurar cache de objetos en Prestashop

En CMS tan pesados como Prestashop, la implementación de un cache de objetos puede ayudar a agilizar la carga en partes sin cache de página.

En tiendas online con muchas visitas, podemos utilizar Redis como cache de objetos siempre y cuando utilicemos el módulo necesario y el servidor tenga instalado el servicio de Redis.

Si necesitas mas información acerca del módulo de Redis para Prestashop, puedes encontrarla aquí: https://alvaro.click/prestashoprediscache

Desconozco si el cache nativo de Prestashop que permite guardar cache en Memcached, APC y XCache guarda cache de objetos o simplemente cache mixto. Como he dicho, tampoco he encontrado documentación al respecto.

Si tenemos que elegir entre cache de objetos y cache de página, conseguiremos mejores resultados con el cache de página. El cache de objetos es simplemente un complemento que podemos “sustituir” con un buen servidor web con PHP7 instalado y correctamente configurado.

 

Optimización de MySQL / MariaDB

En hosting compartido queda descartado, ya que es el proveedor de hosting quien tiene que tener MySQL / MariaDB correctamente optimizado y, en muchos casos, no es posible ya que distintos tipos de CMS coexisten en el mismo servidor de hosting compartido.

Prestashop, al igual que todos los CMS ecommerce, consumen muchos recursos al realizar muchas consultas a la DB MySQL o MariaDB.

Si tenemos nuestra tienda online Prestashop funcionando sobre un servidor VPS, un servidor dedicado o una infraestructura Cloud, podemos optimizar el motor de bases de datos MySQL o MariaDB.

Lo importante, para que el servidor de base de datos responda de forma rápida a las consultas realizadas por el CMS, es que los parámetros estén bien adaptados a los recursos del servidor y el uso que le está dando el CMS.

El query_cache es una de las opciones más efectivas. Debe estar activa y el tamaño del cache correctamente configurado. De esta forma podemos conseguir mejoras de hasta el 50% en la realización de consultas.

¿Cómo sabemos qué parámetros debemos configurar en el archivo my.cnf que define el funcionamiento de MySQL o MariaDB?

Pues hay varias formas. Una de ellas es hacerle caso a la documentación oficial de Prestashop para la versión 1.7 (la actual en el momento de publicar este artículo):

Lo ideal, al menos en mi experiencia, es utilizar un script que se llama MySQLTuner para analizar el funcionamiento del servidor MySQL o MariaDB durante al menos 2 o 3 días de uso normal en producción. Este script, después de analizar el uso del servidor de bases de datos, nos mostrará los parámetros que debemos configurar en nuestro archivo my.cnf.

En el siguiente artículo, publicado hace tiempo en el blog de Raiola Networks, puedes encontrar más información acerca del script MySQLTuner y la optimización de MySQL: https://raiolanetworks.es/blog/optimizar-mysql-configurando-archivo-my-cnf/

 

Tweaks extra para optimizar Prestashop

Podemos llegar a acelerar un poco más cualquier instalación de Prestashop realizando algunos cambios y ajustes.

Una de las cosas que podemos hacer es desactivar ciertas funcionalidades.

Si nos vamos a “Parámetros avanzados” >> “Rendimiento” dentro del panel de administración de Prestashop, nos vamos a encontrar un panel llamado “Características opcionales” junto al módulo de configuración CCC y al de Smarty.

Una de las razones por las que Prestashop consume muchos recursos es que tiene muchas funcionalidades complementarias para poder personalizar al máximo cualquier ecommerce.

Como puedes ver en la imagen anterior, desde ahí puedes desactivar las combinaciones de productos (si tienes alguna configurada no te dejará desactivarlas). También puedes desactivar las características de productos y la gestión de grupos de clientes.

 

Análisis y auditoría WPO de Prestashop

Quiero tocar este punto como punto final de esta mini-guía de WPO para Prestashop.

Soy consultor WordPress y estoy especializado en WPO para WordPress, pero los patrones son siempre los mismos y las técnicas WPO son las mismas para cualquier CMS sea cual sea (con pequeñas variaciones dependiendo del tipo de desarrollo).

¿A dónde quiero llegar con esto? Pues que la regla básica de cualquier WPO debe ser la lógica y la viabilidad.

La mayoría de tiendas online Prestashop nunca han sido optimizadas y nunca se les ha hecho WPO. Además de eso, están sobrecargadas con demasiados elementos o con módulos y themes que no son los ideales.

Al igual que en el resto de CMS, debemos ser conscientes de qué elementos cargamos y cuáles debemos eliminar. Cuando auditamos la velocidad y el WPO de un Prestashop, lo primero es realizar una auditoría interna de los elementos que forman el ecommerce, antes de implementar nuevas técnicas WPO como el cache de página.

Algo que quiero dejar claro es que, si entras a revisar un sitio web Prestashop y te encuentras con cualquier cache cargado contra MySQL, mi recomendación es que lo pases a “File System” para evitar problemas de rendimiento al cargarse contra la DB MySQL / MariaDB tanto las consultas de datos como el cache.

 

Análisis de Prestashop con Pingdom Tools

Para analizar y auditar una tienda online Prestashop desde fuera, sin accesos, la mejor herramienta que me he encontrado es la que recomiendo siempre y con la que hago las auditorías WPO: Pingdom Tools.

El análisis de Prestashop con Pingdom Tools no se diferencia en nada del análisis de cualquier otro CMS. Simplemente debemos aislar dos cosas: los idiomas y el index.php de Prestashop.

Lo ideal es hacer directamente la petición contra el idioma correspondiente para evitar redirecciones, es decir, contra la URL final que queremos probar. La idea es evitar WAITs falsos como los que puedes ver en la imagen anterior rodeados con un cuadro rojo.

 

Modo debug profiling de Prestashop

Algo que WordPress no incluye (aunque lo implementamos mediante plugins como Query Monitor) es un sistema de profiling dentro del modo debug de Prestashop.

Este modo debug profiling nos permite ver datos de ejecución y rendimiento de nuestra instalación de Prestashop.

Estos datos van a variar dependiendo del theme y los módulos, además de la versión exacta de Prestashop que estemos ejecutando.

Para activar el modo debug profiling en Prestashop debemos editar el archivo defines.inc.php de Prestashop que está dentro de la carpeta CONFIG.

Una vez dentro, debemos buscar la siguiente línea:

Y cambiarla por esta otra, es decir, ponerle TRUE:

Y ahora, después de autenticarte como administrador en tu Prestashop, podrás ver datos relacionados con la ejecución y el rendimiento.

Los datos obtenidos puedes verlos en la imagen anterior. Como cualquier herramienta de profiling, si sabemos dónde tocar y entendemos correctamente los datos, podemos optimizar el rendimiento de la aplicación. Podemos ver las querys, las ejecuciones de PHP y el tiempo que tarda en realizarse cada acción necesaria para cargar la página en cuestión.