Performance - WebP, lazy load, minify & cache. Performance acelera tu tienda con imágenes en WebP (con vuelta segura al original), carga diferida, minificación y agrupación de CSS y JS, cabeceras de caché de navegador, indicaciones preload y preconnect y un mantenimiento no destructivo de la base de datos. Cada optimización tiene su propio interruptor, así que enciendes justo lo que tu plantilla admite y dejas el resto apagado. Sin programar, sin tocar la plantilla.
Performance acelera tu tienda con imágenes en WebP (con vuelta segura al original), carga diferida, minificación y agrupación de CSS y JS, cabeceras de caché de navegador, indicaciones preload y preconnect y un mantenimiento no destructivo de la base de datos. Cada optimización tiene su propio interruptor, así que enciendes justo lo que tu plantilla admite y dejas el resto apagado. Sin programar, sin tocar la plantilla.
1. Instalación
- En el back office ve a Módulos → Gestor de módulos → Subir un módulo y selecciona el ZIP del módulo.
- Cuando termine la instalación, pulsa Configurar para abrir el asistente.
.local, .test, localhost) se admiten siempre. Cuando sale una versión nueva, el propio módulo te avisa.Si en lugar de la confirmación lees «Upload failed», PrestaShop puede haber desactivado el módulo sin decírtelo: los ajustes y los datos se quedan donde están. Cómo actualizar un módulo, y qué hacer si dice «Upload failed».
2. Configuración: paso a paso
La pantalla Configurar cabe en una sola página: un panel de estado, los ajustes de cada optimización, los botones de acción y una herramienta de limpieza de la base de datos.
Estado
Un panel de control de solo lectura, arriba del todo.
- Interruptor principal: si las optimizaciones están encendidas o apagadas ahora mismo.
- Motor WebP (GD/Imagick): si el servidor sabe generar WebP. Si no está disponible, la reescritura a WebP simplemente se omite.
- Carpeta de caché WebP con permiso de escritura: si los archivos WebP generados se pueden guardar.
- Bloque .htaccess de caché de navegador: si las reglas de caché están escritas ahora mismo.
General e imágenes interruptor principal
El interruptor principal y todas las optimizaciones de imagen.
- Activar las optimizaciones: interruptor principal. Apagado, el módulo no hace nada en el front office.
- Servir WebP: envuelve las imágenes en
<picture>con una fuente WebP y el original como respaldo. - Carga diferida de imágenes / Carga diferida de iframes y vídeos: añaden
loading="lazy"donde falta. El logotipo, las imágenes de la cabecera de la página, las 3 primeras imágenes y las imágenes de alta prioridad se cargan enseguida. - Respaldo con IntersectionObserver: un script mínimo para navegadores antiguos sin carga diferida nativa.
- Calidad WebP (1-100): la calidad de compresión con la que se generan los WebP.
CSS / JS / HTML
Combina y minifica tus archivos. Las opciones «invasivas» vienen apagadas: pruébalas en tu plantilla.
- Combinar y minificar CSS (invasivo) / Combinar y minificar JS (invasivo): apagados por defecto. Activan el CCC nativo de PrestaShop (combinar, comprimir y guardar en caché): todas las hojas de estilo locales se combinan en un único archivo minificado, y los scripts locales en un único archivo minificado por posición, lo que puede cambiar el orden de carga. Prueba tu plantilla después de activarlos.
- Minificar el HTML (invasivo): quita los espacios sobrantes; respeta
pre/textarea/script/style. - Exclusiones: un fragmento por línea; cualquier imagen cuya dirección contenga uno de ellos se deja tal cual (sin WebP ni carga diferida).
Preload / Preconnect
Añade indicaciones de recursos para acelerar el primer pintado.
- Preload: una dirección por línea para tipografías y archivos críticos. El atributo
asse deduce de la extensión. - Preconnect: un origen por línea, por ejemplo
https://fonts.gstatic.com.
CSS crítico (avanzado) opcional
Incrusta en el <head> de la página el CSS de la parte visible sin desplazarse. Es una opción avanzada y viene apagada.
- Incrustar el CSS crítico (invasivo): apagado por defecto; incrusta en el head el CSS que escribas debajo.
- CSS de la parte visible: el CSS que se incrusta. Déjalo vacío si no sabes qué extraer.
Umbrales de mantenimiento de la base de datos
Cuánto tiempo deben tener los datos temporales antes de que la herramienta de limpieza los toque.
- Carritos abandonados con más de (días)
- Conexiones e invitados con más de (días)
- Líneas de registro con más de (días)
Cada valor va de 7 a 3650 días. Estos umbrales mandan sobre la herramienta de limpieza que hay más abajo en la página.
Acciones
Botones de mantenimiento de un solo clic.
- Vaciar la caché WebP: borra los archivos WebP generados.
- Regenerar los WebP (lotes de 500): genera de antemano los WebP, hasta 500 imágenes por vez.
- Escribir / quitar las reglas de caché de navegador: escribe las reglas de caché en el
.htaccess, dentro de un bloque reversible# BEGIN/END cll_perf(la primera vez se crea una copia.htaccess.cll_perf-bak). GZIP y Brotli se activan allí donde el módulo de Apache está presente.
Limpieza de la base de datos (mantenimiento)
Una limpieza no destructiva de los datos temporales. Esto no es el «modo mantenimiento» de la tienda: tu front office sigue en línea y no se bloquea a ningún visitante.
- Ejecutar (si no, simulación): déjalo sin marcar para ver la previsión; no se borra nada hasta que lo marcas.
- Hacer también OPTIMIZE TABLE: recupera, si quieres, el espacio de las tablas después de la limpieza.
- Lanzar el mantenimiento: solo se tocan los datos temporales de invitados y registros más antiguos que tus umbrales; los pedidos y los clientes válidos no se tocan nunca.
3. Comprobar que funciona
- Abre el panel Estado: el interruptor principal debe estar encendido y el motor WebP debe figurar como disponible.
- Con «Servir WebP» encendido, mira el código fuente de una ficha de producto: las imágenes deben ir envueltas en
<picture>con una fuente.webp. - Lanza primero la limpieza de la base en simulación: dice cuántos carritos, conexiones y líneas de registro se borrarían antes de que ejecutes de verdad.
- Después de escribir las reglas de caché de navegador, busca en tu
.htaccessel bloque# BEGIN cll_perf.
4. Preguntas frecuentes
¿Puede una optimización romper mi plantilla?
Las opciones «invasivas» (combinar y minificar CSS y JS, minificar el HTML, CSS crítico) vienen apagadas. Actívalas de una en una y comprueba el resultado; usa la lista de exclusiones para saltarte cualquier imagen problemática.
¿Y si mi servidor no sabe generar WebP?
El panel Estado te lo dice. Si no hay ni GD ni Imagick, la reescritura a WebP simplemente se omite y se sirven las imágenes originales.
¿La limpieza de la base es segura?
Sí. No es destructiva, ofrece siempre una simulación y solo borra datos temporales de invitados y registros más antiguos que tus umbrales, nunca pedidos ni clientes válidos.
¿Tengo que tocar la plantilla?
No. Performance funciona con los hooks estándar y es compatible con cualquier plantilla.