Optimizar imágenes y velocidad en PrestaShop: Guía práctica

¿Tu tienda PrestaShop carga lenta? ¿Las imágenes pesan demasiado y Google te penaliza en los resultados de búsqueda? No te preocupes, es uno de los problemas más comunes en el comercio electrónico. La velocidad de carga no solo afecta a la experiencia del usuario, sino que es un factor clave para el SEO y tus conversiones.

Un estudio reciente indica que el 53% de los usuarios abandona una web que tarda más de 3 segundos en cargar. En una tienda online, cada segundo cuenta. Si vendes productos, necesitas que las fotos se vean nítidas, pero sin que eso convierta tu hosting en un suplicio.

En esta guía práctica y paso a paso, vamos a desgranar cómo optimizar PrestaShop para que vuele. Empezaremos por el aspecto más pesado (las imágenes) y terminaremos con la configuración interna de la tienda y el servidor. No necesitas ser un programador para lograrlo, solo seguir estas instrucciones.

¿Por qué es tan importante la velocidad en PrestaShop?

PrestaShop es un software muy potente, pero por defecto viene configurado de forma "segura" y no siempre con el máximo rendimiento. Si no lo ajustamos, se convierte en un coche deportivo circulando en primera marcha.

Aquí te dejo 4 razones de peso para ponerte manos a la obra:

1. SEO y Posicionamiento: Google usa la velocidad de carga como factor de ranking. Una tienda lenta posiciona peor que una rápida. Si tu competencia es rápida y tú no, pierdes visibilidad.
2. Tasa de Conversión: Un usuario impaciente no espera. Si tu página tarda en mostrar el producto, el cliente se va a la tienda de al lado. Una mejora de 0.1 segundos puede aumentar las ventas en un 10%.
3. Experiencia de Usuario (UX): Nadie disfruta navegando entre pantallas de carga. Una web fluida transmite confianza y profesionalidad.
4. Coste de Hosting: Si tu web es pesada, consumes más recursos del servidor. En un hosting compartido, esto puede provocar suspensiones temporales o que te obliguen a pagar un plan más caro. Optimizar también es ahorrar.

Fase 1: Dominar la Optimización de Imágenes en PrestaShop

Las imágenes son, con diferencia, el mayor lastre para la velocidad. Una foto de producto sacada con un móvil moderno puede pesar entre 3 y 8 MB. Multiplica eso por 100 productos y tienes un desastre.

El formato correcto: WebP y AVIF

PrestaShop ya no es solo JPG y PNG. Desde la versión 1.7.7, soporta formatos modernos.

• JPG: Ideal para fotografías complejas, pero con compresión.
• PNG: Para gráficos con transparencia, pero muy pesado.
• WebP: El estándar actual. Reduce el peso entre un 30% y un 70% sin pérdida visible de calidad. Es el que debes usar para tus productos.
• AVIF: El futuro. Comprime aún más que WebP, pero su soporte es menos universal (aunque ya Chrome y Firefox lo aceptan).

[TIP] No subas nunca una imagen en PNG si es una foto. PrestaShop te permite convertir automáticamente al subir si activas la opción correcta.

Configuración nativa de PrestaShop para imágenes

PrestaShop tiene un generador de miniaturas integrado. Vamos a configurarlo para que genere archivos ligeros.

1. Ve a Preferencias > Imágenes en tu panel de administración.
2. Verás una lista de formatos (cart, home, large, etc.).
3. Recomendación clave: Cambia el formato de todas a WebP (si tu versión lo permite). Verás un desplegable donde elegir "Formato de archivo".
4. Ajusta la Calidad de imagen (el valor de compresión). Un valor entre 80 y 85 es perfecto. Bajar de 70 empieza a notarse el "pixelado".
5. Marca la opción "Usar solo el tamaño base de imagen" si quieres evitar que se generen miles de copias innecesarias.

Redimensionar antes de subir (La regla de oro)

Aunque PrestaShop redimensiona, el proceso es más eficiente si la imagen original ya tiene un tamaño adecuado. Si subes una foto de 4000px de ancho, el servidor trabaja más para escalarla.

