Skip to main content

Gestión del Caché de Archivos Estáticos en PowerWAF

Introducción​

Una correcta gestión del caché es clave para aprovechar al máximo los beneficios que ofrece un CDN como PowerWAF.

Al almacenar contenido estático en ubicaciones geográficamente distribuidas, se reduce la carga en el servidor de origen y se mejora significativamente la velocidad de carga del sitio web para los usuarios.

PowerWAF, por defecto, analiza el comportamiento del tráfico y aplica reglas inteligentes para optimizar el rendimiento sin necesidad de configuración avanzada. Sin embargo, mantener una estrategia de caché coherente entre el servidor de origen y PowerWAF es esencial para garantizar una experiencia rápida, segura y actualizada.

Configuración del caché de archivos estáticos​

PowerWAF respeta las cabeceras HTTP de caché establecidas por el servidor web. Además, cuando no se define una política explícita de caché, PowerWAF aplica un comportamiento por defecto que favorece el rendimiento para archivos estáticos seguros.

Esta guía explica cómo controlar correctamente el almacenamiento en caché de archivos estáticos en tu aplicación.

Cómo PowerWAF interpreta las cabeceras de caché​

Cuando una respuesta incluye cabeceras HTTP como Cache-Control, Expires o Last-Modified, PowerWAF las analiza para determinar si el archivo debe almacenarse en caché o no. La lógica sigue los estándares comunes de comportamiento de los navegadores, garantizando compatibilidad y previsibilidad.

Cabeceras principales que considera PowerWAF:​

CabeceraPropósito
Cache-ControlDirectiva principal que define las reglas de caché (public, no-store, etc.).
ExpiresDefine una fecha/hora de expiración específica para el contenido.
Last-ModifiedIndica cuándo fue modificado el recurso por última vez.

Si está presente Cache-Control: max-age, tiene prioridad sobre Expires. Si no se definen cabeceras de caché, PowerWAF puede usar Last-Modified como alternativa.

Ejemplos de comportamiento:​

  • Cache-Control: public → ✅ Cacheado.
  • Cache-Control: no-store → ❌ No se cachea nunca.
  • Cache-Control: no-cache → ⚠️ Se cachea, pero debe validarse con el origen.
  • Cache-Control: private → ❌ No se cachea en cachés compartidas como el CDN de PowerWAF.
  • Cache-Control: max-age=3600 → ✅ Cacheado durante 1 hora.
  • Cache-Control: must-revalidate → ⚠️ Cacheado, pero requiere validación después de expirar.

Si no se define ninguna de estas cabeceras, PowerWAF aplicará reglas de caché por defecto según el tipo de archivo (ver siguiente sección).

Comportamiento por defecto en PowerWAF​

Cuando no hay cabeceras de caché presentes, PowerWAF aplica una estrategia inteligente por defecto:

  • Archivos con extensiones específicas se consideran seguros y se cachean automáticamente.
  • Archivos estáticos con parámetros ?v= en la URL (ej. style.css?v=2) se tratan como inmutables y se cachean.
  • Para archivos con Last-Modified pero sin política explícita, PowerWAF usa una heurística basada en la fecha de modificación.

Extensiones cacheadas por defecto:​

avif, bmp, css, doc, docx, ejs, eot,
eps, gif, ico, jar, jpeg, jpg, js, mid,
midi, otf, pdf, pict, pls, png, ppt, pptx,
ps, svg, svgz, swf, tif, tiff, ttf, webp,
woff, woff2, xls, xlsx

Configuraciones comunes de caché​

Directiva Cache-Control¿Se cachea?Explicación
public✅ SíPuede almacenarse en cachés del navegador y compartidas (como CDNs).
private⚠️ LimitadoSolo se almacena en el navegador del usuario.
no-cache⚠️ Con validaciónPuede almacenarse, pero debe validarse con el servidor.
no-store❌ NoNo se almacena en caché bajo ninguna circunstancia.
max-age=SEGUNDOS✅ SíTiempo que puede almacenarse sin nueva validación.
must-revalidate⚠️ SíRequiere validación obligatoria una vez expirado.
immutable✅ SíSe considera que el archivo nunca cambiará.

Permitir el caché​

¿Por qué permitir el caché?​

