Htaccess cache – ottimizza il sito in due minuti con il leverage browser caching

pillole di SEO di raoul gargiulo - blog.raoulgargiulo.it

Per poterci mostrare una pagina web il nostro browser deve per forza scaricare una serie di elementi come: CSS (fogli di stile), immagini, javascript e tanto altro per poi conservare il tutto nella cache del browser erroneamente chiamata htaccess cache.

A volte queste risorse sono davvero tante ed il nostro browser si ritrova a dover scaricare una marea di file, il risultato è un caricamento molto lento dell pagina web.

Ci sono molti modi per velocizzare il caricamento di una pagina web ed insieme migliorano l’esperienza utente, uno di questi consiste nell’abilitare la cache del browser attraverso l’inserimento di regole nel file .htaccess.

Per questo molti la chiamano erroneamente htaccess cache, nel nostro caso è più corretto dire Leverage Browser Caching.

Abilitare la cache del browser migliora quindi l’esperienza utente rendendo la navigazione più veloce  e piacevole.

. Cos’è il leverage browser caching e la web cache

Il browser caching avviene quando visitiamo una pagina web ed il browser conserva sul computer tutti o alcuni dei file che compongono il sito web per un tempo determinato.
Il “leverage” browser caching significa che un webmaster (uno a caso) ha dato istruzioni particolari su come e per quanto tempo salvare un determinato tipo di questi file.

La web cache quindi memorizza su hard disk gli elementi dei siti che visitiamo rendendo più veloce la nostra navigazione e rendendo meno gravoso il lavoro dei server dovendo inviare meno contenuti.

. Come funziona la cache del browser (o web cache)?

Tutti i browser hanno la cosiddetta cache, ovvero riservano una parte dell’hard disk (memoria fisica) del computer per memorizzare alcuni file necessari alla navigazione.
Loghi, immagini, codici, cookies ed altro sono perciò conservati sul computer nella web cache, è fisiologico… per visualizzare una pagina web si devono per forza di cosa “scaricare” un certo quantitativo di elementi.

Adesso viene il bello, il webmaster (o altra persona con abbastanza conoscenze tecniche e superpoteri) è in grado di dire al vostro browser quali elementi conservare sul vostro computer e per quanto tempo.

Come dci? perchè fare una cosa del genere? beh, per tantissime ragioni.

Ecco due semplici esempi:

  1. Velocità di visualizzazione della pagina web: In tutto il nostro sito ci sono degli elementi che si ripetono sempre (logo, alcuni javascript, ecc)  e che non è necessario riscaricare ogni volta soprattutto perchè resteranno gli stessi per tanto tempo;
  2. Cookies: i nostri amati cookies usati per millemila ragioni dal marketing all’usabilità sono anch’essi conservati nella cache del browser. E’ grazie a loro se il nostro negozio preferito si ricorda di noi e di quello che abbiamo nel carrello anche se non ci siamo registrati al sito.

. Verifica se è attivo sul sito in modo facile e veloce

Prima di modificare file necessari alla sopravvivenza del sito è bene verificare se il leverage browser caching è già abilitato.
Possiamo verificarlo approfittando degli innumerevoli servizi web gratuiti disponibili in rete, come ad esempio GTmetrix, famosissimo tool gratuito per testare l’efficienza di un sito. Basta inserire l’indirizzo da analizzare ed attendere il risultato.

Come è possibile vedere dal risultato non si è raggiunto il 100%, questo è dovuto al fatto che il caching browser non può avvenire su elementi presenti sul nostro sito ma esterni ad esso. Per esempio sui codici di Tag manager, Analytics, il pixel di facebook e così via.

. Come abilitare il leverage browser caching (aka htaccess cache) sul sito

Adesso che abbiamo capito che la cache del browser è cosa buona e giusta vediamo come abilitarlo nel nostro amato file .htaccess.
Per chi non lo sapesse il file htaccess è presente nella root (cartella principale) del nostro sito, è un file nascosto e può anche essere assente.
Inserendo delle regole all’interno di questo file possiamo istruire il server sul quale risiede il nostro sito web su come comportarsi in certe situazioni o con certi elementi.

Se accedendo via FTP alla cartella del nostro non dovessimo trovare il file htaccess possiamo anche crearlo noi con un semplice notepad di Windows ma stando attenti a salvarlo con una codifica UTF-8, inserire come nome .htaccess (il punto davanti è necessario), salvarlo come “tutti i file” e dopo aver incollato dentro le regole giuste caricarlo sul server.

htaccess -blo.raoulgargiulo.it

. Le regole da inserire nel file Htaccess per attivare il caching del browser

Adesso che abbiamo creato/trovato ul file htaccess possiamo procedere alla sua modifica incollando al suo interno le seguenti regole:

# BEGIN Leverage browser caching
<IfModule mod_expires.c>
ExpiresActive On

# Images
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType image/webp "access plus 1 year"
ExpiresByType image/svg+xml "access plus 1 year"
ExpiresByType image/x-icon "access plus 1 year"

# Video
ExpiresByType video/mp4 "access plus 1 year"
ExpiresByType video/mpeg "access plus 1 year"

# CSS, JavaScript
ExpiresByType text/css "access plus 1 month"
ExpiresByType text/javascript "access plus 1 month"
ExpiresByType application/javascript "access plus 1 month"

# Others
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
</IfModule>
# END Leverage browser caching

Le frasi precedute dal cancelletto # sono dei commenti, il resto sono le regole necessarie ad istruire il server su come comportarsi con alcuni tipi di file.

Adesso possiamo salvare e chiudere il file con le regole per abilitare l’htaccess cache e verificare che sia tutto ok con GTmetrix.

Nel file Htaccess possiamo inserire altre regole come quelle relative alla compressione Gzip per la quale ho già redatto una guida e che miglioreranno ulteriormente la navigabilità ed usabilità del sito.

Appassionato di informatica da sempre, amante della natura, dello sport, delle arti e di un altro fantastiliardo di cose. Definito dalla multipotenzialità e affamato di conoscenza. A parte questo... sono una persona normale.

Lascia un commento