DK Damir Khaibulin
🇷🇺 RU Russo 🇬🇧 EN Inglese 🇩🇪 DE Tedesco 🇫🇷 FR Francese 🇮🇹 IT Italiano 🇪🇸 ES Spagnolo
Parliamo
← Torna agli articoli
Performance e database

Caching del browser: come far "ricordare" i dati al tuo sito e caricarlo istantaneamente

Una guida pratica al caching del browser: header Cache-Control, ETag con risposte 304, LocalStorage per lo stato client e Service Workers per strategie offline avanzate.

Parliamone ↗ Leggi l'articolo
Lingue disponibili
EN RU DE FR IT ES
Caching del browser: come far "ricordare" i dati al tuo sito e caricarlo istantaneamente
Articolo in evidenza ↗

Caching del browser: come far "ricordare" i dati al tuo sito e caricarlo istantaneamente

Cache-Control, ETag, LocalStorage — non magia, ma strumenti essenziali. Capiamo quando e come usare ciascuno.

Immagina questo: un utente visita il tuo sito per la seconda volta, ma si carica come se fosse la prima — tutti gli script, gli stili e le immagini vengono scaricati di nuovo. Frustrazione, richieste inutili, carico extra sul server. Ti suona familiare?

La soluzione è un caching lato client intelligente. Non si tratta solo di "accelerare le cose"; è un principio fondamentale per costruire applicazioni web veloci e reattive.

Analizziamo tre meccanismi chiave che ogni sviluppatore frontend dovrebbe conoscere e capire quando usare ciascuno. Per chiarezza, includerò esempi in Laravel (il backend spesso gestisce la configurazione della cache).

1. Cache-Control: il direttore del caching HTTP

Questo è un header HTTP che dà al browser istruzioni rigorose su quanto tempo memorizzare una risorsa (JS, CSS, immagini, font).

  • Cache-Control: public, max-age=3600 — memorizzare nella cache del browser e in qualsiasi proxy intermedio per 1 ora.
  • Cache-Control: no-cache — memorizzare nella cache, ma verificare sempre la freschezza con il server.
  • Cache-Control: no-store — non memorizzare affatto (per dati sensibili).

Quando usarlo: Per tutte le risorse statiche le cui versioni cambiano raramente (file di build, font, icone). Usa nomi di file con hash (app.a1b2c3.css) così puoi impostare max-age per anni.

Esempio in Laravel (per asset statici): Puoi impostare regole in .htaccess (Apache) o nella configurazione Nginx, che è spesso il metodo preferito. Tuttavia, in Laravel, puoi inviare header quando servi asset attraverso una route o un middleware:

// In Middleware o un controller per servire un asset specifico Route::get('/static/{file}', function ($file) { $path = storage_path('app/static/' . $file); return response()->file($path, [ 'Cache-Control' => 'public, max-age=31536000', // 1 anno ]); });

2. ETag: verifica leggera della freschezza

ETag (Entity Tag) è un digest hash di una risorsa generato dal server. Il browser salva la risorsa e il suo ETag. Alla richiesta successiva, invia l'ETag nell'header If-None-Match. Il server confronta: se l'ETag corrisponde, la risorsa non è cambiata — restituisce una risposta vuota con stato 304 Not Modified. Questo risparmia banda e tempo.

Quando usarlo: Per dati che potrebbero cambiare, ma verificarlo da zero ogni volta è costoso (liste di prodotti, articoli, risposte API).

Esempio in Laravel: Laravel può generare automaticamente ETag per le risposte. Oppure puoi farlo manualmente:

use Symfony\Component\HttpFoundation\Response; Route::get('/api/products', function () { $products = Product::all(); $content = $products->toJson(); // Creare un ETag basato sul contenuto $etag = md5($content); // Verificare se l'ETag del client corrisponde al nostro if (request()->header('If-None-Match') === $etag) { return response(null, 304); // Not Modified } // Restituire la risposta con ETag return response($content) ->header('Cache-Control', 'no-cache') // Memorizzare, ma validare via ETag ->header('ETag', $etag); });

3. LocalStorage / SessionStorage: cache dei dati dell'applicazione

Qui non si tratta di HTTP, ma della Web Storage API. Un vero e proprio archivio chiave-valore nel browser (fino a 5-10 MB). Sincrono, funziona solo all'interno della stessa origin.

  • LocalStorage — persiste per sempre, finché non viene cancellato.
  • SessionStorage — vive solo durante la sessione (scheda).

Quando usarlo: Per dati non critici necessari al funzionamento dell'applicazione client, dove puoi tollerare l'obsolescenza:

  • Token di autorizzazione (attenzione! meglio nei cookie HttpOnly)
  • Dati non critici al 100%: impostazioni del tema UI, bozze di moduli, risultati di ricerca rapidi.
  • Stato dell'applicazione SPA dopo un ricaricamento della pagina.

Esempio frontend (JavaScript):

// Salvare i dati della risposta API async function loadProducts() { const cached = localStorage.getItem('products'); if (cached) { return JSON.parse(cached); // Ritorno istantaneo dalla cache } const response = await fetch('/api/products'); const products = await response.json(); localStorage.setItem('products', JSON.stringify(products)); return products; } // Ricorda di invalidare la cache quando i dati cambiano function clearProductCache() { localStorage.removeItem('products'); }

Suggerimento avanzato: Service Workers per il controllo assoluto

Per il pieno controllo sul caching e sulla funzionalità offline, considera i Service Workers. Agiscono come un proxy di rete programmabile, permettendoti di implementare strategie come "Cache First, Network Fallback" o "Stale-While-Revalidate".

Riepilogo: cosa, quando e perché

  1. Cache-Control + nomi di file con hash — per asset statici (CSS, JS, immagini). Risultato: Il browser li serve dal disco, facendo zero richieste di rete.
  2. ETag / no-cache — per dati dinamici e API. Risultato: Il browser fa una richiesta ma riceve una risposta vuota 304 se i dati sono invariati.
  3. LocalStorage — per lo stato dell'applicazione client. Risultato: Accesso istantaneo ai dati alle visite successive o ai ricaricamenti della pagina.
  4. Service Worker — per strategie avanzate offline e di prestazioni. Risultato: Controllo completo su rete e cache.

La regola d'oro: Il caching deve essere invalidabile. Ci deve sempre essere un meccanismo per eliminare i dati obsoleti (tramite cambio di nome file, aggiornamento ETag o cancellazione manuale dal LocalStorage).

Una combinazione intelligente di questi approcci riduce il numero di richieste, risparmia la banda dell'utente e rende l'interazione con il tuo sito davvero istantanea. Gli utenti lo apprezzeranno e i tuoi Core Web Vitals miglioreranno.

Tecnologie e argomenti

Tag dell'articolo

Nessun articolo corrisponde a questi filtri.

Hai un progetto o un'idea da discutere?

Parliamone ↗