Skip to content
NeuralSkills
Despliegue

Optimizacion de CDN

Configura CDN para caching optimo — reduce latencia, recorta costos de ancho de banda y maneja picos de trafico sin esfuerzo.

Intermedio Gratis Publicado: 15 de abril de 2026
Herramientas Compatibles claude-codechatgptgeminicopilotcursorwindsurfuniversal

El Problema

Tu servidor origin maneja cada solicitud directamente, incluso para assets estaticos que nunca cambian. Usuarios en Tokio esperan 400ms por una respuesta de tu servidor en US-East. Cuando llegan picos de trafico, tu origin se derrumba bajo carga que un CDN absorberia completamente. Headers de cache mal configurados significan contenido obsoleto para algunos usuarios, cache misses para otros y sin forma de invalidar rapidamente al desplegar.

El Prompt

Eres un experto en optimizacion de CDN. Configura caching optimo para mi aplicacion.

DETALLES DE LA APLICACION:
- Tipo: [ej., sitio estatico, SPA, web app SSR, API, contenido pesado en media]
- Proveedor CDN: [ej., Cloudflare, CloudFront, Fastly, Vercel Edge, ninguno aun]
- Origin: [ej., Vercel, Netlify, AWS EC2, Nginx en VPS]
- Tipos de contenido: [ej., paginas HTML, respuestas de API, imagenes, video, fonts]
- Frecuencia de actualizacion: [ej., despliegues diarios, contenido cambia cada hora, mayormente estatico]

Optimiza mi configuracion de CDN:
1. **Estrategia de caching**: Define reglas de cache por tipo de contenido — que cachear, TTL, stale-while-revalidate.
2. **Headers de cache**: Los headers exactos de Cache-Control, ETag y Vary para cada tipo de contenido.
3. **Invalidacion de cache**: Como purgar cache en el despliegue sin servir contenido obsoleto.
4. **Reglas de edge**: Reglas de transformacion para redirects, rewrites y headers de seguridad en el edge.
5. **Optimizacion de imagenes**: Redimensionado a nivel CDN, conversion de formato (WebP/AVIF), imagenes responsivas.
6. **Metricas de rendimiento**: Como medir cache hit ratio e identificar oportunidades de optimizacion.
7. **Optimizacion de costos**: Minimizar costos de egress con caching correcto y colapso de solicitudes.

Ejemplo de Salida

Reglas de cache:
- Assets estaticos (JS/CSS/fonts): Cache-Control: public, max-age=31536000, immutable (1 año, nombres de archivo con fingerprint)
- Paginas HTML: Cache-Control: public, max-age=0, s-maxage=3600, stale-while-revalidate=86400
- Respuestas de API: Cache-Control: private, no-cache (vary por header de auth)
- Imagenes: Cache-Control: public, max-age=86400 + optimizacion de imagenes CDN (auto WebP/AVIF)

Invalidacion: Hook de deploy → purge por tag (page-*) o purge all → calentar rutas criticas
Objetivo: 95%+ cache hit ratio para assets estaticos, 60%+ para HTML

Cuando Usarlo

Usa este skill cuando tu sitio cargue lento para usuarios internacionales, cuando tu servidor origin este sobrecargado durante picos de trafico, o cuando quieras reducir costos de ancho de banda de hosting.

Consejos Pro

  • Usa fingerprinting en tus assets estaticos — app.a1b2c3.js con cache de 1 año es mejor que app.js sin cache. Obtienes caching infinito con actualizaciones instantaneas al desplegar.
  • stale-while-revalidate es el arma secreta — sirve la version cacheada inmediatamente mientras obtienes una copia fresca en segundo plano.
  • El header Vary controla la fragmentacion del cache — Vary: Accept-Encoding esta bien, pero Vary: Cookie desactiva efectivamente el caching del CDN.
  • Monitorea tu cache hit ratio — cualquier cosa debajo de 90% para assets estaticos significa que tus reglas de cache estan mal.