Configuración del caché y la compresión de archivos estáticos en Nginx

Configurar correctamente el caché y la compresión de los archivos estáticos (imágenes, CSS, JavaScript, fuentes, etc.) es una de las formas más eficaces de mejorar la velocidad de carga del sitio, reducir el consumo de ancho de banda y disminuir la carga general sobre el servidor.

En esta guía cubrimos dos funcionalidades esenciales de Nginx:

• La directiva expires para controlar el caché del navegador
• La compresión GZIP para archivos de texto

1. Configurar el caché del navegador con expires

La directiva expires indica al navegador durante cuánto tiempo puede almacenar un archivo en su caché local antes de volver a consultar el servidor.

Abre el archivo de configuración de Nginx de tu sitio (normalmente en /etc/nginx/conf.d/vhost.conf o similar) y añade el siguiente bloque location para los archivos estáticos:

location ~* \.(jpg|jpeg|png|gif|svg|webp|ico|css|js|woff|woff2|ttf|eot|mp4|webm|ogg|mp3|pdf|zip)$ {
    expires 30d;                    # Caché durante 30 días
    add_header Cache-Control "public";
    access_log off;                 # Deshabilitar el registro para archivos estáticos y ahorrar recursos
}

Valores recomendados para expires:

• Imágenes, fuentes e iconos: 30d o 1y
• CSS y JavaScript: 7d — 30d (usa períodos más cortos para archivos que se actualizan con frecuencia)
• Archivos que cambian raramente: 1y

2. Habilitar la compresión GZIP

La compresión GZIP puede reducir drásticamente el tamaño de los archivos de texto (HTML, CSS, JS, SVG, etc.), lo que se traduce en cargas de página más rápidas. Añade la siguiente configuración dentro de tu bloque server {}:

server {
    ...

    gzip on;
    gzip_disable "msie6";
    gzip_vary on;
    gzip_proxied any;
    gzip_comp_level 6;               # Nivel de compresión (1–9)
    gzip_buffers 16 8k;
    gzip_http_version 1.1;
    gzip_min_length 256;
    gzip_types
        text/plain
        text/css
        text/xml
        text/javascript
        application/javascript
        application/json
        application/xml
        application/rss+xml
        image/svg+xml;
}

3. Aplicar la configuración a todos los sitios (plantilla)

Para aplicar automáticamente estas optimizaciones a todos los virtual hosts, crea un archivo de plantilla:

sudo nano /usr/local/ispmgr/etc/server.templ

Añade lo siguiente:

location ~* \.(jpg|jpeg|png|gif|svg|webp|ico|css|js|woff|woff2|ttf|eot)$ {
    expires 30d;
    add_header Cache-Control "public";
    access_log off;
}

Tras guardar, reinicia Nginx:

sudo systemctl restart nginx

Consejos útiles

• Prueba siempre la configuración tras cualquier cambio: sudo nginx -t
• Combina expires con la cabecera Cache-Control: public para obtener el mejor rendimiento.
• Evita establecer períodos de caché muy largos (por ejemplo, más de un año) en archivos que cambian con frecuencia, como CSS o JavaScript — de lo contrario, los usuarios podrían ver versiones desactualizadas durante mucho tiempo.
• En VPS o servidores dedicados, puedes llevar la optimización aún más lejos con FastCGI cache, proxy_cache o reglas avanzadas de caché del navegador.