Technologie Gadgets, SEO Tipps, Geld Verdienen mit WEB!

Come servire le risorse con un efficiente monitoraggio della cache…

Come servire le risorse con un efficiente monitoraggio della cache...

Ti sei mai chiesto perché il tuo sito WordPress sembra lento nonostante i tuoi migliori sforzi? Il segreto potrebbe risiedere nel modo in cui stai servendo le tue risorse.

Quando i browser non archiviano e recuperano file come immagini, CSS e JavaScript in modo efficiente, possono verificarsi ritardi inutili e un’esperienza utente scadente. Ecco perché abbiamo bisogno di una memorizzazione nella cache efficiente per velocizzare il tuo sito e fornire un’esperienza utente fluida.

Certo, la memorizzazione nella cache può sembrare un labirinto tecnologico, ma se ti dicessimo che esiste un percorso semplice per attraversarlo?

In questa guida ti guideremo attraverso i passaggi essenziali per servire le risorse con una politica di cache efficiente su WordPress.

Quindi, cominciamo.

Comprendere le risorse statiche e la memorizzazione nella cache

Le risorse statiche e la memorizzazione nella cache sono due aspetti fondamentali dello sviluppo web per migliorare le prestazioni del sito, i tempi di caricamento e l’esperienza dell’utente. In effetti, svuotare la cache può fornire al tuo sito un aumento immediato delle prestazioni. Consulta la nostra guida per imparare “come svuotare efficacemente la cache di WordPress”.

Gestendo correttamente le risorse statiche e implementando strategie di memorizzazione nella cache efficaci, i siti Web possono fornire contenuti in modo più efficiente, contribuendo alla soddisfazione complessiva degli utenti e al posizionamento SEO.

Comprendiamo entrambi più in dettaglio.

Cosa sono gli asset statici?

Le risorse statiche sono file come immagini, fogli di stile CSS e script JavaScript che rimangono invariati nel tempo. Questi file sono cruciali per gli aspetti visivi e funzionali di un sito Web e vengono consegnati ai browser degli utenti esattamente come sono archiviati sul server.

Cos’è la memorizzazione nella cache?

La memorizzazione nella cache è una tecnica utilizzata per archiviare copie di file o dati in una posizione di archiviazione temporanea in modo che le future richieste di tali dati possano essere soddisfatte più rapidamente.

Sebbene sia possibile Utilizzare vari tipi di tecniche di memorizzazione nella cache per mantenere il blog rilevante, descriverò due tipi di memorizzazione nella cache, ovvero: memorizzazione nella cache della pagina e memorizzazione nella cache statica.

Caching delle pagine e caching delle risorse statiche

La memorizzazione nella cache delle pagine implica l’archiviazione di una versione renderizzata completa di una pagina Web, mentre la memorizzazione nella cache delle risorse statiche memorizza singoli file come immagini e fogli di stile.

La memorizzazione nella cache delle pagine è vantaggiosa per i siti dinamici con contenuti che non cambiano frequentemente, mentre la memorizzazione nella cache delle risorse statiche è fondamentale per tutti i siti Web per ridurre i tempi di caricamento e l’utilizzo della larghezza di banda del server.

Consulta la tabella seguente per un confronto dettagliato tra la memorizzazione nella cache delle pagine e la memorizzazione nella cache delle risorse statiche:

Caching della pagina Caching delle risorse statiche
Offre contenuti dinamici che non cambiano frequentemente. Riduce i tempi di caricamento e la larghezza di banda per i contenuti statici del sito Web.
Aggiornato meno frequentemente in base alle modifiche del contenuto o alle impostazioni di scadenza. Aggiornato quando il file cambia o in base alle intestazioni della cache.
Memorizza intere pagine web. Memorizza immagini, fogli di stile, script, caratteri e altri file statici.
È controllato da intestazioni come Cache-Control e Expires. È controllato dalle intestazioni e dal controllo delle versioni dei file.

