Compartir es sexy
  •  
  •  
  •  
  •  
  •  

Ya sabes que cuanto más rápida sea una web, mejor para todo. Te voy a explicar cómo mejorar la velocidad de Prestashop y hacerlo increíblemente rápido.

Opciones de rendimiento de Prestashop


CCC (Combinación, Compresión y Caché)

Estas opciones son una de las que más nos gustan de Prestashop. Tienes todo tu CSS en una sola línea de código. Y lo mismo para JS y HTML.

De este modo los ficheros son más pequeños y cada página de la web carga más rápido.

También puedes mover abajo JavaScript, pero ten cuidado al hacerlo. Es el mejor sitio por muchos motivos, pero deberías comprobar antes de nada que todo funciona correctamente tras marcar esta opción.

Aquí tienes un gráfico que muestra los cambios en velocidad antes y después de modificar CCC

Usar CCC para mejorar la velocidad de Prestashop

Cortesía de canonicalized.com

En azul tienes los resultados de velocidad antes de CCC y en rojo después de CCC medidos con 5 recursos diferentes.

Test Sin CCC Con CCC
GTmetrix PageSpeed 82 94
GTmetrix Yslow 90 74
Google Pagespeed Mobile 64 66
Google Pagespeed Desktop 71 73
Pingdom Score 86 86

Un momento, no sigas: has dicho que con CCC la web cargaba más rápido. Pero en este gráfico parece que es más lenta. ¿Cómo puede ser eso?

Efectivamente, es genial tener todo tu CSS/JS/HTML en únicas líneas, pero esto está suponiendo una carga extra para el servidor. La página será más compacta pero al servidor le llevará más tiempo procesarla.

La mejor manera de hacer la optimización es en el lado del servidor. Por ejemplo, Google tenía hasta agosto de 2015 el servicio PageSpeed. Aún puedes instalar sus módulos en tu servidor. Apache y Nginx lo aceptarán sin problemas.

También puedes probar alguna de las alternativas que recomiendan en KeyCDN.

Aún así, tranquilo/a, veremos más maneras de evitar los posibles problemas de velocidad.

También es útil

  • utiliza Rijndael con la librería mcript (es más rápido)
  • no pierdas tiempo en aceleradores PHP tipo Xcache o APC (no confundir con APCu); puedes utilizar OPcache para acelerarlo.

 

Qué no hacer (no te sabotees)


 

  • no actives el sistema integrado de caché en archivos
    • puede parecer una buena idea en un principio pero hará la web más lenta al añadir más páginas a la caché
  • no actives los módulos de estadísticas de Prestashop
    • llenan la base de datos muy rápido
    • utiliza Google Analytics para las estadísticas
      • asegúrate de tener un módulo que integre los datos e-commerce
  • no utilices demasiados archivos de fuentes externas (tipos de letra, ficheros CSS/JS)
    • no tienes control sobre ellos y Prestashop no los puede incluir en su mejora de rendimiento
  • no utilices demasiados scripts de seguimiento externos
    • si quieres tener un 100/100 en los tests de PageSpeed (de Google, GTmetrix, etc), tienes que descargar cada script externo localmente; incluso Google Analytics
      • aunque Google no lo recomiende, aquí una manera de actualizarlo cada 12 horas
      • una alternativa única es un servicio llamado Segment. Conecta todos los tracking que tengas en un solo lugar (todos tus scripts externos no estarán, será la API de Segment la que les enviará los datos)

Recuerda comprobar los indicadores de velocidad para tus páginas principales (categorías, productos, CMS, etc). Muy probablemente los listados y las páginas de productos reciban la mayor cantidad de tráfico. Son claves para no mosquear a tu cliente con velocidades lentas de carga.

Módulo caché


¿Por qué es importante un módulo de caché?

Vamos a echar un vistazo a este test de impacto de velocidad de carga para una web Prestashop sin módulo de caché.

 

Impacto en la velocidad de carga sin módulo caché

Cortesía de canonized.com

*simulando hasta 25 usuarios a la vez

El tiempo de carga de la home está por debajo de los 4 segundos, no está mal. Y no hay caídas.

Si la web estuviera en un servidor compartido o con bajo rendimiento, habría caído al llegar a 25 usuarios.

Vamos a ver ahora cómo cambia cuando hay un módulo de caché activo:

Impacto en la velocidad de carga con módulo de caché activo

Cortesía de canonized.com

IMPRESIONANTE! El tiempo de carga está por debajo de un segundo. Con 50 usuarios concurrentes, se mantiene cercano a los 500 ms.

Y lo mejor de todo es que la carga para tu servidor será prácticamente inexistente. Servir páginas “cacheadas” a tus usuarios requiere recursos mínimos.

Estas son algunas buenas opciones para módulos de caché:

Intenta alejarte de los módulos gratuitos. Un buen servicio de caché no es algo en lo que tengas que ahorrar dinero.

 