• Tamaño máximo: Configura tu cámara o móvil para que las fotos de producto tengan un ancho máximo de 1200px (o 1400px para zoom). Es más que suficiente para una web.
• Peso máximo: Antes de subir, comprime la imagen en tu ordenador con herramientas gratuitas como TinyPNG o Squoosh.

[WARNING] Subir una imagen de 5MB a PrestaShop no solo ralentiza la web. También consume un espacio valioso en tu hosting y hace que las copias de seguridad pesen más.

Regenerar las miniaturas

Si tu tienda ya tiene imágenes antiguas subidas en JPG pesado, tendrás que regenerarlas. Al cambiar la configuración anterior, PrestaShop no borra lo antiguo.

• Ve a Preferencias > Imágenes.
• Haz clic en el botón "Regenerar miniaturas" en la parte inferior.
• Selecciona todas las imágenes y confirma.

Este proceso puede tardar unos minutos, pero es vital. Si es muy pesado, hazlo en lotes.

Fase 2: La Caché de PrestaShop (Tu Mejor Amiga)

La caché guarda versiones "estáticas" de tus páginas para no tener que generarlas desde cero en cada visita. Es la mejora más fácil y rápida de implementar.

Activar la Caché de Smarty

Smarty es el motor de plantillas de PrestaShop. Sin caché, tiene que "pintar" la página entera cada vez. Con caché, guarda el dibujo ya hecho.

1. Ve a Parámetros Avanzados > Rendimiento.
2. Busca el apartado "Plantillas de Smarty".
3. Cambia el modo a "Recompilar las plantillas si se han modificado" en producción.
4. Busca el apartado "Caché".
5. Activa "Sí, usar caché".
6. En "Combinar, comprimir y almacenar en caché (CCC)", activa estas opciones:
   • Combinar archivos JavaScript (Sí).
   • Comprimir JavaScript (Sí).
   • Combinar archivos CSS (Sí).
   • Comprimir CSS (Sí).

[INFO] Combinar archivos reduce el número de peticiones HTTP al servidor. Es como pedir un menú del día en lugar de pedir cada plato por separado.

Caché de Servidor (APCu o Memcached)

Esto es más avanzado, pero si tu hosting lo permite, es oro puro. Guarda los resultados de las consultas a la base de datos en la memoria RAM del servidor.

• En Parámetros Avanzados > Rendimiento, busca "Caché del servidor".
• Actívala y elige "Sistema de caché de archivos" (si no sabes cuál elegir).
• Si tu hosting usa Memcached o Redis, selecciónalo. Si no estás seguro, la opción de archivos es segura.

El botón de "Vaciar Caché"

Cada vez que modifiques un módulo, un tema o un archivo, debes vaciar la caché. De lo contrario, verás errores o diseños rotos. En la barra superior de administración, verás un icono de flechas circulares en la esquina superior derecha. Úsalo a menudo.

Fase 3: Optimización del Servidor y Hosting

Aquí es donde tu elección de hosting y la configuración del servidor marcan una diferencia brutal. No es lo mismo alojar en un servidor compartido saturado que en uno optimizado.

Activar la compresión Gzip o Brotli

Tu servidor debe enviar los archivos comprimidos al navegador del visitante. Esto reduce el tráfico hasta un 70%.

• Si usas cPanel, busca la herramienta "Optimizar sitio web" y selecciona "Comprimir todo".
• Si tu hosting usa Syspanel (el panel de control que mencionamos antes, accesible por el puerto 2106), busca el apartado de Administrador de archivos o Seguridad. En Syspanel, normalmente esta opción se activa desde el instalador de aplicaciones o editando un archivo .htaccess directamente.

[WARNING] Si tu hosting es gestionado (managed), es muy probable que la compresión ya esté activa. No la dupliques en el .htaccess o podrías causar errores 500.

El .htaccess perfecto para PrestaShop

PrestaShop genera uno automáticamente, pero podemos añadirle algunas líneas mágicas para mejorar la velocidad. Edita el archivo .htaccess en la raíz de tu tienda (antes de hacerlo, descarga una copia de seguridad).

Añade estas líneas al final del archivo:

# Expiración de archivos (Leverage Browser Caching)
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType image/webp "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/javascript "access plus 1 month"
</IfModule>

# Compresión Gzip
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript application/javascript application/x-javascript
</IfModule>