Cosa rende memorizzabile nella cache una risorsa statica?

Le risorse statiche sono considerate memorizzabili nella cache quando non cambiano frequentemente e possono essere archiviate da un browser o da una rete CDN per il riutilizzo in più caricamenti di pagine. Immagini, file CSS, file JavaScript e caratteri sono esempi comuni di risorse statiche.

Affinché una risorsa possa essere memorizzata nella cache, dovrebbe avere le intestazioni della cache HTTP appropriate, come Cache-Control e Expires, che indicano al browser per quanto tempo la risorsa deve essere archiviata.

Cos’è una policy di memorizzazione nella cache?

Una policy di memorizzazione nella cache è un insieme di regole definite dalle intestazioni HTTP che stabiliscono come e per quanto tempo i browser e le cache intermedie dovrebbero archiviare una particolare risorsa. Una politica di memorizzazione nella cache ben definita aiuta a ridurre i tempi di caricamento, il carico del server e l’utilizzo della larghezza di banda.

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

Una solida politica di memorizzazione nella cache ha un impatto diretto sia sull’esperienza utente (UX) che sull’ottimizzazione dei motori di ricerca (SEO). Tempi di caricamento più rapidi, derivanti da una memorizzazione nella cache efficace, portano a un’esperienza utente più fluida e reattiva. Questo è fondamentale poiché gli utenti probabilmente lasceranno un sito se impiega troppo tempo a caricarsi.

Per quanto riguarda la SEO, la velocità del sito è un fattore di ranking noto per Google. I siti web più veloci sono favoriti nel posizionamento nei motori di ricerca, aumentando la visibilità e potenzialmente più traffico.

Come verificare se la memorizzazione nella cache del browser è abilitata sul tuo sito

Sfruttare la memorizzazione nella cache del browser sul tuo sito WordPress può migliorare le prestazioni del tuo sito e risolvere il problema delle risorse statiche. Per verificare se la memorizzazione nella cache del browser è abilitata sul tuo sito, puoi utilizzare strumenti per sviluppatori del browser o strumenti online come PageSpeed ​​Insights di Google.

Fare quello:

  • Nel browser, fai clic con il pulsante destro del mouse > Ispeziona.
  • Vai alla scheda Rete e verifica se le intestazioni Cache-Control e Expires sono impostate correttamente.

PageSpeed ​​Insights di Google fornisce un’interfaccia più user-friendly, analizzando le prestazioni del tuo sito e indicando esplicitamente quali risorse necessitano di ottimizzazioni della memorizzazione nella cache.

Identificazione del problema “Servire asset statici con una policy di cache efficiente”.

Il problema “Servire risorse statiche con una policy di cache efficiente” viene evidenziato negli strumenti per le prestazioni del sito Web quando le risorse statiche non vengono memorizzate nella cache in modo efficace, portando a tempi di caricamento degli utenti più lunghi.

Per identificare il problema, dobbiamo capire due cose principali:

  • Uno: la causa del problema
  • Due: come PageSpeed ​​Insights interpreta il problema.

Cause del problema

Ecco le poche cause principali del problema.

Mancanza di criteri di cache

Ciò si verifica quando le risorse statiche su un sito Web, come immagini, file JavaScript o CSS, non vengono fornite con intestazioni di controllo della cache adeguate. Senza queste intestazioni, i browser non memorizzeranno nella cache queste risorse, con conseguenti download non necessari e tempi di caricamento più lunghi per i visitatori di ritorno.

Durata cache breve

Anche quando la memorizzazione nella cache è abilitata, una durata della cache molto breve può portare a problemi di prestazioni simili a quelli derivanti dall’assenza totale di memorizzazione nella cache. Idealmente, le risorse statiche che non cambiano frequentemente dovrebbero avere una lunga durata nella cache per massimizzare i vantaggi in termini di prestazioni.

Criteri di cache incoerenti