Permitir el almacenamiento en caché de archivos estáticos mejora el rendimiento del sitio y reduce la carga en el servidor. Cuando el caché está habilitado, tanto el navegador como el CDN de PowerWAF pueden servir archivos desde la caché, evitando solicitudes repetidas al servidor de origen.

Esto es especialmente útil para archivos que cambian poco (ej. imágenes, CSS o archivos JS versionados como app.v3.js). También mejora los puntajes en herramientas como Google PageSpeed.

✅ Recomendado para: Imágenes, fuentes, hojas de estilo y scripts JavaScript que cambian raramente.

Apache (.htaccess)​

<FilesMatch "\\.(jpg|jpeg|png|css|js|woff2?)$">
    Header set Cache-Control "public, max-age=31536000, immutable"
</FilesMatch>

Nginx​

location ~* \\.(jpg|jpeg|png|css|js|woff2?)$ {
    add_header Cache-Control "public, max-age=31536000, immutable";
}

IIS (web.config)​

<configuration>
  <system.webServer>
    <staticContent>
      <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="365.00:00:00" />
    </staticContent>
    <staticContent>
      <mimeMap fileExtension=".css" mimeType="text/css" />
      <mimeMap fileExtension=".png" mimeType="image/png" />
      <mimeMap fileExtension=".jpg" mimeType="image/jpeg" />
    </staticContent>
  </system.webServer>
</configuration>

Evitar el caché​

¿Por qué evitar el caché?​

En algunos casos, es importante asegurarse de que el navegador y el CDN de PowerWAF siempre obtengan la versión más reciente de un archivo. Esto es esencial cuando:

  • Los archivos cambian frecuentemente pero conservan el mismo nombre.
  • Los archivos contienen información sensible o personalizada.
  • Se necesita control completo sobre cada solicitud.

❌ Recomendado para: Archivos dinámicos, datos sensibles o archivos que cambian sin cambiar el nombre.

Apache (.htaccess)​

<FilesMatch "\\.(jpg|jpeg|png|css|js)$">
    Header set Cache-Control "no-store, no-cache, must-revalidate"
    Header set Pragma "no-cache"
    Header set Expires "0"
</FilesMatch>

Nginx​

location ~* \\.(jpg|jpeg|png|css|js)$ {
    add_header Cache-Control "no-store, no-cache, must-revalidate";
    add_header Pragma "no-cache";
    add_header Expires "0";
}

IIS (web.config)​

Crea un archivo web.config en la carpeta donde están los archivos y añade lo siguiente:

<?xml version="1.0" encoding="utf-8"?>
<configuration>
    <system.webServer>
        <staticContent>
            <clientCache cacheControlMode="DisableCache" />

            <!-- Reescribe el tipo MIME para desactivar el caché -->
            <remove fileExtension=".pdf" />
            <mimeMap fileExtension=".pdf" mimeType="application/pdf" />

            <remove fileExtension=".jpg" />
            <mimeMap fileExtension=".jpg" mimeType="image/jpeg" />
        </staticContent>
    </system.webServer>
</configuration>

Ejemplos prácticos​

ArchivoObjetivoConfiguración recomendada
logo.jpgCachear 1 añopublic, max-age=31536000, immutable
style.css?v=2Archivo versionadoCacheable automáticamente por PowerWAF
main.cssEvitar cachéno-store, no-cache, must-revalidate
private-doc.pdfDocumento sensibleno-store
custom.js sin cabeceraDepende del tipoCacheado por defecto si es .js
tip

Después de realizar cualquier cambio en la política de caché en el servidor de origen, es necesario limpiar la caché de PowerWAF para que los cambios se reflejen correctamente.

Buenas prácticas​

  • Si un archivo nunca cambia, actívalo con max-age e immutable.
  • Si cambia pero mantiene el nombre, desactiva el caché.
  • Si puedes, versiona el archivo (ej. ?v=3) para habilitar caché con control.
  • PowerWAF cacheará muchos archivos por defecto. Si necesitas otro comportamiento, define las cabeceras explícitamente.

Configurar el caché desde el panel de PowerWAF​

Además de las cabeceras HTTP, puedes configurar el comportamiento del caché directamente desde el panel de PowerWAF en Optimización del sitio > Caché.

TTL del caché​