Consejo avanzado: calienta la caché

Para que la caché se active en una página, alguien tiene que haberla visitado primero. Esa primera persona no tendrá la experiencia de ver una página que cargue rápido. No es el fin del mundo, pero cada visitante cuenta. Y recuerda que siempre, lo más importante, es que garantices la mejor experiencia posible a tus visitantes.

Entonces, ¿cómo hago para que mis páginas estén en la caché sin que mis visitantes hayan tenido que cargarlas antes? ¿Las tengo que visitar yo? Bien, no exactamente.

Crea una tarea cron que simule una visita a cada página. El mejor momento para hacerlo es durante la noche, que el tráfico suele ser menor.

Antes de nada, necesitas una lista de todas las URL de tu web. Qué mejor que tu actual sitemap. Puedes generarlo utilizando el módulo de sitemap incluido en Prestashop.

Y después, necesitas un bash script que recorra cada página. Por ejemplo:

 

#!/bin/bash
URL='tuweb.com'

wget --quiet https://$URL/1_en_1_sitemap.xml --no-cache --output-document - | egrep -o "http(s?):\/\/$URL[^] \"\(\)\<\>]*" | while read line; do
    time curl -A 'Cache Warmer' -s -L $line > /dev/null 2>&1
    echo $line
done

Si tienes más de un sitemap, asegúrate de incluirlo en el script.

Por último, configura las tareas cron.

El orden sería:

  1. vaciar la caché desde el módulo
  2. regenerar el sitemap
  3. ejecutar el “calentador” de caché

Puedes ejecutar los dos primeros desde el módulo de “Gestor de tareas cron” del propio Prestashop, si te resulta más sencillo. El tercer paso es preferible hacerlo a nivel de servidor.

Por ejemplo, tendrías que añadir una instrucción similar en tu lista de tareas cron:

45 02 * * * bash /home/admin/warmcache.sh

Y ejecutarla en horario nocturno.

Configuración del servidor


Mucha gente cree que cuanto más potente sea el servidor, más rápida será nuestra web.

Es falso.

Quién te diga eso, o tiene muy poca experiencia, o te está intentando vender un servidor más caro.

Si no es el tamaño, ¿entonces qué es lo importante? La configuración

Optimización de la base de datos

Si estás utilizando MyISAM, lo que más necesita tu base de datos es query cache.

Cachear las peticiones (queries) es una buena manera de aliviar algo de presión en el servidor para webs Prestashop.

Lo único que necesitas es añadir estas tres líneas al fichero my.cnf y reiniciar el servidio MySQL.

La configuración más común es:

query_cache_size = 134217728
query_cache_limit = 1048576
query_cache_type = 1

Hemos asignado 128MB de memoria para la cache query de MySQL, con un límite por petición de 1MB.

Si te parece complicado, pídele a tu proveedor de hosting que te eche una mano. No debería tomar más de 5 minutos.

Notarás las diferencias en la velocidad al momento.

Para bases de datos InnoDB, el parámetro más importante es el tamaño del buffer.

La mejor manera de retocar los ajustes de cualquier dispositivo de almacenamiento es simplemente utilizar una herramienta como mysqltuner, para obtener sugerencias y aplicarlas en tu base de datos.

Ten mucho cuidado de no modificar lo que no es, pero eso ya lo sabes 🙂

Usando Memcache o Redis

Piensa en Memcache como en una capa intermedia entre la web y su base de datos.

Memcache almacena datos y objetos en la memoria RAM del servidor. De esta manera, alivia mucha presión sobre la base de datos.

Redis es una buena alternativa al anterior. Así que considéralo un motor de cahé más potente.

Es un poco más complejo configurarlo en Prestashop. Quizá necesites un módulo a medida para poder integrarlo.

Otra solución más ligera para la caché de usuario es APCu (no confundir con APC). Es un poco complicado de instalar en algunas ocasiones, pero es una sólida solución para webs de servidor único.

Sólo necesitas estas dos utilidades:

Limpiador de Prestashop

El servidor web

apache vs nginxLos dos más populares son Nginx y Apache. Te recomendamos usar los dos a la vez, así aprovecharás la velocidad de Nginx y evitarás sus limitaciones con Apache.

¿La versión de PHP importa?

ph

Importa para la seguridad y la velocidad. Y si estás leyendo este artículo, estás interesado en velocidad.

Las versiones antiguas de PHP no soportan las nuevas funciones que tu web puede necesitar, tienen errores y son muy lentas.

¿Cuáles son las versiones de PHP buenas?

La 5.5 y la 5.6 son muy sólidas. Cualquier otra anterior, será obsoleta en breve.

Magento (2.0) ha cesado su soporte a versiones de PHP anteriores a la 5.5.22. Creemos que Prestashop pronto hará lo mismo.

El nuevo PHP (7) parece ser que será un adelanto muy importante respecto a la velocidad. Será mucho mas rápido que las versiones anteriores.