Le incoerenze nelle politiche di cache tra diversi tipi di risorse o diverse pagine di un sito possono portare a un comportamento di memorizzazione nella cache non ottimale, in cui alcune risorse vengono memorizzate nella cache in modo efficiente mentre altre no.

Non utilizzare la cache del browser

Non sfruttare la memorizzazione nella cache del browser significa che i browser degli utenti non memorizzeranno copie di risorse statiche per un recupero più rapido nelle visite successive, il che può rallentare in modo significativo le prestazioni del sito web.

Errore di configurazione generale

Ciò può includere vari problemi, come intestazioni di controllo della cache errate, impostazioni del server configurate in modo errato o problemi con il file .htaccess del sito Web (nel caso dei server Apache).

Come interpreta questo problema PageSpeed ​​Insights?

Ecco come PageSpeed ​​Insights interpreta questo problema:

  • Innanzitutto, analizza le intestazioni delle risorse statiche fornite dal tuo sito web.
  • Quindi, esamina il controllo della cache e le intestazioni di scadenza per determinare per quanto tempo ciascuna risorsa viene memorizzata nella cache dai browser.
  • Se lo strumento rileva che queste risorse hanno un breve TTL (Time To Live) della cache o che non vengono affatto memorizzate nella cache, segnala il problema e fornisce consigli per il miglioramento.

Quindi, individuando la causa, puoi risolvere il problema in modo strategico.

Soluzioni per servire le risorse con policy di cache efficienti

Per aiutarti a servire le risorse con una politica di cache efficiente, tratteremo due approcci per aiutarti a migliorare le prestazioni delle applicazioni web.

  1. Approccio manuale
  2. Approccio plug-in

Metodo manuale

Diamo prima un’occhiata a come risolvere questo problema manualmente.

Passaggio 1: identificare le risorse statiche

Innanzitutto, è necessario identificare quali risorse statiche vengono servite senza una policy di cache o con una policy inefficiente. Puoi farlo seguendo i passaggi seguenti:

  • Vai su Google Pagespeed Insights.
  • Inserisci il tuo URL.
  • Nella sezione diagnostica, puoi vedere le risorse in “servire risorse statiche con criteri di cache efficienti”.
  • Espandili per identificare le risorse statiche. Nel mio caso, ho trovato 35 risorse dopo aver eseguito il test.

Passaggio 2: configura le intestazioni HTTP

Successivamente, è necessario configurare il server per includere intestazioni HTTP specifiche per indicare al browser per quanto tempo deve memorizzare nella cache le risorse statiche. Le intestazioni principali su cui concentrarsi sono Cache-Control e, facoltativamente, Expires.

È necessario configurare le intestazioni HTTP in modo diverso per server diversi.

Se il tuo server esegue Apache, aggiungi le seguenti righe al tuo file .htaccess:

ExpiresActive On # Images ExpiresByType image/jpeg “accesso più 1 anno” ExpiresByType image/png “accesso più 1 anno” ExpiresByType image/gif “accesso più 1 anno” ExpiresByType image/webp “accesso più 1 anno” ExpiresByType image/svg+xml “accesso più 1 anno” # Fonts ExpiresByType font/ttf “accesso più 1 anno” ExpiresByType font/woff “accesso più 1 anno” ExpiresByType font/woff2 “accesso più 1 anno” # CSS, JavaScript ExpiresByType text /css “accesso più 1 mese” ExpiresByType application/javascript “accesso più 1 mese” # Others ExpiresDefault “accesso più 2 giorni” Se sul tuo server è in esecuzione Nginx, aggiungi le seguenti righe alla configurazione del blocco del server: posizione ~ * \.(jpg|jpeg|png|gif|webp|svg|ttf|woff|woff2|css|js)$ scade 1 anno; add_header Cache-Control “public, max-age=31536000, immutabile”; location ~* \.(zip|pdf)$ scade 7d; add_header Controllo cache “public, max-age=604800”;

