Come servire risorse statiche con un criterio di cache efficiente

Siti web come GTMetrix e Google PageSpeed ​​Insights forniscono suggerimenti su come migliorare le prestazioni del tuo sito web. Se stai leggendo questo, sei almeno consapevole che ogni sito web ha l'opportunità di migliorare le prestazioni, tramite ottimizzazioni manuali o utilizzando plug-in come 10Web Booster.

In entrambi gli strumenti, potresti vedere un suggerimento perservire asset statici con un efficiente criterio di cache .Questo suggerimento è di archiviare i file localmente in modo che le visite ripetute al sito siano più veloci. I passaggi per migliorare questa raccomandazione non migliorano la visita iniziale del sito (ci sono altri miglioramenti per questo). Tuttavia, tutte le visite successive trarranno vantaggio dall'utilizzo della cache del browser.

Va notato che il suggerimento di servire risorse statiche con un criterio di cache efficiente è stato anche definito come sfruttare la cache del browser o la cache del browser in WordPress.

Questo articolo spiega come servire risorse statiche con un criterio di cache efficiente e come un criterio di cache efficiente può migliorare le prestazioni del tuo sito web.

Quando si utilizza GTMetrix, il suggerimento sarà simile all'esempio riportato di seguito nella pagina dei risultati. Evidenzierà i potenziali risparmi derivanti dall'implementazione della memorizzazione nella cache del browser.

In Google PageSpeed ​​Insights, il suggerimento ha un aspetto simile e fornisce informazioni simili.

I suggerimenti sono simili perché GTMetrix e PageSpeed ​​Insights utilizzano lo strumento Lighthouse per il loro framework di analisi delle pagine web. Lighthouse è uno strumento open source volto a migliorare le prestazioni del sito e può essere eseguito in molti formati diversi.

Prendiamoci un momento per un rapido aggiornamento per ricordare a noi stessi come le prestazioni di un sito Web vengono misurate da una raccolta di metriche, la più importante delle quali è il Core Web Vitals.

Ecco un riassunto:

• Largest Contentful Paint ( LCP ): misura il tempo necessario per caricare l'oggetto più grande nel viewport della pagina.
• First Input Delay ( FID ): misura la reattività del sito web. Misura il tempo che intercorre tra il clic dell'utente o l'interazione con il sito e la risposta del sito.
• Cumulative Layout Shift ( CLS ): misura di quanto si sposta inaspettatamente il layout di una pagina.

Un modo per avere un impatto positivo sia su LCP che su FID consiste nel fornire risorse statiche con un criterio di cache efficiente, il che significa far sapere al browser che può archiviare localmente una risorsa per un certo periodo di tempo.

Una politica di cache efficiente significherà tempi di caricamento più rapidi perché non importa quanto sia veloce la velocità di Internet, il caricamento da una cache locale sarà più veloce e farà risparmiare tempo.

Ci sono alcuni componenti, quindi discutiamoli in modo più dettagliato.

Come servire risorse statiche con un criterio di cache efficiente

Per capire come servire le risorse statiche con una politica di cache efficiente, dobbiamo prima comprendere i diversi aspetti, come le risorse statiche, la memorizzazione nella cache e una politica di memorizzazione nella cache. Analizziamoli qui.

Cosa sono le risorse statiche?

Le risorse statiche sono file. Quando si fa riferimento ad asset statici in questo articolo, si fa riferimento a singoli file che non dovrebbero cambiare né presto né spesso.

File come immagini, javascript, file CSS e caratteri sono file che potrebbero essere considerati risorse statiche. Per quanto riguarda WordPress, questi file CSS, javascript, immagine e font di solito fanno parte di un tema, un plug-in o un contenuto utente.

I file e le pagine generati dinamicamente non sono considerati risorse statiche. Un esempio di ciò all'interno di WordPress sarebbero le pagine statiche generate dai plug-in di memorizzazione nella cache. Questo è approfondito nella sezione successiva.

Cos'è la memorizzazione nella cache?

La memorizzazione nella cache è il processo di memorizzazione delle risposte in una cache in modo che la volta successiva che viene posta la stessa domanda, la risposta possa essere restituita più rapidamente.

articoli Correlati

Come cancellare la cache di WordPress in modo sicuro ed efficiente?

Trova il miglior plug-in per la memorizzazione nella cache di WordPress con le nostre prime 5 scelte

Se hai già lavorato con i plug-in di memorizzazione nella cache di WordPress, potresti avere familiarità con la memorizzazione nella cache a pagina intera. La memorizzazione nella cache delle pagine è diversa dalla memorizzazione nella cache delle risorse statiche.

Caching della pagina rispetto al caching degli asset statici

Questo articolo esamina la memorizzazione nella cache di asset statici (file). Questo non deve essere confuso con la memorizzazione nella cache a pagina intera, che memorizza le pagine generate per un uso successivo.

Sia la memorizzazione nella cache delle pagine che la memorizzazione nella cache dei file aiutano a migliorare le prestazioni di un sito. Quando si parla di memorizzazione nella cache delle risorse statiche, si fa riferimento a risorse specifiche come javascript, CSS e file immagine.