Controla cuánto tiempo permanece válido el contenido en caché en todos los servidores edge.

  • Auto (por defecto): Respeta las cabeceras Cache-Control del servidor de origen. Si el origen proporciona un TTL muy bajo o inexistente, se aplica una fórmula heurística basada en la fecha de última modificación del recurso para calcular una duración óptima de caché.
  • Valor personalizado: Establece un TTL fijo en segundos (ej., 3600 para 1 hora, 86400 para 1 día).

Stale-While-Revalidate​

Controla qué ocurre cuando un recurso en caché expira:

  • Habilitado (recomendado: 86400): Cuando el contenido expira, la versión obsoleta se sirve inmediatamente al visitante mientras se obtiene contenido fresco del origen en segundo plano. Esto elimina los picos de latencia tras la expiración del caché.
  • Deshabilitado (0): Cada solicitud de contenido expirado se bloquea hasta que el servidor de origen responde. Esto aumenta los tiempos de carga para los visitantes y no es recomendable.
tip

Recomendamos configurar Stale-While-Revalidate en 86400 segundos (1 día) para un rendimiento óptimo. Esto asegura que los visitantes siempre obtengan una respuesta instantánea, incluso cuando el contenido en caché ha expirado.

Purgar el caché desde el panel​

Cuando actualizas contenido en tu servidor de origen y necesitas que los cambios se reflejen de inmediato, puedes purgar el caché desde el panel de PowerWAF en Optimización del sitio > Caché.

  • Purgar todo: Elimina todo el contenido estático en caché de los servidores edge. Las próximas solicitudes obtendrán contenido fresco de tu origen.
  • Purgar por URL: Apunta a recursos específicos usando patrones de URL. Usa * como comodín (ej., /blog/* para purgar todos los recursos del blog, o /images/logo.png para un archivo específico).
note

Cambiar la configuración de optimización de recursos (minificación de JavaScript, minificación de CSS u optimización WebP) purga automáticamente todo el caché estático, ya que los recursos previamente cacheados tendrían la optimización anterior aplicada.

Optimización de recursos​

PowerWAF puede optimizar tus recursos estáticos sobre la marcha en los servidores edge, reduciendo el tamaño de los archivos y mejorando los tiempos de carga sin requerir cambios en tu código fuente. Configura estos ajustes desde el panel en Optimización del sitio > Optimización.

Minificación de JavaScript​

Optimiza automáticamente archivos JavaScript en tiempo real mientras pasan por el edge, logrando típicamente una reducción del 35–65% en el tamaño del archivo. Las optimizaciones incluyen:

  • Eliminación de espacios en blanco, comentarios y puntos y coma superfluos
  • Renombrado de variables y funciones locales a nombres más cortos (el ámbito global nunca se modifica)
  • Reescritura de constantes como true, false y undefined a equivalentes más cortos
  • Fusión de sentencias de expresión secuenciales
  • Colapso de sentencias if/else en expresiones
  • Optimización de representaciones numéricas (binario, octal, decimal, hexadecimal)

Todas las transformaciones son seguras para producción y no alteran el comportamiento del código. Por defecto: deshabilitado.

Minificación de CSS​

Optimiza automáticamente archivos CSS en el edge. Las optimizaciones incluyen:

  • Eliminación de comentarios y espacios en blanco innecesarios (preservando bloques de licencia /*! */)
  • Acortamiento de números eliminando ceros y signos innecesarios
  • Eliminación de unidades en valores cero (ej., 0px → 0)
  • Conversión de colores hexadecimales a representaciones más cortas o nombres de color cuando es posible
  • Conversión de propiedades a notación abreviada (ej., background, font)
  • Eliminación de comillas en URLs cuando es seguro

Solo se aplican optimizaciones probadas y no destructivas — cambios estructurales riesgosos como la fusión de reglas o el reordenamiento de selectores se evitan intencionalmente. Por defecto: deshabilitado.

Optimización de imágenes WebP​

Convierte automáticamente imágenes al formato WebP para navegadores que lo soportan. WebP proporciona una compresión superior sin pérdida visible de calidad, reduciendo típicamente el tamaño de los archivos de imagen entre un 25–35% en comparación con JPEG y PNG. Por defecto: habilitado.

caution

Cambiar cualquier configuración de optimización purgará automáticamente todo el caché estático. Los recursos previamente cacheados con la configuración de optimización anterior serán invalidados y se volverán a cachear con la nueva configuración en la próxima solicitud.