Passaggio 3: testare le configurazioni

Dopo aver aggiornato la configurazione del server, dovresti svuotare la cache del server (se applicabile) e testare la configurazione:

  • Visitare il tuo sito web in un browser.
  • Aprire gli Strumenti per sviluppatori del browser (fare clic con il tasto destro del mouse → Ispeziona).
  • Vai alla scheda Rete.
  • Ricarica la pagina.
  • Fai clic su una risorsa statica nella scheda Rete e cerca l’intestazione Cache-Control nella sezione intestazioni.

Passaggio 4: eseguire nuovamente i test delle prestazioni

Utilizza nuovamente strumenti come Google PageSpeed ​​Insights, Lighthouse o WebPageTest per assicurarti che il problema sia stato risolto e per verificare eventuali miglioramenti nel punteggio delle prestazioni.

  • Dopo aver modificato le impostazioni, il numero di risorse è stato ridotto da 35 a 29.

Metodo del plug-in

Puoi risolvere facilmente il problema di “servire risorse statiche con criteri di cache efficienti” utilizzando il plug-in di memorizzazione nella cache. Dai un’occhiata al nostro elenco dei migliori plugin per la memorizzazione nella cache di WordPress.

Ecco come…

Plug-in Brezza

A scopo dimostrativo, utilizzerei Brezza Collegare. Il plug-in Breeze è sviluppato da DreamHost e tutti gli utenti DreamHost ricevono questo plug-in per impostazione predefinita.

  • Per prima cosa installa e attiva il plugin.
  • Vai alle impostazioni > Abilita la memorizzazione nella cache del browser

Questo dovrebbe risolvere il problema. Scopri di più sulla configurazione del plugin Breeze tramite questo guida.

Plug-in W3 Total Cache

Come discusso in precedenza, la maggior parte dei plugin di memorizzazione nella cache ti consente di servire risorse statiche. Ecco come fornire risorse statiche con il plug-in W3 Total Cache.

  • Scarica e attiva il Plug-in W3 Total Cache.
  • Vai su Impostazioni > Cache del browser
  • Per ogni elemento CSS e JS, HTML e XML, seleziona l’intestazione di scadenza e imposta la durata dell’intestazione di scadenza su 31536000 secondi.

Inoltre, consulta la nostra guida “Come utilizzare il plugin WordPress W3 Total Cache per siti Web più veloci” per ulteriori informazioni.

Suggerimenti per una strategia di memorizzazione nella cache ottimale

Anche se abbiamo già visto come risolvere facilmente il problema “servire risorse statiche con criteri di cache efficienti”, è necessaria una politica di memorizzazione nella cache ottimale per prevenire questo problema in primo luogo.

Qui offrirò alcuni suggerimenti per ottimizzare la strategia di memorizzazione nella cache:

Utilizza un provider di hosting efficace

La scelta del provider di hosting gioca un ruolo importante nell’impostazione della strategia di caching ottimale. Se disponi di un provider di hosting affidabile, potrebbe non essere necessario fare ulteriori sforzi per impostare strategie di memorizzazione nella cache. Il tuo provider di hosting si occuperà della maggior parte degli aspetti di memorizzazione nella cache.

Devi optare per un provider di hosting che utilizzi SSD, disponga di data center vicini al tuo pubblico principale e offra meccanismi di memorizzazione nella cache integrati a livello di server. Inoltre, dovrebbe consentire di aggiornare facilmente le risorse durante i picchi di traffico e dovrebbe fornire supporto per HTTP/2 o HTTP/3.

Utilizzo di reti per la distribuzione di contenuti (CDN)

L’uso dei CDN può anche risolvere il problema del “servire risorse statiche”. Devi assicurarti di scegliere la CDN con un’ampia rete di server in tutto il mondo per fornire contenuti dalla posizione più vicina all’utente.

Inoltre, devi assicurarti che la tua CDN sia configurata per rispettare le intestazioni della cache del tuo server di origine o impostare policy di cache appropriate a livello della CDN.