La memorizzazione nella cache delle pagine memorizza i risultati di una pagina generata dinamicamente da WordPress e ripropone quella versione per un determinato periodo di tempo. Le cache delle pagine vengono solitamente archiviate su un server o una rete perimetrale come un CDN e le risorse statiche vengono archiviate localmente sul computer dell'utente.

La memorizzazione nella cache relativa al modo in cui serviamo le risorse statiche con una politica di cache efficiente significa dire al browser per quanto tempo può archiviare una risorsa localmente sul browser prima di doverla riscaricare.

Cosa rende un asset statico memorizzabile nella cache?

Secondo GTMetrix, un asset è memorizzabile nella cache se soddisfa i seguenti requisiti:

• È un font, CSS, javascript o file multimediale.
• Restituisce un codice di stato HTTP 200, 203 o 206
• Non ha una politica esplicita di no-cache

Che cos'è un criterio di memorizzazione nella cache?

Abbiamo esaminato cos'è un asset statico e cosa significa memorizzare nella cache un asset.

I termini freschezza e stantio possono essere usati qui per descrivere lo stato di un file memorizzato nella cache. Se un file può essere estratto dalla cache, potrebbe essere chiamato fresh . Quando scade, verrebbe chiamato stale .

Una politica risponderà a domande come per quanto tempo un file è considerato aggiornato e come verificare che un file sia aggiornato. La politica afferma che dobbiamo verificare con il server solo dopo un determinato periodo di tempo o farci sapere di verificare con il server su ogni richiesta, ma riscaricare il file solo se è cambiato.

Qualche altro termine che sarà bene capire prima di procedere ulteriormente.

In che modo UX e SEO sono influenzati da una policy di cache?

L'esperienza utente (UX) e l'ottimizzazione per i motori di ricerca (SEO) sono strettamente legate tra loro. Secondo Google, gli studi dimostrano che gli utenti si preoccupano della reattività del sito, quindi Google classifica le pagine più reattive più in alto.

Se le risorse statiche vengono memorizzate nella cache in modo efficace, il rendering della pagina sarà più rapido a causa del tempo ridotto necessario per caricare queste risorse. La riduzione dei tempi porta a miglioramenti nei principali elementi vitali del web come LCP e FID e, in definitiva, a un posizionamento più elevato nei motori di ricerca.

Puoi leggere di più su come i principali fattori vitali del web influiscono sul posizionamento delle pagine qui.

Come risolvere il servizio di risorse statiche con un problema di criteri di cache efficiente

Correggi manualmente

Servire risorse statiche con un criterio di cache efficiente non è un'impostazione specifica di WordPress, puoi impostarla manualmente modificando il file di configurazione del tuo server web o utilizzare un plug-in come 10Web Booster hosting per assicurarti che il tuo sito sia configurato con impostazioni di cache ottimizzate.

Questa sezione riguarderà la modifica diretta dei file di configurazione di un server Web per abilitare il controllo della cache e scade le intestazioni HTTP sui tuoi server, quindi quando serve risorse statiche applica le intestazioni HTTP nella risposta.

Quando viene richiesta una risorsa, il server Web risponde con la risorsa e alcune informazioni aggiuntive in quelle che vengono chiamate intestazioni HTTP. Pensa alle intestazioni HTTP come metadati sulla connessione. Nel caso della memorizzazione nella cache, le intestazioni HTTPCache-ControleExpirescontrollano come memorizziamo nella cache un asset.

L' intestazione cache-control contiene istruzioni su se e/o come memorizzare nella cache l'asset statico. Ci sono molte direttive per il controllo della cache, quindi capiamo alcune delle più popolari.

Ecco alcuni esempi di come potrebbe apparire un'intestazione di controllo della cache.

Esempio: memorizzare nella cache un asset per sette giorni
Cache-Control: max-age=604800

Esempio: può essere memorizzato in una cache condivisa per un massimo di sette giorni
Cache-Control: public, max-age=604800

Esempio: può essere archiviato, ma deve essere riconvalidato a ogni richiesta
Cache-Control: no-cache

Esempio: non può essere memorizzato nella cache
Cache-Control: no-store

