Condividi:

Page Speed: sfrutta la memorizzazione nella cache del browser  

  

0

Panoramica

I tempi di caricamento della pagina possono essere notevolmente migliorati chiedendo ai visitatori di salvare e riutilizzare i file inclusi nel tuo sito web.

  • Riduce i tempi di caricamento della pagina per i visitatori abituali
  • Particolarmente efficace sui siti web in cui gli utenti visitano regolarmente le stesse aree del sito
  • Rapporto costi-benefici: alto
  • Accesso necessario

Linee guida generali per l'impostazione delle scadenze:

  • Contenuto veramente statico (stili CSS globali, loghi, ecc.) - Accesso più 1 anno
  • Tutto il resto - accesso più 1 settimana

 

Cos'è il caching del browser?

Ogni volta che un browser carica una pagina web, deve scaricare tutti i file web per visualizzare correttamente la pagina. Ciò include tutto il codice HTML, CSS, JavaScript e le immagini.

Alcune pagine potrebbero essere costituite da pochi file ed essere di piccole dimensioni, forse un paio di kilobyte. Per altri, tuttavia, potrebbero esserci molti file e questi possono sommarsi per diventare di grandi dimensioni Twitter.com, ad esempio, è circa di 3MB.

 

La questione è duplice.

  1. Questi file di grandi dimensioni richiedono più tempo per essere caricati e possono essere particolarmente dolorosi se si utilizza una connessione Internet lenta (o un dispositivo mobile).
  2. Ogni file effettua una richiesta separata al server. Più richieste riceve il tuo server contemporaneamente, più lavoro deve fare, riducendo ulteriormente la velocità della tua pagina.

La memorizzazione nella cache del browser può essere utile memorizzando alcuni di questi file localmente nel browser dell'utente. La loro prima visita al tuo sito richiederà lo stesso tempo per caricarsi, tuttavia quando l'utente rivisita il tuo sito web, aggiorna la pagina o addirittura si sposta in una pagina diversa del tuo sito, ha già alcuni dei file di cui ha bisogno localmente.

Ciò significa che la quantità di dati che il browser dell'utente deve scaricare è inferiore e devono essere effettuate meno richieste al tuo server. Il risultato? Tempi di caricamento della pagina ridotti.

 

Come funziona?

La memorizzazione nella cache del browser funziona contrassegnando determinate pagine o parti di pagine come necessarie per essere aggiornate a intervalli diversi. Il tuo logo sul tuo sito web, ad esempio, è improbabile che cambi di giorno in giorno. Memorizzando questa immagine del logo nella cache, possiamo dire al browser dell'utente di scaricare questa immagine solo una volta alla settimana. Ogni visita che l'utente effettua entro una settimana non richiederebbe un altro download dell'immagine del logo.

Il server web che dice al browser di memorizzare questi file e di non scaricarli quando torni fa risparmiare tempo ai tuoi utenti e la larghezza di banda del tuo server web.

 

Perché è importante?

Il motivo principale per cui il caching del browser è importante è perché riduce il carico sul tuo server web, il che alla fine riduce il tempo di caricamento per i tuoi utenti.

 

Come sfruttare la cache del browser

Per abilitare la memorizzazione nella cache del browser è necessario modificare le intestazioni HTTP per impostare i tempi di scadenza per determinati tipi di file.

 

Configurazione di Apache per servire le intestazioni appropriate

Trova il tuo file .htaccess nella root del tuo dominio. Questo file è un file nascosto ma dovrebbe essere visualizzato nei client FTP come FileZilla o CORE. Puoi modificare il file .htaccess con il blocco note o qualsiasi ptrogramma di editor di testo.

In questo file imposteremo i nostri parametri di cache per dire al browser quali tipi di file memorizzare nella cache.

 

 

<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/webm "access plus 1 year"
  ExpiresByType video/mp4 "access plus 1 year"
  ExpiresByType video/mpeg "access plus 1 year"

  # Fonts
  ExpiresByType font/ttf "access plus 1 year"
  ExpiresByType font/otf "access plus 1 year"
  ExpiresByType font/woff "access plus 1 year"
  ExpiresByType font/woff2 "access plus 1 year"
  ExpiresByType application/font-woff "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 image/vnd.microsoft.icon "access plus 1 year"
</IfModule>

 

A seconda dei file del tuo sito web puoi impostare diversi tempi di scadenza. Se alcuni tipi di file vengono aggiornati più frequentemente, dovresti impostare una scadenza precedente su di essi (ad es. File css)

Quando hai finito, salva il file così com'è e non come file .txt.

Se utilizzi qualsiasi forma di CMS, potrebbero essere disponibili estensioni della cache o plug-in.

Raccomandazioni

  • Sii aggressivo con il caching per tutte le risorse statiche
  • Scadenza minima di un mese (consigliato: accesso più 1 anno)
  • Non impostare la memorizzazione nella cache con più di un anno di anticipo!

Stai attento

Devi fare attenzione quando abiliti la memorizzazione nella cache del browser poiché se imposti i parametri troppo a lungo su determinati file, gli utenti potrebbero non ricevere la nuova versione del tuo sito web dopo gli aggiornamenti.

Ciò è particolarmente rilevante se stai lavorando con un designer per apportare modifiche al tuo sito Web: potrebbero aver apportato le modifiche ma non puoi ancora vederle perché gli elementi che sono stati modificati sono memorizzati nella cache del tuo browser

 

PageSpeed ​​consiglia:

Imposta le intestazioni di memorizzazione nella cache in modo aggressivo per tutte le risorse statiche

Per tutte le risorse memorizzabili nella cache, consigliamo le seguenti impostazioni:

  • Impostare Cache-Control: max-ageExpiressu un minimo di un mese, e preferibilmente fino a un anno, in futuro. Non impostarlo su più di un anno in futuro, poiché ciò viola le linee guida RFC.
  • Imposta la Last-Modifieddata sull'ultima volta in cui la risorsa è stata modificata. Se la Last-Modifieddata è sufficientemente lontana nel passato, è probabile che il browser non la recuperi.
Utilizza il fingerprinting per abilitare dinamicamente la memorizzazione nella cache

Per le risorse che cambiano occasionalmente, puoi fare in modo che il browser memorizzi la risorsa nella cache fino a quando non cambia sul server, a quel punto il server comunica al browser che è disponibile una nuova versione. Puoi farlo incorporando un'impronta digitale della risorsa nel suo URL (cioè il percorso del file).

Impostare correttamente l'intestazione Vary per Internet Explorer

Internet Explorer non memorizza nella cache le risorse il cui Varycolpo di testa contiene i campi che non sono Accept-EncodingUser-AgentHostPer garantire che queste risorse vengano memorizzate nella cache da IE, assicurati di eliminare tutti gli altri campi dall'intestazione Vary.

 

fonte: https://gtmetrix.com

Parlaci della tua Idea