Che cos'è la cache del browser e come posso attivarla per il mio sito web?

Introduzione

Per capire come Sfruttare la cache del browser funziona, è necessario conoscere il funzionamento del server web e del browser. Esaminiamo brevemente questo processo.

Per accedere a un sito web, è necessario un browser web come Google Chrome o Mozilla Firefox. Un sito web è solitamente ospitato su un server web che invia il contenuto al browser dell'utente ogni volta che visita il sito. Un sito web viene creato con diversi tipi di file, sia dinamici come i file PHP che statici come HTML, JS, CSS e immagini. Se le pagine di un sito web sono piccole (pochi KB), si caricano più velocemente, poiché il server web invia solo una piccola parte del contenuto al browser. Tuttavia, se la pagina è più grande (3-4 MB o più) e contiene molte risorse statiche, il caricamento sarà più lungo.

Sfruttare la cache del browser

Per abbreviare il tempo di caricamento delle pagine estese, il Sfruttare la cache del browser che consente ai browser di scaricare localmente alcune risorse statiche dei siti web visitati. Questo processo mira a ridurre il numero di richieste al server web quando visita un sito web, riducendo così la quantità di dati che il browser deve scaricare. Qual è il risultato? Il sito web si carica più velocemente.

Il server web stesso - in questo caso Apache e il suo mod_expires - abilita l'uso della cache del browser di leva. Per abilitare questa funzione, deve modificare le intestazioni HTTP e impostare i tempi di scadenza per i tipi di file che desidera utilizzare. Ciò avviene aggiungendo delle regole al suo file .htaccess.

Crei questo file nella directory principale del dominio per il quale desidera utilizzare Leverage Browser Cache, oppure lo apra per modificarlo se esiste già. Copi le righe seguenti e le incolli nel file .htaccess:

# Abilitato Scadenze Intestazioni

ScadenzaAttiva su

# Imposta scadenza predefinita
ExpiresDefault "accesso più 1 anno".

# Imposta l'intestazione Expires per la cache.
ExpiresByType text/cache-manifest "accesso più 0 secondi".

# Il suo documento html
ExpiresByType text/html "accesso più 0 secondi".

# Dati
ExpiresByType text/xml "accesso più 0 secondi".
ExpiresByType application/xml "accesso più 0 secondi".
ExpiresByType application/json "accesso più 0 secondi".

# Feed RSS
ExpiresByType application/rss+xml "accesso più 1 ora".
ExpiresByType application/atom+xml "accesso più 1 ora".

# Favicon
ExpiresByType image/x-icon "accesso più 1 settimana".

# File multimediali - immagini, audio, video
ExpiresByType image/gif "accesso più 1 anno".
ExpiresByType image/png "accesso più 1 anno".
ScadeByType image/jpeg "accesso più 1 anno".
ExpiresByType video/ogg "accesso più 1 anno".
ExpiresByType audio/ogg "accesso più 1 anno".
ExpiresByType audio/mp3 "accesso più 1 anno".
ScadeByType video/mp4 "accesso più 1 anno".
ExpiresByType video/webm "accesso più 1 anno".

# File HTC
ExpiresByType text/x-component "accesso più 1 anno".

# Vari font web
ExpiresByType application/x-font-ttf "accesso più 1 mese".
ExpiresByType font/opentype "accesso più 1 mese".
ExpiresByType application/x-font-woff "accesso più 1 mese".
ExpiresByType application/x-font-woff2 "accesso più 1 mese".
ExpiresByType image/svg+xml "accesso più 1 mese".
ExpiresByType application/vnd.ms-fontobject "accesso più 1 mese".

# CSS e JavaScript
ExpiresByType text/css "accesso più 1 anno".
ExpiresByType application/javascript "accesso più 1 anno".

Salvi il file e voilà! Ora ha implementato la cache del browser Leverage per il suo sito web.