Esto le dice al navegador del cliente que guarde en su disco duro las imágenes y estilos durante un año. Así, cuando vuelva a visitarte, no las descargará de nuevo.

PHP 8.x y su configuración

Usa siempre la versión más moderna de PHP que soporte tu PrestaShop (idealmente PHP 8.1 o superior). Es entre un 20% y un 30% más rápido que PHP 7.4.

• En Syspanel, ve a la sección de Administrador de aplicaciones o Gestor de PHP. Podrás cambiar la versión con un clic.
• También en Syspanel (puerto 2106), busca la opción de Configuración de PHP (php.ini). Aumenta el memory_limit a al menos 256M y el max_execution_time a 120 segundos. Esto evita errores de memoria al regenerar imágenes.

Fase 4: Módulos que te Ayudan (y los que te Hundan)

Los módulos son la magia de PrestaShop, pero también su maldición. Un módulo mal codificado puede hacer que tu web se desplome.

Recomendaciones de módulos

• Módulos de caché de terceros: Algunos como NitroPack o LiteSpeed Cache hacen el trabajo sucio por ti (imágenes, CSS, JS, caché). Son de pago, pero merecen la pena si no quieres complicarte.
• Optimización de imágenes: Si no quieres usar la nativa, busca módulos que compriman automáticamente al subir la imagen.

La limpieza de módulos

Revisa tu lista de módulos instalados. Pregúntate: ¿Uso esto realmente?

• Desinstala los módulos que no uses. No los dejes "desactivados", desinstálalos.
• Los módulos desactivados aún cargan código en algunos casos. Eliminar la carga es clave para optimizar PrestaShop.

Fase 5: Métricas y Comprobación Final

No puedes mejorar lo que no mides. Antes y después de aplicar estos cambios, ejecuta una prueba de velocidad.

Herramientas para medir

• Google PageSpeed Insights: La más famosa. Te dice la puntuación para móvil y escritorio.
• GTmetrix: Excelente para ver gráficos detallados de carga.
• Pingdom: Rápido y sencillo.

¿Qué números buscar?

• Tiempo de carga total: Menos de 3 segundos (idealmente menos de 2).
• Puntuación PageSpeed: Busca un mínimo de 80/100 en móvil y 90/100 en escritorio.

[TIP] Haz las pruebas en móvil. Es el dispositivo más usado para comprar. Si la web va bien en móvil, irá genial en escritorio.

Preguntas Frecuentes (FAQ) sobre velocidad en PrestaShop

¿Por qué mi PrestaShop es lento si tengo un buen hosting?

El hosting es solo el 30% del problema. El 70% restante es la configuración de la tienda: imágenes sin comprimir, caché desactivada, módulos innecesarios o una base de datos sucia. Revisa los puntos de esta guía antes de cambiar de servidor.

¿Cuántas imágenes puedo subir sin que la web se ralentice?

No hay un número mágico. Lo importante no es la cantidad, sino el peso total. Si tienes 1000 productos pero cada imagen pesa 50KB, irá rápido. Si tienes 100 productos y cada imagen pesa 2MB, irá lenta. Céntrate en el peso, no en el número.

¿Es necesario usar un CDN (Red de Distribución de Contenidos)?

Si vendes a nivel internacional, sí. Un CDN como Cloudflare guarda copias de tu web en servidores de todo el mundo. Si un cliente de México accede, no carga desde España (si tu hosting es español), sino desde un servidor en México. Es la mejora más grande que verás después de las imágenes.

¿Puedo activar el modo "Ensamblaje" de PrestaShop?

Sí, en Parámetros Avanzados > Rendimiento está la opción "Ensamblar plantillas". Solo actívala si tienes problemas con el CSS. Normalmente no es necesaria si usas la Caché de Servidor.

¿Cada cuánto debo vaciar la caché de PrestaShop?

Solo cuando hagas cambios en la web (instalar módulos, cambiar el tema, editar archivos). En el día a día, no debes tocarla. Si la vacías constantemente, perderás el beneficio de la velocidad.

Optimizar una tienda online es un trabajo continuo, pero con estos pasos notarás una mejora drástica en cuestión de horas. Empieza por las imágenes, activa la caché y revisa tu hosting. Tu bolsillo (y tus clientes) te lo agradecerán.