Sobre optimizando Prestashop (I)

En esta serie de Post voy a tratar de explicar cómo optimizar la velocidad de carga de nuestro Prestashop desde un punto de vista más avanzado que el que viene siendo habitual.

¿Por qué es tan importante la velocidad de carga de tu tienda Prestashop?

1- Posicionamiento en buscadores:

1.1 Si un usuario realiza una búsqueda, obtiene un resultado y al llegar a nuestra tienda la carga de la página se demora demasiado el usuario volverá al buscador para poder seleccionar otra opción, este comportamiento será identificado por el buscador siendo penalizada nuestra tienda.

1.2 Si se realiza publicidad de pago la calidad del anuncio bajará al obtenerse un porcentaje de rebote muy alto por el mismo motivo mencionado en el punto anterior.

1.3 Cuando más ligera sea una página más fácil y limpio será el indexado por parte de un buscador.

2- Experiencia de Usuario (UX):

Los usuarios actuales no esperan más de 5 segundos en la carga de cada página por las que navegan, teniendo en cuenta que hablamos de un ecommerce donde al menos se tienes que visitar de 5 a 10 páginas antes de convertir cualquier visita en una venta no podemos superar en ningún caso este tiempo máximo de carga, siendo un tiempo menor de 2 segundos por página lo ideal (lo siento esto no es fácil de conseguir con Prestashop, tendremos que trabajarlo).

Casos Reales:

Los siguientes portales nos sirven como ejemplo de lo importante de la optimización de velocidad web (Web Performance Optimization WPO)

Facebook.com : una subida de 0,5 segundos en su tiempo de carga hace disminuir el tráfico total de su red en un 3%. Una subida de 1 segundo una caída del 7%.

Amazon.com: una décima de segundo proboca una caida de ingresos del 1% que para este gigante significa millones de dolares.

Por supuesto estas caídas no son comparables a las que tendrás en tu tienda Prestashop, tu negocio no es facebook ni Amazon, tu tiempo de carga aumentará mucho más la tasa de abandono de tu sitio.

Dejémonos de teoría y vamos a la práctica:

Para empezar en este primer capítulo voy a explicar la optimización básica de Prestashop y una introducción al modo avanzado que trataré en mi segundo post.

Dentro de la pestaña Parametros Avanzados --> Rendimiento de nuestro Back Office tenemos dividido en varias secciones la parte de optimización básica de nuestro Prestashop. Comencemos explicando la opción de Smarty:

El lenguaje principal de Prestashop es el PHP que es un lenguaje de programación procesado con un módulo Vista (MVC), una de las ventajas de Prestashop es que por una parte programamos la funcionalidad y por otra la mostramos al usuario mediante Smarty que es un motor de plantillas de PHP bastante optimizado.

La opción de Forzar compilación solo debe ser usada cuando estamos haciendo cambios en nuestros archivos TPL de nuestra plantilla, tener en cuenta que el tiempo de carga se multiplicará al menos por tres dado que se compilarán todos los archivos de nuevo con cada recarga de nuestro Prestashop.

La opción Recompilar las plantillas cuando los archivos sean modificados esta es la opción que más se usa en las tiendas Prestashop que existen actualmente, es una opción factible para estar en producción y nos quita problemas cuando cargamos módulos y hacemos cambios esporádicos en los archivos de nuestra tienda (dado que Prestashop si cogerá los cambios) pero tener en cuenta que siempre es más rápido decir a Prestashop que recargue directamente la web que decirle que recargue si comprueba que nada ha cambiado en sus archivos TPL.

Si nuestra tienda está en producción siempre debería estar marcada la opción:

“Nunca recompilar los archivos de las plantillas”

de esta forma Prestashop no comprobará si se ha realizado ningún cambio en los archivos con extensión TPL y cargará los que Smarty ya ha compilado en anteriores cargas dado que lo que realmente hace Smarty es esto mismo, une el código PHP sobre las funcionalidades con el código que sirve para mostrar la tienda al cliente.

Los archivos compilados de Smarty se guardan en la siguiente ruta de Prestashop:

cachesmartycompile

y tienen el siguiente aspecto:

como se puede ver los archivos TPL y sus variables han sido convertidos a PHP por el gestor de Smarty. Este archivo en concreto es la compilación del archivo cms.tpl de la plantilla que se usa cada vez que queremos ver el contenido de cualquier CMS que hayamos creado en Prestashop como puede ser el famoso “Aviso legal” o “sobre nosotros”

En el siguiente apartado de la sección de optimización de Smarty nos encontramos con la siguiente opción:

Si seleccionamos Sistema de archivos usaremos el tipo de archivos comentados en el punto anterior, este sistema de archivos es el más usado en tiendas Prestashop y da muy buen resultado sobre todo cuando se dispone de discos duros SSD en nuestro servidor.

La opción de Tipo de cache MySQL de Prestashop está mucho menos extendida, quizás por desconocimiento o por lo saturados que suelen estar los servidores Mysql cuando se usa Prestashop. Esta opción lo que hace es grabar en la tabla ps_smarty_cache directamente cada uno de los archivos compilados de Smarty, de esta forma en vez de hacer la petición como archivo hacemos una query a la base de datos. Ojo que pasamos de 59 consultas la base de datos a 510 al cargar por ejemplo la página de inicio

.

Si activamos la opción de Cache MySQL los archivos de Smarty ubicados en el directorio cachesmartycompile se seguirán creando y cargando con lo que esta opción no es factible a priori si no optimizamos las consultas y evitamos que carguen los archivos de smarty.

Seguimos con la opción:

Sin duda esta opción tiene que estar marcada en Limpiar la cache siempre que algo se haya modificado. En caso contrario nuestro server se irá llenando paulatinamente de archivos que nunca más serán usados al haberse modificado (he visto hosting con 10GB de estos archivos inservibles)

Vamos ahora con el siguiente bloque que es muy importante:

Sin duda todas las opciones que aparecen deben estar activadas aunque se debe tener claro que hace cada opción:

Esta es la optimización correcta pero vamos a adentrarnos en que hace cada opción, comenzamos con la primera:

Prestashop usa cientos de archivo CSS para mostrar el diseño de la tienda, más concretamente en un Prestashop estándar y cargando la página de inicio cargamos la módica cantidad de 32 archivos distintos y esto son muchas peticiones al servidor solo para cargar el diseño de nuestra tienda. Activando esta opción Prestashop une estos 32 archivos en solo 1 archivo que se ubica en el siguiente directorio:

/themes/default-bootstrap/cache/v_2_a626428eb9fe7470a14cb29a65288b5b_all.css

de esta forma nos quitas peticiones al server y tamaño de archivos dado que Prestashop junta todo el código en una línea para optimizarlo (atención, si existe un error en vuestro código CSS la página se visualizará mal al activar esta opción)

En el próximo post seguiremos adentrándonos más en la Optimización avanzada de Prestashop.