I tuoi clienti vedono la versione vecchia del negozio: cache del browser e versioning

Hai corretto un difetto del design su mobile, hai verificato che si vede bene e consideri la questione chiusa. Il giorno dopo un cliente ti manda uno screenshot con la pagina sfasata, esattamente com'era prima. Tu non riesci a riprodurlo. Non è che il cliente si sbagli: il suo browser continua a usare il vecchio foglio di stile che ha salvato l'ultima volta che ha visitato il negozio.

È uno dei problemi più sconcertanti nella gestione di un negozio, perché a chi fa la modifica non succede mai. Vediamo perché accade e come evitarlo.

Perché il browser conserva i file

Per caricare le pagine rapidamente, il browser conserva una copia dei file che non cambiano spesso: fogli di stile, script, immagini e font. La volta successiva che gli servono, usa la sua copia invece di richiederli al server. Per quanto tempo li conserva lo decidono le intestazioni di cache che il server invia con ogni file.

Per un negozio, che questi file vengano conservati a lungo è un bene: meno richieste, pagine più veloci, meno carico sul server. Il problema nasce quando ne cambi uno e il suo indirizzo resta lo stesso. Il browser non ha modo di sapere che c'è una nuova versione e continua a usare quella che ha finché non scade.

I sintomi

• Design sfasato o incompleto solo per alcuni clienti.
• Un pulsante che non fa nulla perché l'HTML è nuovo ma il JavaScript è quello vecchio (o viceversa).
• Errori JavaScript nella console che nel tuo browser non compaiono.
• Lamentele che spariscono da sole dopo qualche giorno, quando le copie scadono.
• Il classico «a me funziona» dello sviluppatore, che ricarica con la cache svuotata.

Non è solo il browser

Tra il tuo server e il cliente possono esserci diversi livelli che conservano copie:

• La cache di PrestaShop dei file combinati. Se hai attivato l'opzione per combinare, comprimere e mettere in cache CSS e JS, il negozio serve file generati a partire dai tuoi. Se cambi un file sorgente e la versione combinata non viene rigenerata, nessuno vede la modifica, nemmeno tu.
• La cache dei template di Smarty, se hai cambiato un template.
• Una cache di pagina, in un modulo o sul server, che conserva l'HTML con gli indirizzi vecchi.
• Una CDN o un proxy davanti al negozio, con la propria copia dei file.
• Il browser di ogni cliente.

I primi quattro li controlli tu: svuotarli fa parte di qualsiasi modifica al design. L'ultimo no: non puoi chiedere a ogni cliente di svuotare la sua cache.

La soluzione: che l'indirizzo cambi quando cambia il file

La tecnica standard si chiama versioning (o cache busting). Consiste nel fare in modo che l'indirizzo del file includa qualcosa che cambia ogni volta che ne cambia il contenuto. Per esempio, aggiungendo un parametro: custom.css?v=20 diventa custom.css?v=21. Per il browser è un indirizzo nuovo, quindi lo scarica; e finché non cambia, può continuare a conservarlo per tutto il tempo che vuole.

Ci sono vari modi per calcolare questo marcatore:

• In base alla data di modifica del file. Automatico: ogni volta che salvi il file, cambia. Viene riscaricato solo ciò che è cambiato.
• In base all'impronta del contenuto. Altrettanto automatico e più preciso, ma bisogna calcolarla.
• Un numero di versione globale che incrementi tu a ogni rilascio. Viene riscaricato tutto, anche se è cambiato un solo file.

Quando PrestaShop combina e comprime i file, genera già nomi nuovi per il file combinato al momento della rigenerazione. Ma non tutti i negozi usano questa opzione (a volte crea problemi con l'ordine di caricamento di certi moduli) e non copre i file caricati singolarmente.

Attenzione alle date nei rilasci

Il versioning basato sulla data di modifica ha una trappola: se carichi i file con uno strumento che conserva la data originale (alcuni programmi FTP, alcuni metodi di rilascio o di ripristino dei backup), il file cambia ma la sua data no, e il marcatore di versione resta lo stesso. In questi casi devi poter forzare a mano una nuova versione dopo il rilascio.

E se accorciassi il tempo di cache?

È la tentazione quando il problema si ripete: configurare il server perché il browser conservi CSS e JS solo per pochi minuti, o perché chieda sempre se c'è una nuova versione. Funziona, ma lo paghi a ogni visita: più richieste, più attesa su mobile e più carico sul server, anche per i file che non cambiano per mesi. Con il versioning puoi fare esattamente il contrario: lasciare tempi di cache lunghi, che è ciò che favorisce la velocità, perché quando un file cambia cambia anche il suo indirizzo.

Ciò che conviene, invece, è che l'HTML delle pagine non venga conservato a lungo nel browser né nei livelli intermedi, perché è lui a contenere gli indirizzi con la versione. Se l'HTML vecchio resta in cache, continuerà a richiedere i file vecchi anche se sono versionati.

Cosa fare dopo ogni modifica al design

1. Svuota la cache di PrestaShop (template e file combinati) da Parametri avanzati → Prestazioni.
2. Se hai una cache di pagina o una CDN, svuotale.
3. Verifica che gli indirizzi dei CSS e JS che hai cambiato abbiano un nuovo marcatore di versione (nel codice sorgente della pagina).
4. Prova in un browser con cui avevi già visitato il negozio prima della modifica, senza svuotarne la cache: così lo vede un cliente reale.
5. Prova su mobile, che di solito ha copie più vecchie.

Come risolverlo in PrestaShop

Rekire Cache Buster aggiunge un marcatore di versione (?v=) a ogni file CSS e JS locale del front office, così il browser scarica quello nuovo non appena cambia. Ha due modalità: automatica, con la versione ricavata dalla data di modifica di ogni file, o manuale, con un token unico che cambi tu. Puoi attivarlo per i CSS, per i JS o per entrambi, e il pulsante Forza ricaricamento ora obbliga tutti i visitatori a scaricare di nuovo CSS e JS dopo un rilascio, che è ciò che ti serve se il tuo modo di caricare i file ne conserva le date. Non tocca i file serviti da un altro dominio o da una CDN, né quelli che hanno già una propria versione, e non combina né comprime nulla, quindi non altera l'ordine di caricamento. Compatibile con PrestaShop 1.7, 8 e 9.