Se utilizzi Cloudflare CDN, puoi giocare con le regole della pagina per risolvere questo problema.

  • Vai alla dashboard di Cloudflare
  • Seleziona Cache > Configurazione
  • Imposta TTL cache del browser su 1 anno.

Se sei un utente DreamHost, puoi abilitare il componente aggiuntivo Cloudflare Enterprise con un clic e abilitare l’opzione di memorizzazione nella cache per risolvere il problema del “servimento di risorse statiche”.

Sfruttando l’integrazione con un clic di Cloudflare su DreamHost, hai il potere di migliorare le prestazioni e la sicurezza del tuo sito web senza sforzo. Abilitando Cloudflare, puoi risolvere il problema di “servire risorse statiche con una policy di cache efficiente”, assicurando che il contenuto statico del tuo sito web venga distribuito in modo rapido ed efficiente ai tuoi utenti.

Ritardare il codice di terze parti

Come tutti sappiamo, i codici di terze parti sono il vero colpevole dei tempi di caricamento lenti e, quindi, del problema delle risorse statiche.

Quindi, dobbiamo ritardare il codice di terze parti. Possiamo farlo:

  • Utilizzo di attributi asincroni o differiti o script non essenziali per impedire loro di bloccare il thread principale. Puoi farlo semplicemente aggiungendo attributi asincroni e differiti al tag script.
  • Puoi aggiungere un attributo asincrono inserendo la seguente riga nel file HTML sotto il tag script.

  • Puoi aggiungere l’attributo Defer inserendo la seguente riga nel tuo file HTML sotto il tag script.

  • Utilizzando correttamente gli attributi async e defer, puoi ottimizzare le prestazioni di caricamento del tuo sito web, fornendo un’esperienza più rapida e fluida ai tuoi utenti.

Hosting di caratteri e analisi a livello locale

L’utilizzo di caratteri esterni può rallentare il sito Web e potresti dover affrontare il problema delle risorse statiche. Per evitare ciò, scarica e offri i caratteri direttamente dal tuo server invece di affidarti a fornitori di caratteri esterni. Per fare questo,

  • Innanzitutto, scarica i file dei caratteri da Google Fonts.
  • Carica i caratteri sul tuo server. Puoi usare FTP per questo. Trascina e rilascia il file del carattere sul tuo sito remoto.
  • Crea un file CSS che definisca le regole @font-face per specificare come devono essere visualizzati i caratteri.

F

ont-family: ‘YourFontName’; src: url(‘/percorso-della-directory-dei-caratteri/file-dei-caratteri.woff2’) format(‘woff2’), url(‘/percorso-della-directory-dei-caratteri/file-dei-caratteri- file.woff’) format(‘woff’), url(‘/percorso-della-directory-dei-caratteri/your-file-caratteri.ttf’) format(‘truetype’), url(‘/percorso-delle- la tua directory-carattere/il-tuo-file-carattere.otf’) format(‘opentype’); peso carattere: normale; stile carattere: normale; }

  • Sostituisci “YourFontName” con un nome per il tuo font e sostituisci /path-to-your-font-directory/your-font-file con il percorso e il nome file effettivi dei file dei tuoi font.
  • Ora configura il tuo server web per servire file di caratteri.
  • Se stai usando Apache, aggiungi queste righe al tuo file .htaccess.

AddType carattere/woff2 .woff2 AddType carattere/woff .woff AddType carattere/ttf .ttf AddType carattere/otf .otf

  • Se stai utilizzando Nginx, aggiungi questi file al blocco del tuo server.

location ~* \.(ttf|otf|woff|woff2)$ add_header Access-Control-Allow-Origin *;

  • Includi il file CSS che hai creato sopra nei tuoi documenti HTML. Puoi farlo aggiungendo un collegamento al file CSS nella sezione del tuo HTML:

Disabilitare le funzionalità di Cloudflare

Alcune delle funzionalità di Cloudflare possono aumentare la pressione sul sito Web e aumentare i tempi di caricamento. È necessario disabilitarli per evitare il problema delle risorse statiche. Inoltre, configura le regole della pagina Cloudflare per ottimizzare la memorizzazione nella cache per diversi tipi di contenuto.

  • Vai alla scheda Velocità nella dashboard di Cloudflare.
  • Qui puoi attivare e disattivare Rocket Loader secondo necessità.

Utilizzo di DreamHost per l’ottimizzazione della cache

Sapevi che quando ospiti il ​​tuo sito web su DreamHost, ti iscrivi già all’ottimizzazione della cache?

Vuoi sapere come?

Su un sito WordPress ospitato da DreamHost, Varnish è abilitato tramite l’interfaccia della Piattaforma DreamHost, dove gli utenti possono semplicemente attivarlo per il proprio server. Una volta attivato, Varnish funziona come proxy inverso, intercettando le richieste HTTP in entrata.

Per risorse statiche come immagini, CSS e file JavaScript, Varnish controllerà la sua cache prima che raggiunga l’applicazione WordPress sul server. Se la risorsa è memorizzata nella cache e non è scaduta in base al Time To Live (TTL) configurato, fornirà questa risorsa direttamente all’utente, ignorando la necessità che WordPress generi la pagina.

Ciò riduce drasticamente il carico sul server e accelera i tempi di risposta poiché il server Web non deve servire tali file da zero, garantendo un’esperienza più rapida per l’utente finale. Se il contenuto non è nella cache o è scaduto, Varnish recupera il nuovo contenuto dal server, lo memorizza nella cache e lo serve, garantendo che le richieste successive vengano servite dalla cache.

Per abilitare la verniciatura, attenersi alla seguente procedura:

  • Vai alle impostazioni del tuo server > Gestisci servizi
  • Fare clic su “abilita” Varnish.

Inoltre, se desideri configurare manualmente Paint sul tuo sito WordPress, consulta la nostra guida dettagliata su “WordPress su Varnish”.

Riepilogo

Servire risorse statiche con una politica di cache efficiente è fondamentale per migliorare le prestazioni e l’esperienza utente del tuo sito Web WordPress. In questa guida abbiamo analizzato l’importanza della memorizzazione nella cache, fornito passaggi attuabili per configurare le policy della cache e evidenziato le migliori pratiche per garantire che le risorse statiche siano ottimizzate per la velocità.

Se hai bisogno di maggiori informazioni, non esitare a contattarci.

Q) La memorizzazione nella cache del browser è sicura?

R) Sì, la memorizzazione nella cache del browser è generalmente sicura poiché memorizza risorse statiche sul dispositivo dell’utente. Tuttavia, è fondamentale implementare adeguate policy di convalida e scadenza della cache per garantire che gli utenti non ricevano contenuti obsoleti o potenzialmente non sicuri.

Q) Quali sono le differenze e i vantaggi della memorizzazione nella cache del browser rispetto alla memorizzazione nella cache del server?

R) La memorizzazione nella cache del browser memorizza risorse statiche sul dispositivo dell’utente, riducendo i tempi di caricamento per le visite ripetute, mentre la memorizzazione nella cache del server memorizza pagine Web o altri contenuti sul server, accelerando la distribuzione dei contenuti a tutti gli utenti. Entrambi i metodi migliorano le prestazioni, ma operano in fasi diverse della distribuzione dei contenuti.

Q) Quali sono le strategie aggiuntive di miglioramento delle prestazioni?

R) Oltre alla memorizzazione nella cache, altre strategie includono l’ottimizzazione delle immagini, la minimizzazione dei file CSS e JavaScript, il caricamento lento delle risorse e l’utilizzo di una rete per la distribuzione di contenuti (CDN) per ridurre la latenza e migliorare i tempi di caricamento.

Sommario