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.
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
- Assicurarsi che
mod_rewritesia 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.
. - 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.