La mayoría de plataformas de código abierto, como WordPress, Prestashop, Magento, trabajan sobre versiones anteriores de PHP.

Para ir bien, cualquier aplicación web debería mejorar su código a PHP 7.

Una gran alternativa que viene de Facebook

h

Sí, has leído bien.

Facebook no es sólo un lugar donde estar en contacto con tus amigos, también crean software de código abierto.

Facebook utiliza PHP, entre otros, como lenguaje de programación.

Siendo una de las webs con más visitas del mundo, necesitan velocidad. Necesitan un PHP que sea capaz de atender más peticiones a la vez sin cargar la CPU de manera exagerada.

Así que diseñaron HHVM (Hip Hop Virtual Machine).

Básicamente, convierte el código PHP en código máquina, que, como sabréis, es el código capaz de interpretarse a mayor velocidad en un procesador.

El rendimiento es excelente. HHVM es rápido y puede servir peticiones con mucha precisión, pero necesita memoria. Así, si sólo tienes 1GB de RAM en tu servidor, deberías considerar ampliarla.

Lo mejor de todo es que siempre puedes tener PHP como backup en caso de que algo pase.

Truco avanzado: utiliza un script que reinicie los procesos HHVM cada vez que consuman mucha memoria.

 

Acelera con Varnish

Varnish es una increíble aplicación de aceleración web.

Lo cual la hace muy rápida si usas la RAM para almacenar la caché HTML.

Lo mejor es que Varnish parece adivinar dónde están las páginas de la web más visitadas. Y ésas las hace más rápidas. De alguna manera prioriza el contenido con más demanda y lo hace extraordinariamente rápido.

Puede trabajar tanto en webs con mucha demanda de peticiones como en webs más medianas.

Pero donde realmente demuestra lo que vale, es en las webs con mucho tráfico.

Lo malo es que no es fácil de configurar. Especialmente en Prestashop.

Al transformar elementos en piezas estáticas, debes tener mucho cuidado de no introducir en la caché objetos dinámicos de la web, como carritos, cuenta, página de pedido, etc.

 

Cambios rápidos de gran valor


Configura una CDN

  • es especialmente valiosa para webs con visitantes de todo el mundo
  • los ficheros que habitualmente estarían en la CDN son imágenes, vídeos, CSS y JS (los ficheros más grandes)
  • Amazon CloudFront es gratis el primer año, puedes probar

Gzip y caché de navegador

Pequeños aspectos como gzip y cabeceras de expiración son cruciales para Google. Algunos módulos en Prestashop proporcionan a la caché del navegador esta funcionalidad (PageCache y JPresta).

Cambia a un módulo avanzado de navegación por facetas

Los comercios que utilizan muchos filtros de producto serán más lentos a medida que crezcan.

Aquí tienes algunas alternativas incluyendo el Filtro Ajax de Presto Changeo. El filtrado avanzado es muy interesante porque consiguen indexaciones de atributos de productos muy precisas.

Optimizado de imágenes sin perder calidad

Esto se aplica a todo tipo de webs.

Prestashop genera imágenes de producto comprimidas de por sí, así que no hay que darle muchas vueltas.

Pero las imágenes de las plantillas no suelen estar optimizadas.

Puedes pensar que no quieres comprimirlas para que tu web no parezca más cutre. Pero, ¿y si hay una manera de comprimirlas sin perder calidad)

Hay aplicaciones como ImageOptim (para Mac) o FileOptimizer (para Windows) que funcionan de maravilla y hacen las imágenes menos pesadas.

Si trabajas en SaaS, prueba Kraken.io

 

Descarga las fuentes localmente

Hasta hace un tiempo había una utilidad llamada localfont, que ya no está operativa. Si quieres descargar las fuentes, prueba esta herramienta.

Con ella, te descargas tus Google Fonts preferidas y el código CSS asociado necesario.

Así, en lugar de conectarse remotamente a descargar las fuentes, las carga directamente del CSS. Y esto produce una mejora del 2% en los resultados de PageSpeed.

Probando el rendimiento de diferentes configuraciones


Hemos tomado los resultados de canonicalized.com, que ha probado en un Prestashop medio con unos 1000 productos y 50 categorías. Aquí tienes los resultados para diferentes configuraciones de servidor y caché.

page speed para productos y categorias en prestashop

tiempo de carga para producto y categoria en prestashop

 

Bueno, los datos hablan por sí solos.

Lo importante es que tengas siempre en cuenta que tu web deber ser lo más rápida posible. Esto la hará cómoda para tus visitantes, aumentará la tasa de conversión, y sobre todo, mejorará el posicionamiento natural (SEO) de tu web.

Así que, te animo a que vayas probando todas las opciones que he comentado en este artículo.

Mucha suerte y mucho ecommerce 🙂

Rating: 5.0. From 1 vote.
Please wait...

Compartir es sexy
  •  
  •  
  •  
  •  
  •