Skip to content

Come aggiungere Leverage browser caching for CDN in .htaccess?

La guida o codice che troverai in questo post è la soluzione più semplice e valida che abbiamo trovato a questa domanda o dilemma.

Soluzione:

Se si desidera utilizzare la cache del browser Leverage per CDN, è bene memorizzare i file nella cache aggiungendo alcune intestazioni di cache come Cache-Control, Expires e Last-Modified.

Sfruttare la cache del browser usando Mod_Headers

Se siete su un server condiviso e il vostro host non abilita Mod_Expires, potete comunque sfruttare la cache del browser usando Mod_headers, che sarà disponibile.

# Leverage browser caching using mod_headers #

    
        Header set Expires "Wed, 15 Apr 2020 20:00:00 GMT"
        Header set Cache-Control "public"
    

# End of Leverage browser caching using mod_headers #

esempio di seguito per i test:

# 1 YEAR

Header set Cache-Control "max-age=31536000, public"


# 1 WEEK

Header set Cache-Control "max-age=604800, public"


# 3 HOUR

Header set Cache-Control "max-age=10800"


# NEVER CACHE - notice the extra directives

Header set Cache-Control "max-age=0, private, no-store, no-cache, must-revalidate"

Testare le intestazioni

È possibile verificare se l'intestazione Cache-Control: max-age è presente nei file eseguendo un comando "curl" come:

curl -I http://foo.bar.netdna-cdn.com/file.ext

HTTP/1.1 200 OK
Date: Fri, 16 Sep 2014 14:12:20 GMT
Content-Type: text/css
Connection: keep-alive
Cache-Control: max-age=604800, public  ← 1 Week caching time 
Expires: Thu, 21 May 2015 20:00:00 GMT
Vary: Accept-Encoding
Last-Modified: Thu, 24 Jan 2013 20:00:00 GMT
GMT; path=/; domain=.domain.com
Server: NetDNA-cache/2.2
X-Cache: HIT

si è utilizzato il codice seguente:

La cache del browser usando Mod_Expires
Il modo più comune per sfruttare la cache del browser è usare mod_expires. Il codice seguente può essere aggiunto al vostro .htaccess e abiliterà automaticamente la cache del browser per tutti gli utenti.

# Leverage browser caching using mod_expires #

    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"

# End of Leverage browser caching using mod_expires #

Che cos'è la cache del browser?

La cache del browser è il processo di memorizzazione dei file richiesti in precedenza nella cache locale del browser per ridurre i tempi di caricamento. Una volta che un file è stato memorizzato localmente, è necessario inviare meno richieste al server e scaricare meno dati.

enter image description here

Ci sono alcuni componenti che devono essere abilitati per poter sfruttare correttamente la cache del browser. Ad esempio, è necessario assicurarsi di specificare un validatore di cache per aiutare il browser a determinare se il file può ancora essere recuperato dalla cache locale o se è necessario inviare una richiesta al server. Inoltre, è necessario impostare correttamente le intestazioni Expires o Cache-Control per le risorse. L'uso di entrambi sarebbe ridondante. Inoltre, Gtmetrix preferisce Expires a Cache-Control, perché è più ampiamente supportato. Pertanto, questo articolo si concentrerà sull'uso delle intestazioni Expires per dimostrare come sfruttare la cache del browser.

Cache-Control
Cache-Control ci permette di avere un maggiore controllo sulla cache del browser e molti lo trovano più facile da usare una volta impostato.

# 1 Year for most static assets

Header set Cache-Control "max-age=31536000, public"

Compressione Gzip (utile per Magento)


    mod_gzip_on Yes
    mod_gzip_dechunk Yes
    mod_gzip_item_include file .(html?|txt|css|js|php|pl|asp|html)$
    mod_gzip_item_include handler ^cgi-script$
    mod_gzip_item_include mime ^text/.*
    mod_gzip_item_include mime ^application/x-javascript.*
    mod_gzip_item_exclude mime ^image/.*
    mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*



    AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript

