Luigi Sabbetti

Il mondo del web a 360 gradi

errore leverage browser caching

Errore Leverage browser caching


di // Pubblicato il: 18 aprile 2018

Se sei arrivato qui è perché, molto probabilmente, hai testato il tuo sito web con GTmetrix ottenendo come errore Leverage browser caching

Non preoccuparti, si tratta di un errore davvero molto frequente e non sei di certo il primo ad imbatterti in questa tipologia di problema. Prosegui la lettura e scoprirai come fare per venirne a capo nel migliore dei modi.

Cos’è il Leverage browser caching

I tempi di caricamento di una pagina web possono essere ridotti in modo significativo se chiediamo ai nostri visitatori di salvare e riutilizzare alcune risorse del nostro sito quando torneranno a farci visita.

Cosi facendo andremo a:

  • Ridurre il tempo di caricamento del sito per i visitatori abituali
  • Ottimizzeremo le risorse andando così a risparmiare sui costi di gestione e sulla larghezza di banda

Quando parlo di files riutilizzabili mi riferisco soprattutto a css globali, loghi, immagini ed elementi che, sostanzialmente, cambieranno difficilmente nel corso del tempo.

In linea di massima, dunque, dovremmo fare in modo che i contenuti cosiddetti immutabili come css globali e loghi rimangano disponibili per più di un anno, mentre tutto il resto per più di una settimana.

Per fare questo, in soldoni, dovremo settare un tempo di expires.

Ogni volta che il browser carica una pagina web è costretto a scaricare tutti i files per poterla poi stampare a video. Questo include tutto l’html, i css, i javascript e le immagini.
Ovviamente alcune pagine del nostro sito possono essere composte da pochissimi files, nell’ordine di peso dei kilobytes. Altre pagine, invece, possono essere davvero molto pesanti ed è in questi casi che conviene fare in modo che gli utenti scarichino una sola volta, al primo accesso, i nostri contenuti.

Se non effettuiamo correttamente questa operazione, infatti, rischiamo di andare incontro a due problemi:

  • I files di grandi dimensioni ci metteranno molto ad essere caricati e questo è decisamente sconveniente per utenti che non posseggono una connessione buona o stanno utilizzando un dispositivo mobile.
  • Ogni file dovrà effettuare una richiesta al server. Il maggior numero di richieste porta ad una mole di lavoro maggiore e questo incide sulle prestazioni del nostro sito.

Con il Browser caching potremo porre fine a questi spiacevoli avvenimenti. Questo significa che la quantità di dati da scaricare sarà inferiore rispetto a prima e, di conseguenza, il nostro sito apparirà ben più veloce.

Come funziona il Browser Caching

Il funzionamento del Browser Caching è molto semplice da capire. Identifica certe pagine, o parti di pagine capendo la frequenza di aggiornamento delle stesse. Per farti un esempio, il logo del tuo sito, non cambierà di certo ogni giorno. E’ un contenuto decisamente statico, quasi immutabile ed è quindi inutile che venga riscaricato ogni volta da un visitatore abituale.

Andando a cachare l’immagine del logo e forzando il tempo di expiring ad una settimana, il browser scaricherà il logo solamente una volta a settimana e non ad ogni accesso effettuato sul sito.

Il motivo principale per il quale il browser caching è importante, dunque, è perché riduce il tempo di caricamento del tuo web server il quale, di conseguenza, riduce il tempo di caricamento per i tuoi visitatori.

Come effettuare il leverage browser caching

Ambiente Linux

Se ti trovi su un server Linux, allora il tuo web server sarà dotato di un file .htaccess
Lo trovi accedendo alla root principale del tuo sito: con filezilla oppure attraverso la gestione files del tuo hosting, sia su plesk che su cpanel.
Se non vedi il file, attiva la visualizzazione per i files nascosti e, se non riesci a modificarlo direttamente, rinominalo in htaccess.txt ed effettua le modifiche necessarie.

Per settare l’expire nell’htaccess ti basta incollare, alla fine del files, queste righe di codice


## EXPIRES CACHING ##

ExpiresActive On
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresDefault "access plus 2 days"

## EXPIRES CACHING ##

Si tratta ovviamente di un contenuto standalone che potrai cambiare in base alle esigenze del tuo sito. Ti consiglio comunque di utilizzare una metodologia aggressiva con il browser caching così da ottimizzare al massimo le performance.

Ambiente Windows

Se il tuo sito è sviluppato con tecnologia .NET e ti trovi in ambiente Windows, allora non troverai il file .htaccess. Al suo posto troverai il file web.config

In questo caso dovrai inserire le seguenti righe di codice nella parte dedicata al system.webServer


cacheControlMode="UseMaxAge" cacheControlMaxAge="30.00:00:00"

Anche il file web.config è situato all’interno della root principale del sito, esattamente come l’.htaccess

Leverage Browser Caching su WordPress

Se non sei in grado di editare i files di configurazione citati finora e stai utilizzando WordPress, puoi sempre ricorrere ad un plugin che farà il lavoro sporco per te.
Il plugin in questione si chiama, ovviamente, Leverage Browser Caching e puoi scaricarlo dalla directory ufficiale dei temi o dal backend del tuo sito WordPress.

Installarlo, ed utilizzarlo, è davvero molto semplice.

Come il nome stesso dice, il plugin ti aiuterà a sfruttare il Browser Caching all’interno del tuo sito WordPress. Così facendo migliorerai le performance su siti com Pingdom, GTmetrix, PageSpeed, Google PageSpeed Insights e YSlow.

Browser caching di Analytics

Come ti dicevo all’inizio della guida, GTmetrix segnala errori sul browser caching anche per files esterni al tuo sito e sui quali, teoricamente, non hai il controllo. E’ questo il caso di analytics e Google Fonts ad esempio.

Se sei un maniaco delle performance, puoi comunque arginare questo problema. Per farlo ti basta scaricare questo piccolo plugin che porta il nome di CAOS (Complete Analytics Optimization Suite). Creato e sviluppato da Daan van den Bergh, il plugin in questione permette di hostare Google Analytics localmente sul tuo sito wordpress. Così facendo potrai avere il pieno controllo sul browser caching e il tempo di expires di questi files.

Se vuoi conoscere altri metodi per velocizzare il tuo sito WordPress allora ti consiglio di dare un occhio alla mia guida definitiva su come velocizzare un sito WordPress. Se utilizzi altre strategie per utilizzare il leverage browser caching, scrivile pure nei commenti.

Ti è piaciuto questo articolo? Votalo!
[voti: 1 - Media voto: 5]

About Author

Mi chiamo Luigi Sabbetti e da circa dieci anni svolgo la professione di Web Designer. Profondamente amante della scrittura, mi piace condividere le mie conoscenze informatiche attraverso il mio sito web. Amo correre, guardare il mare e il buon cibo. Scopri di più nella mia