Se ti sei mai chiesto come migliorare il punteggio del tuo sito su Google PageSpeed Insights, uno dei fattori più importanti è la gestione della cache del browser. Capire come funziona e come impostarla correttamente può fare una differenza enorme sulla velocità di caricamento e sull'esperienza utente.
 |
| Cahce |
In questo articolo, ti spiegheremo cos'è la cache del browser, come impostarla con i giusti tempi (TTL - Time to Live) e come evitare errori comuni per massimizzare le prestazioni del tuo sito.
Cosa è la cache del Browser e perché è importante
La cache del browser è come una memoria a breve termine per il tuo sito web. Quando un utente visita la tua pagina per la prima volta, il browser scarica tutte le risorse necessarie (immagini, file CSS, JavaScript, font, ecc.). Con la cache, il tuo server può dire al browser: "Ehi, non c'è bisogno di scaricare di nuovo questi file per un po' di tempo, li ho salvati qui".
Questo ha due enormi vantaggi e sono:
- la velocità: Le visite successive al tuo sito saranno molto più veloci perché il browser caricherà le risorse dalla sua memoria locale anziché scaricarle di nuovo da zero.
- Esperienza Utente: Un sito più veloce significa un'esperienza utente migliore e una maggiore probabilità che i visitatori rimangano sulla tua pagina.
Gestire il Time To Live per ogni risorsa
La chiave per una cache efficace è impostare la durata di vita (TTL) corretta per ogni tipo di risorsa. Non esiste un tempo universale che vada bene per tutto ogni tipo di file va gestito accuratamente.
Risorse Statiche (Immagini, CSS, JavaScript, Font)
Queste sono le risorse che cambiano raramente. L'obiettivo è istruire il browser a conservarle per il tempo più lungo possibile.
Il tempo consigliato va da 6 mesi ad 1 anno perché non c'è motivo di scaricare un logo o un file CSS che non è cambiato.
Impostare una cache lunga riduce le richieste al server e migliora drasticamente la velocità di caricamento per i visitatori abituali. Per farlo si usano le direttive HTTP Cache-Control con max-age per specificare la durata in secondi. Ad esempio, per impostare 6 mesi, il valore è 15.552.000 secondi.
Cachare pagine HTML
Le pagine HTML spesso contengono contenuto dinamico che si aggiorna regolarmente. Il tempo consigliato va da pochi minuti ad 1 ora. Il motivo è semplice perché: non vuoi che i tuoi utenti vedano una versione obsoleta della tua pagina se hai appena pubblicato un nuovo post o aggiornato un'offerta.
Una cache più breve garantisce che il browser controlli più frequentemente la presenza di novità ma nulla ti vieta di impostare una tempo più lungo dipende dal sito e con quanta frequenza si pubblica.
Anche qui si usa la diretiva Cache-Control ma con un max-age più breve, ad esempio 3600 secondi per un'ora.
Configurare le regole di caching del Server Apache
Se utilizzi un server Apache, la configurazione più comune avviene tramite il file .htaccess nella directory principale del tuo sito. Prima di fare qualsiasi modifica fai una copia di Backup del file!
Ecco lo script corretto da usare per impostare la cache a 6 mesi per le risorse statiche per un server Apache:
<IfModule mod_headers.c>
# Imposta la cache per 6 mesi per i tipi di file specificati
<FilesMatch "\.(html|htm|css|js|jpe?g|png)$">
Header set Cache-Control "max-age=15552000, public"
</FilesMatch>
</IfModule>
Spiegazione:
- Cache-Control: max-age=15552000: Imposta la durata della cache a 6 mesi (15.552.000 secondi)
- public: Dichiara che la risorsa può essere cachata sia dal browser che da server intermedi (come i CDN), ottimizzando ulteriormente la distribuzione del contenuto.
Configurazione per Server NGINX
Le regole per un server NGINX sono differenti da quelle di Apache e vanno inserite nel file .conf di seguito trovi la versione equipollente del codice ma per sicurezza fai prima una copia del file .conf:
server {
listen 80;
server_name your_domain.com; # Sostituisci con il tuo dominio
root /path/to/your/website; # Sostituisci con il percorso della tua directory root
index index.html index.htm;
# Caching per file statici (HTML, CSS, JS, Immagini)
location ~* \.(html|htm|css|js|jpe?g|png)$ {
expires 6M; # Imposta la cache per 6 mesi (M = Months)
add_header Cache-Control "public"; # Aggiunge esplicitamente l'header pubblico
try_files $uri $uri/ =404; # Assicura che i file esistano
}
}
Errori da evitare!
Quando si applicano regole personalizzate (che non sono previste di default) bisogna stare attenti alle conflittualità delle regole! Quindi la prima cosa da fare è una copia di sicurezza del file .htaccess o .conf.
Se hai già delle vecchie regole che utilizzano ExpiresByType o ExpiresDefault in Apache o expires, location e map di NGINX, è fondamentale rimuoverle prima di inserire il nuovo script.
Mantenere regole doppie o obsolete può creare conflitti e portare a comportamenti imprevedibili, invalidando i tuoi sforzi di ottimizzazione.
Conclusioni
In sintesi, la corretta gestione della cache del browser non "ripulisce" i file, ma istruisce il browser su come e per quanto tempo conservarli. Seguendo queste best practice e utilizzando lo script corretto, puoi migliorare significativamente il punteggio del tuo sito su Google PageSpeed Insights e offrire un'esperienza di navigazione più veloce e piacevole ai tuoi utenti.
Commenti
Posta un commento
Commenta