A seconda dei file del vostro sito web potete impostare tempi di scadenza diversi.
Se alcuni tipi di file vengono aggiornati più frequentemente, è possibile impostare un tempo di scadenza anticipato (ad esempio, i file CSS).

Aprite il vostro file .htaccess. (attenzione: fate una copia del vostro file .htaccess originale, nel caso in cui facciate accidentalmente un errore e dobbiate tornare indietro).

Ora è il momento di abilitare il modulo Expires headers in Apache (impostate il parametro 'ExpiresActive' su "On"), quindi aggiungetelo al vostro file .htaccess:



# Enable expirations
ExpiresActive On 


Potrebbe essere utile aggiungere un "Direttiva predefinita" per una data di scadenza predefinita, quindi queste sono le 2 righe da aggiungere ora:



# Enable expirations
ExpiresActive On 

# Default directive
ExpiresDefault "access plus 1 month"


Questa è la base. Ora aggiungete tutte le righe per ogni tipo di file (quelle create in precedenza per il file favicon, immagini, CSS e Javascript). Si otterrà un frammento di codice che assomiglia a questo:



# Enable expirations
ExpiresActive On

# Default directive
ExpiresDefault "access plus 1 month"

# My favicon
ExpiresByType image/x-icon "access plus 1 year”

# Images
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"

# CSS
ExpiresByType text/css "access 1 month”

# Javascript
ExpiresByType application/javascript "access plus 1 year"


Ora eseguite un altro test con GTmetrix e confrontate i risultati. Questo è il risultato per il mio sito di prova, dopo aver implementato le intestazioni Expires:

Raccomandazioni

  • Essere aggressivi con la cache per tutte le risorse statiche
  • Scadenza minima di un mese (consigliato: accesso più 1 anno)
  • Non impostate la cache con più di un anno di anticipo!

Caching del browser con il plugin di WordPress

W3 Total Cache:
Uno dei migliori plugin per la cache con molte caratteristiche come il caching, l'integrazione con CDN (come MaxCDN) che accelerano le prestazioni del vostro sito web.

Nota

  1. Assicurarsi che mod_rewrite sia abilitato sul server web Apache,
    in caso contrario, contattare il team tecnico del server web per abilitarlo, poiché il modulo di riscrittura è necessario per completare l'azione di caching.
    .
  2. Attenzione! Se si imposta una data di scadenza lontana nel tempo per qualcosa e poi si aggiorna uno di questi file, è necessario cambiare il nome del file
    affinché il browser lo recuperi.
    Esempio Se si imposta il javascript a 1 anno e si aggiorna uno dei file javascript, è necessario rinominare il file stesso.
    Un buon modo per farlo è il versioning, cioè myfile_v1.2.js, ma il modo più semplice è quello di fare attenzione alla
    modo più semplice è quello di fare attenzione alle intestazioni di Expires (impostare
    a 10 anni non è mai una buona opzione, IMO).

Avete notato qualche miglioramento nel vostro sito? Quanto detto sopra si è occupato di tutti i file elencati in "Sfruttare la cache del browser" e "Aggiungere intestazioni Expires"? Fatemi sapere nei commenti qui sotto.

Probabilmente, non è la migliore idea mettere in cache i file della CDN sul proprio host. Se si può fare leva sull'host della CDN, è meglio mettere i file in cache lì, aggiungendo alcune intestazioni di cache, come ad esempio Cache-Control, Scadenza, Ultima modifica e così via.

È meglio perché si aggiungono solo intestazioni di cache in un unico posto, il vostro CDN, invece di aggiungere regole di cache a ogni sito che utilizza il vostro CDN.

Ti mostriamo commenti e valutazioni

Ci piacerebbe se potessi condividere questa divisione se ti fosse utile.



Utilizzate il nostro motore di ricerca

Ricerca
Generic filters

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.