L'intestazione di controllo della cache è più recente e ha più opzioni, ma nel caso in cui il controllo della cache non sia supportato, l' intestazione HTTP di scadenza svolge la stessa attività di intestazione e indica per quanto tempo un asset è valido prima di dover essere riconvalidato. (Si noti che la direttiva max-age nell'intestazione Cache-Control ha la precedenza su Expires)
Expires: Wed Feb 13 21:01:38 CST 2023

Modifica diretta di una configurazione del server

Per prima cosa, diamo un'occhiata al "modo difficile" in modo da capire cosa succede quando utilizziamo altri strumenti e servizi che ci semplificano le cose.

Apache

Nel server Apache HTTP, il seguente frammento potrebbe essere aggiunto a una definizione del sito o a un file .htaccess.

Spiegando questo frammento, si dice che qualsiasi asset in cui l'estensione corrisponde a .ico o .pdf, ecc. avrà l'intestazione Cache-Control impostata per l'asset.

<filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
    Header set Cache-Control "max-age=3600, public"
</filesMatch>

Con Apache, molti provider di hosting ti daranno la possibilità di aggiungere direttive a un file .htaccess. Si noti che mentre questo è un modo semplice per aggiungere alla configurazione del server, l'utilizzo di file .htaccess è noto per impartire prestazioni negative a livello di server.

Nginx

In Nginx, questo frammento può essere aggiunto a un blocco del server.

Spiegando questo frammento, si dice che qualsiasi risorsa in cui l'estensione corrisponde a .ico o .pdf ecc. avrà entrambe le intestazioni di scadenza e di controllo della cache impostate.

location ~* \.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$ {
    expires 1h;
    add_header Cache-Control "public, no-transform";
}

Sia per Apache che per Nginx, stiamo mostrando come modificare/aggiungere intestazioni. Stiamo mostrando le intestazioni particolari che utilizziamo per la memorizzazione nella cache, ma il metodo può essere utilizzato per qualsiasi altra forma di memorizzazione nella cache.

Risolto con un plugin per WordPress

Se quanto sopra sembra molto, è perché lo è. Modificare le configurazioni del server e tenersi aggiornati sulle modifiche manuali richiede molto tempo ed è soggetto a errori.

Il piano gratuito 10Web Booster può configurare Apache per aggiungere intestazioni per risorse statiche e aggiunge anche intestazioni per pagine Web memorizzate nella cache. Se non stai già utilizzando l'hosting 10Web e il tuo host utilizza Apache, questo è un ottimo modo per iniziare a implementare una politica di cache efficiente.

Se hai bisogno di più opzioni o più controllo sulle intestazioni HTTP, puoi utilizzare 10Web Booster Pro. 10Web Booster Pro sfrutta il suo Cloudflare. Quando utilizzi Cloudflare, aggiunge le intestazioni di controllo della cache alle risorse statiche e alle pagine memorizzate nella cache. Ciò ignora qualsiasi configurazione o restrizione del server perché i tuoi visitatori ricevono i file direttamente da Cloudflare.

Ciò che rende il plug-in 10Web Booster la scelta migliore qui è che fa tutto questo e lo fa automaticamente. Non è necessario gestire alcuna configurazione del server o file .htaccess.

In alternativa, se utilizzi 10Web Hosting, implementa automaticamente la memorizzazione nella cache e non devi preoccuparti di aggiungere intestazioni per le risorse statiche.

Non riesci ancora a risolvere il problema? Prova questi due suggerimenti

Se hai implementato i passaggi precedenti e vedi ancora che le risorse statiche del servizio con un criterio di cache efficiente vengono ancora visualizzate nei tuoi rapporti, ecco alcune altre cose che puoi provare.

Verifica che i file siano memorizzati nella cache

Se GTMetrix e PageSpeed ​​stanno ancora segnalando che dovresti servire risorse statiche con un criterio di cache, potresti voler verificare che la tua implementazione abbia effettivamente apportato le modifiche previste.

Nella maggior parte dei browser esiste un modo semplice per verificare se i file provengono o meno da una cache.

In Chrome, sotto Visualizza e Sviluppatore, seleziona Strumenti per sviluppatori:

Nella scheda Rete, sarai in grado di identificare i file che provengono da (cache del disco) o (cache della memoria). La differenza tra disco e cache di memoria è che la memoria scompare quando il browser viene chiuso e il disco persiste quando il browser viene chiuso.

Aumenta il tempo di cache

Secondo le statistiche di Lighthouse, una politica di cache efficiente è quella che ha un alto rapporto tra accessi alla cache e fallimenti, il che significa che la maggior parte delle risorse statiche ha un'età massima o scade. Per i siti in produzione o che non cambiano spesso, si consiglia un'età massima da tre mesi a anche un anno.

Raccomandano di iniziare una politica di circa tre mesi (circa 7890000 secondi), se l'hai già impostata, potrebbe valere la pena aumentare l'età massima a un anno o più se il tuo sito è attivo.

Conclusione

Essere in grado di servire risorse statiche con un criterio di cache efficiente porta miglioramenti della velocità alle prestazioni del tuo sito web.

Questo articolo ha illustrato quali sono le risorse statiche, quali sono le intestazioni HTTP e ha esaminato come abilitare e verificare che le intestazioni di memorizzazione nella cache siano presenti.

Abbiamo esaminato i dettagli dell'abilitazione manuale delle intestazioni modificando le configurazioni del server e come possiamo semplificare l'utilizzo di un plug-in di WordPress come 10Web Booster e sfruttando l'integrazione di 10Web con Cloudflare per avere accesso per impostare le intestazioni HTTP di controllo della cache.

10Web Booster è molto più di un semplice plug-in di memorizzazione nella cache. Puoi leggere di più sulle numerose funzionalità di memorizzazione nella cache e ottimizzazione della velocità in questo articolo di 10Web Booster .

FAQ