Cache HTTP وCDN: استراتيجيات Cache لتحسين أداء الويب

ما هو Cache HTTP؟

Cache HTTP هو storage مؤقت لـ recursos (HTML، CSS، JS، صور) من قبل browsers وservers intermedios (proxy، CDN).

Cache يقلل traffic de red في solicitudes repetidas وي speeds up carga de página. Cache bien configurado puede reduce carga del servidor hasta 80%.

Dos tipos de cache: cache del navegador (lado del client) y cache compartido (CDN، proxy). ambos serve para propósitos diferentes.

Header Cache-Control هو mecanismo principal que controla comportamiento del cache. contiene directivas como max-age، s-maxage، no-cache، no-store.

Headers Cache-Control

max-age=3600: especifica que el recurso es fresh por 3600 segundos (1 hora). durante este tiempo، navegador no hace solicitud de red.

s-maxage=3600: max-age para caches compartidos (CDN). navegador usa max-age، CDN usa s-maxage.

no-cache: el recurso debe ser validado con el servidor en cada uso. almacenado en cache pero revalidado antes del uso.

no-store: el recurso no se almacena en ningún cache. usado para datos sensibles (información personal، bancaria).

public/private: public significa que puede ser almacenado en cualquier cache. private significa que solo se almacena en cache del navegador (contenido específico del usuario).

immutable: el recurso nunca cambia (assets versionados). navegador no realiza revalidación، mejorando el rendimiento.

ETag y Last-Modified

ETag (Entity Tag): un identificador único para el recurso. servidor lo usa para verificar si el recurso ha cambiado.

Last-Modified: especifica la fecha de última modificación del recurso. navegador hace solicitud condicional con header If-Modified-Since.

Solicitud condicional: navegador hace solicitud con header If-None-Match (ETag) o If-Modified-Since (Last-Modified). si el recurso no ha cambiado، servidor retorna 304 Not Modified.

304 Not Modified: si el recurso no ha cambiado، servidor retorna solo headers، no body. esto ahorra ancho de banda.

CDN (Content Delivery Network)

CDN es una red que sirve assets estáticos (imágenes، CSS، JS، fuentes) desde servidores en diferentes ubicaciones alrededor del mundo.

CDN sirve contenido desde el servidor más cercano al usuario. esto reduce la latencia en 50-80%.

CDN populares: Cloudflare، AWS CloudFront، Fastly، Akamai، Google Cloud CDN. cada uno tiene precio y características diferentes.

Configuración de CDN: servidor de origen (fuente)، servidores edge (endpoints)، cache TTL (tiempo de vida)، purge (limpieza de cache).

Contenido dinámico con CDN: algunos CDN (Cloudflare Workers، Fastly Compute) pueden generar contenido dinámico en el edge.

Estrategias de Cache

Cache First: servir del cache primero، obtener de la red si no está disponible. ideal para assets estáticos (CSS، JS، imágenes).

Network First: obtener de la red primero، recurrir al cache si falla. ideal para contenido dinámico (respuestas de API).

Stale While Revalidate: servir del cache، actualizar de la red en segundo plano. proporciona respuesta rápida mientras mantiene el contenido fresco.

Cache Only: servir solo del cache. usado para aplicaciones offline.

Network Only: obtener solo de la red. usado para datos en tiempo real (precios de acciones، chat).

Cache Busting

Nombres de archivo versionados: cambie el nombre del archivo con style.css?v=1.2.3 o style.abc123.css. el navegador carga el nuevo archivo.

Query string: cache busting con style.css?v=20261025. algunos CDN no usan query string como clave de cache.

Content hash: Webpack/Vite crea hash basado en el contenido del archivo (main.a1b2c3.js). el hash cambia cuando el contenido cambia.

Service Worker: el nuevo Service Worker se activa inmediatamente con self.skipWaiting() y clients.claim(). el cache se actualiza.