Leverage browser caching sfrutta il caching del browser per migliorare le prestazioni del tuo sito

Uno dei metodi più semplici per rendere più veloce il tuo sito web è il leverage browser caching, una tecnica che richiede uno sforzo minimo a fronte di ottimi risultati.

Dopo aver effettuato il test velocità sito web, uno dei suggerimenti con priorità più alta consigliati per velocizzare il caricamento del tuo sito è proprio il "leverage browser caching", che letteralmente vuol dire sfrutta il caching del browser. Ma cosa è esattamente il caching del browser?

Cosa è il caching del browser?

Quando qualcuno visita la pagina di un sito, il browser scarica dal server al computer dell'utente una serie di risorse, queste includono: il codice HTML, i fogli di stile, gli script JS, le immagini e qualsiasi altra risorsa necessaria a visualizzare correttamente quella pagina.

Ora, invece di scaricare tutto ogni volta che lo stesso utente visita quella pagina, il browser utilizza una memoria temporanea chiamata Web Cache. Questa si comporta come la cache di un computer, e fa in modo che quando la pagina viene visitata nuovamente dallo stesso utente, il browser è in grado di caricare le risorse statiche di quella pagina recuperandole dalla cache, senza doverle scaricare nuovamente.

Questo sistema apporta diversi miglioramenti tra cui:

• Riduzione larghezza di banda
• Riduzione carico del server
• Aumento prestazioni sito

Durante il test con GTMetrix ad esempio potresti imbatterti in un avviso del genere

Per risolvere il leverage browser caching, e aumentare quindi il punteggio finale, hai bisogno di editare Il file htaccess del tuo sito internet aggiungendo alcune istruzioni specifiche. Vediamo come si fa?

Come si sfrutta il caching del browser

Quando implementiamo il caching del browser stiamo semplicemente dicendo al browser di estendere la data di scadenza delle risorse che vengono scaricate dai visitatori. Per realizzare questo è sufficiente aggiungere l'intestazione Cache-Control al file htaccess. Questa dichiara il periodo durante il quale una determinata risorsa deve rimanere in cache.

Per farlo abbiamo a dispozione due moduli di Apache: mod_headers e mod_expires. Vediamo prima come attivare la cache del browser col modulo mod_headers.

Modifica htaccess con mod_headers

Con il tuo editor di testo preferito apri il file htaccess, che si trova nella directory principale del tuo hosting, e aggiungi quanto segue in fondo al file

<ifModule mod_header.c>
    <filesMatch ".(gif|png|jpg|jpeg)$">
        Header set Cache-Control "max-age=2592000"
    </filesMatch>
</ifModule>

Con queste istruzioni stiamo impostando le immagini nella cache browser con un periodo di 1 mese. Analizziamole riga per riga:

• ifModule mod_header.c verifica che il modulo mod_headers di Apache sia attivo
• FilesMatch limita l'applicazione della direttiva che segue solo a determinati tipi di file. Nel nostro caso stiamo dicendo che solamente i file con estensione .gif, .png. jpg. jpeg devono essere salvati nella cache del browser.
• Header set Cache-Control invia l'intestazione Cache-Control al browser
• max-age=2592000 indica il periodo massimo di cache in secondi (nel nostro caso 1 mese)

Ciò significa che se il visitatore visita nuovamente la pagina entro un mese, non è necessario scaricare nuovamente le risorse immagini. Se apporti raramente modifiche alle immagini del tuo sito web puoi impostare il valore di max-age ad un anno con il valore max-age=31536000.

N.B Se vogliamo aggiungere ulteriori estensioni dopo la direttiva FilesMatch queste vanno separate con il carattere | (la pipe)

Per approfondire leggi Apache mod_headers

Modifica htaccess con mod_expires

In alternativa possiamo usare il modulo mod_expires per estendere la data di scadenza. In questo caso le istruzioni da aggiungere in fondo al file htaccess sono le seguenti:

   ExpiresActive On
   ExpiresByType image/gif "access 3600 seconds"
   ExpiresByType image/png "access 1 month"
   ExpiresByType image/jpg "access 1 year"
   ExpiresByType image/jpeg "access 3 months"
   ExpiresDefault "access 12 minutes"

La sintassi è leggermente diversa, in quanto è possibile impostare il periodo di scadenza in minuti, secondi, mesi, anni utilizzando rispettivamente le parole minutes, seconds, month, year

Per approfondire leggi Apache mod_expires

N.B le istruzioni contenute in questa pagina sono valide solo su server Apache. Se il tuo sito utilizza Nginx è richiesta una sintassi diversa.

Benefici leverage browser caching

Ricapitoliamo quali sono i vantaggi quando si sfrutta il caching del browser:

Conclusioni

Abbiamo visto come sfruttare il caching del browser sia un'operazione piuttosto semplice. Dopo averlo implementato dovresti ottenere un punteggio più alto dallo strumento di test utilizzato per misurare le prestazioni del tuo sito web.

Se così non fosse o se hai difficoltà, o ritieni che questa procedura non sia adatta alle tue competenze puoi contattarmi tramite il modulo contatti per un'analisi gratuita del tuo sito.