Performance - WebP, lazy load, minify & cache: Guida installazione e uso (PrestaShop)

Performance - WebP, lazy load, minify & cache. Performance velocizza il tuo shop con la consegna WebP (fallback sicuro all'originale), lazy loading, minificazione e combinazione di CSS/JS, header di cache del browser, suggerimenti preload/preconnect e manutenzione del database non distruttiva. Ogni ottimizzazione ha il suo interruttore, così attivi esattamente ciò che il tuo tema supporta e lasci spento il resto. Nessun codice, nessuna modifica al tema.

Performance velocizza il tuo shop con la consegna WebP (fallback sicuro all'originale), lazy loading, minificazione e combinazione di CSS/JS, header di cache del browser, suggerimenti preload/preconnect e manutenzione del database non distruttiva. Ogni ottimizzazione ha il suo interruttore, così attivi esattamente ciò che il tuo tema supporta e lasci spento il resto. Nessun codice, nessuna modifica al tema.

1. Installazione

  1. Nel back office vai su Moduli → Gestione moduli → Carica un modulo e seleziona lo ZIP del modulo.
  2. A installazione completata, clicca Configura per aprire la procedura guidata.
Gli aggiornamenti sono automatici. Gli aggiornamenti sono inclusi. I domini di sviluppo (.local, .test, localhost) sono sempre ammessi. Quando esce una nuova versione viene segnalata dentro al modulo.

2. Configurazione: passo per passo

La schermata Configura è una pagina unica: un pannello di stato, le impostazioni per ogni ottimizzazione, i pulsanti azione e uno strumento di pulizia del database.

Stato

Un pannello di sola lettura mostrato in cima alla pagina.

  • Interruttore generale: se le ottimizzazioni sono attualmente ON o OFF.
  • Motore WebP (GD/Imagick): se il server può generare WebP. Se non disponibile, la riscrittura WebP viene semplicemente saltata.
  • Cartella cache WebP scrivibile: se i file WebP generati possono essere salvati.
  • Blocco .htaccess cache del browser: se le regole di cache sono attualmente scritte.
Stato
Stato: capacità del server a colpo d'occhio

Generale e Immagini interruttore generale

L'interruttore generale e tutte le ottimizzazioni delle immagini.

  • Abilita ottimizzazioni: interruttore generale. Off = il modulo non fa nulla sul front office.
  • Servi WebP: incapsula le immagini in <picture> con una sorgente WebP e l'originale come fallback.
  • Lazy-load immagini / Lazy-load iframe/video: aggiungono loading="lazy" dove manca.
  • Fallback IntersectionObserver: piccolo script per browser vecchi senza lazy loading nativo.
  • Aggiungi dimensioni mancanti: width/height best-effort per ridurre il layout shift (più pesante).
  • Qualità WebP (1-100): la qualità di compressione usata per generare WebP.
Generale e Immagini
Generale e Immagini: interruttore generale, WebP e lazy loading

CSS / JS / HTML

Minifica, combina e ritarda i tuoi asset. Le opzioni "invasive" sono spente di default, provale sul tuo tema.

  • Minifica CSS / Minifica JS: usano la cache nativa per-file di PrestaShop (sicure).
  • Combina CSS (invasiva) / Combina JS (invasiva): spente di default; possono rompere alcuni temi, prova prima di attivare.
  • Defer JS: aggiunge defer agli script non critici.
  • Sposta JS nel footer: opt-in, dipende dal tema.
  • Minifica HTML (invasiva): comprime gli spazi; preserva pre/textarea/script/style.
  • Esclusioni: un frammento per riga; ogni URL di asset o src immagine che contiene uno di questi viene lasciato intatto.
CSS / JS / HTML
CSS / JS / HTML: minifica, combina, defer ed esclusioni

Preload / Preconnect

Aggiungi i resource hint per velocizzare il primo render.

  • Preload: un URL per riga per font/asset critici. L'attributo as viene rilevato dall'estensione.
  • Preconnect: un'origine per riga, es. https://fonts.gstatic.com.
Preload / Preconnect
Preload / Preconnect: resource hint per font e origini

Critical CSS (avanzato) opzionale

Incorpora il CSS above-the-fold nel <head> della pagina. Avanzato e spento di default.

  • Inline critical CSS (invasiva): spenta di default; incorpora il CSS sottostante nell'head.
  • CSS above-the-fold: il CSS da incorporare. Lascia vuoto se non sai cosa estrarre.
Critical CSS (avanzato)
Critical CSS: incorpora gli stili above-the-fold

Soglie di manutenzione database

Quanto devono essere vecchi i dati transitori prima che lo strumento di pulizia li tocchi.

  • Carrelli abbandonati più vecchi di (giorni)
  • Connessioni/ospiti più vecchi di (giorni)
  • Righe di log più vecchie di (giorni)

Ogni valore è compreso tra 7 e 3650 giorni. Queste soglie guidano lo strumento di pulizia più in basso nella pagina.

Soglie di manutenzione database
Soglie di manutenzione database: limiti d'età per i dati transitori

Azioni

Pulsanti di manutenzione con un clic.

  • Svuota cache WebP: rimuove i file WebP generati.
  • Rigenera WebP (batch 500): pre-genera i WebP per un massimo di 500 immagini alla volta.
  • Scrivi / Rimuovi regole cache del browser: scrive le regole di cache nel .htaccess dentro un blocco reversibile # BEGIN/END cll_perf (viene creato un backup una tantum .htaccess.cll_perf-bak). GZIP/Brotli vengono attivati dove il modulo Apache è presente.
Azioni
Azioni: cache WebP e regole .htaccess di cache del browser

Pulizia database (manutenzione)

Una pulizia non distruttiva dei dati transitori. Questa non è una "modalità manutenzione" del negozio: il front office resta online e i visitatori non vengono mai bloccati.

  • Esegui (altrimenti dry-run): lascia deselezionato per l'anteprima; nulla viene eliminato finché non lo selezioni.
  • Esegui anche OPTIMIZE TABLE: recupera spazio nelle tabelle dopo la pulizia.
  • Avvia manutenzione: vengono toccati solo i dati transitori di ospiti/log più vecchi delle tue soglie; ordini e clienti validi non vengono mai toccati.
Pulizia database (manutenzione)
Pulizia database: prima sempre dry-run, poi esegui

3. Verifica che funzioni

  • Apri il pannello Stato: l'interruttore generale dovrebbe essere ON e il motore WebP "disponibile".
  • Con "Servi WebP" attivo, guarda il sorgente di una scheda prodotto, le immagini dovrebbero essere incapsulate in <picture> con una sorgente .webp.
  • Esegui prima la pulizia database in dry-run: riporta quanti carrelli, connessioni e righe di log verrebbero rimossi prima di eseguire davvero.
  • Dopo aver scritto le regole di cache del browser, controlla nel tuo .htaccess il blocco # BEGIN cll_perf.

4. Domande frequenti

Un'ottimizzazione può rompere il tema?

Le opzioni "invasive" (combina CSS/JS, minifica HTML, critical CSS) sono spente di default. Attivale una alla volta e prova; usa la lista Esclusioni per saltare qualsiasi asset problematico.

E se il mio server non può creare WebP?

Il pannello Stato te lo dice. Se né GD né Imagick sono disponibili, la riscrittura WebP viene semplicemente saltata e vengono servite le immagini originali.

La pulizia database è sicura?

Sì. È non distruttiva, offre sempre un dry-run e rimuove solo dati transitori di ospiti/log più vecchi delle tue soglie, mai ordini o clienti validi.

Devo modificare il tema?

No. Performance funziona tramite hook standard ed è compatibile con qualsiasi tema.

🔧 Scopri e acquista il modulo: Performance - WebP, lazy load, minify & cache

Guide correlate

📚 Tutte le guide dei moduli

Torna all'inizio