Spesso è indispensabile evitare che il browser degli utenti che visitano il nostro sito usi una versione vecchia dei fogli di stile CSS o dei file Javascript. Capita, quindi, che le modifiche apportate non vengano poi effettivamente visualizzate o eseguite dai nostri utenti. La cache, però, resta un fattore fondamentale per l’ottimizzazione delle prestazioni di un sito.
Come possiamo evitare la cache del browser?
Spesso lato server la cache viene gestita in modo molto conservativo, con la conseguenza che si tende a forzare troppo la scadenza troppo lunga dei contenuti, e da qui il problema di servire al browser file vecchi.
Supponiamo che la cache del CSS principale del sito abbia una durata di 7 giorni, ma abbiamo appena rilasciato un piccolo aggiornamento. Non potendo dire al browser dei visitatori “Svuota la cache!”, il trucco più semplice è fargli credere che il CSS sia diverso, modificando il nome dei file e quindi l’URL della risorsa chiamata.
https://miosito.it/css/screen.css diventa https://miosito.it/css/screen.css?v2
Cambiando il nome del file, quindi, il browser, scaricherà una nuova copia di screen.css e la metterà in cache, secondo le regole di durata preimpostate dal server. Quindi, se abbiamo intenzione di avere versioni future (ad esempio v3, v4, etc.) dovremmo ripetere l’operazione, cambiando nuovamente il nome del file.
Questo discorso vale per tutti i file statici, come javascript, HTML, file di testo, etc.
Evitare automaticamente il caching
Abbiamo capito, quindi, che basta cambiare il nome del file aggiungendo dei parametri fittizi del tipo screen.css?v2 per forzare il browser a scaricare una nuova versione di screen.css . Come possiamo automatizzare questo processo? Cambiando sistematicamente il nome del file ad ogni aggiornamento.
In questo esempio, screen.css viene parametrato automaticamente con una stringa basata sulla data di modifica del file stesso. La funzione PHP filemtime restituisce l’ultima data di modifica del file in formato Unix timestamp. Ogni volta che pubblicheremo un nuovo screen.css , l’URL sarà diverso, evitando la cache.
<head>
<link type="text/css" href="screen.css?<?php echo filemtime("screen.css"); ?>">
</head>La risorsa effettivamente chiamata sarà di conseguenza simile a questa:
screen.css?1489427332
Lo stesso principio, come detto, vale per tutti i tipi di file statici, come ad esempio script javascript
<script src="script.js?<?php echo filemtime("script.js"); ?>"></script>
