Cache HTTP e CDN: Strategie di Cache per le Prestazioni Web

Cos'è il Cache HTTP?

Il cache HTTP è l'archiviazione temporanea di risorse (HTML, CSS, JS, immagini) da parte di browser e server intermedi (proxy, CDN).

Il cache riduce il traffico di rete su richieste ripetute e accelera il caricamento della pagina. Un cache ben configurato può ridurre il carico del server fino all'80%.

Due tipi di cache: Cache del browser (lato client) e cache condiviso (CDN, proxy). Entrambi servono per scopi diversi.

L'header Cache-Control è il meccanismo principale che controlla il comportamento del cache. Contiene direttive come max-age, s-maxage, no-cache, no-store.

Header Cache-Control

max-age=3600: Specifica che la risorsa è fresh per 3600 secondi (1 ora). Durante questo tempo, il browser non effettua richieste di rete.

s-maxage=3600: max-age per cache condivisi (CDN). Il browser usa max-age, il CDN usa s-maxage.

no-cache: La risorsa deve essere validata con il server ad ogni utilizzo. Archiviata nel cache ma revalidata prima dell'uso.

no-store: La risorsa non viene archiviata in nessun cache. Usato per dati sensibili (informazioni personali, bancarie).

public/private: public significa che può essere archiviata in qualsiasi cache. private significa che è archiviata solo nel cache del browser (contenuto specifico dell'utente).

immutable: La risorsa non cambia mai (asset versionati). Il browser non effettua revalidazione, migliorando le prestazioni.

ETag e Last-Modified

ETag (Entity Tag): Un identificatore unico per la risorsa. Il server lo usa per verificare se la risorsa è cambiata.

Last-Modified: Specifica la data di ultima modifica della risorsa. Il browser effettua richiesta condizionale con header If-Modified-Since.

Richiesta condizionale: Il browser effettua richiesta con header If-None-Match (ETag) o If-Modified-Since (Last-Modified). Se la risorsa non è cambiata, il server restituisce 304 Not Modified.

304 Not Modified: Se la risorsa non è cambiata, il server restituisce solo header, non body. Questo risparmia banda.

CDN (Content Delivery Network)

CDN è una rete che serve asset statici (immagini, CSS, JS, font) da server in diverse posizioni nel mondo.

CDN serve contenuto dal server più vicino all'utente. Questo riduce la latenza del 50-80%.

CDN popolari: Cloudflare, AWS CloudFront, Fastly, Akamai, Google Cloud CDN. Ognuno ha prezzi e funzionalità diverse.

Configurazione CDN: Server di origine (fonte), server edge (endpoints), cache TTL (tempo di vita), purge (svuotamento cache).

Contenuto dinamico con CDN: Alcuni CDN (Cloudflare Workers, Fastly Compute) possono generare contenuto dinamico all'edge.

Strategie di Cache

Cache First: Servire dalla cache prima, recuperare dalla rete se non disponibile. Ideale per asset statici (CSS, JS, immagini).

Network First: Recuperare dalla rete prima, ricorrere alla cache se fallisce. Ideale per contenuto dinamico (risposte API).

Stale While Revalidate: Servire dalla cache, aggiornare dalla rete in background. Fornisce risposta rapida mantenendo il contenuto fresco.

Cache Only: Servire solo dalla cache. Usato per applicazioni offline.

Network Only: Recuperare solo dalla rete. Usato per dati in tempo reale (prezzi azioni, chat).

Cache Busting

Nomi file versionati: Cambiate il nome del file con style.css?v=1.2.3 o style.abc123.css. Il browser carica il nuovo file.

Query string: Cache busting con style.css?v=20261025. Alcuni CDN non usano la query string come chiave di cache.

Content hash: Webpack/Vite crea hash basato sul contenuto del file (main.a1b2c3.js). L'hash cambia quando il contenuto cambia.

Service Worker: Il nuovo Service Worker diventa attivo immediatamente con self.skipWaiting() e clients.claim(). Il cache viene aggiornato.