Cómo configurar encabezados de control de caché en NGINX

El almacenamiento en caché es el procedimiento de almacenar datos descargados para su uso posterior, donde se pueden leer desde el disco en lugar de solicitarlos nuevamente. Hacer un uso adecuado de su navegador y el almacenamiento en caché de CDN puede acelerar significativamente su portal web.

¿Cómo funciona el almacenamiento en caché?

El navegador de cada usuario dispone de una memoria caché incorporada, que almacena objetos estáticos descargados de sitios web. La próxima vez que se conecten, si el objeto que están solicitando aún está en la memoria caché, se cargará desde la memoria en lugar de volver a solicitarlo, lo que acelerará significativamente el rendimiento y reducirá la carga en su servidor web en el procedimiento.

El navegador del usuario es un caché del lado del cliente. A pesar de esto, muchos sitios grandes además utilizarán una red de entrega de contenido o CDN. El CDN se encuentra frente a su servidor web y almacena en caché sus páginas en el lado del servidor, de forma general en varios servidores de borde ubicados en todo el mundo. Esto mejora la latencia de acceso, el rendimiento y reduce en gran medida el estrés en su servidor web. Si desea obtener más información sobre las CDN, puede leer nuestra guía aquí.

Cache-Control es un encabezado que puede configurar su servidor web para agregar a todas las solicitudes salientes. Al usarlo, puede especificar qué recursos se almacenan en caché y durante cuánto tiempo. A pesar de esto, hay algunas cosas a prestar atención antes de agregarlo en todo el sitio.

Algunas páginas deberían Nunca almacenarse en caché. Cualquier cosa que requiera que un usuario inicie sesión no debe ser almacenada en caché por una CDN, caso contrario correrá el riesgo mostrar la información personal de un usuario a otros. Aún puede almacenar en caché este tipo de páginas solo en el lado del navegador (configurando Cache-Control para private). Como regla general, si la página va a ser exactamente la misma para todos los usuarios, como su página de inicio, puede almacenarla en caché. Los recursos estáticos, como CSS e imágenes, de forma general se pueden almacenar en caché, a menudo durante mucho más tiempo.

Además querrá asegurarse de determinar valores razonables de tiempo de vida (TTL) para cada recurso. TTL controla cuánto tiempo permanecerá el objeto en la caché antes de ser invalidado, lo que solicita al usuario que solicite un nuevo objeto. La compensación aquí es entre un largo tiempo de almacenamiento en caché y actualizaciones rápidas. No desea almacenar en caché su página de inicio durante todo un año, debido a que podría estar cambiando algo el martes. Determinar una edad máxima de unos pocos minutos para su página de inicio es lo suficientemente largo para cubrir recargas inmediatas y lo suficientemente rápido como para permitir una rápida propagación de actualizaciones. A pesar de esto, para los recursos estáticos como las imágenes, es factible que nunca cambien, y debería estar bien configurando valores de TTL altos, inclusive tan altos como dos años.

Siempre puede usar nombres de archivo versionados para activar una recarga de caché. Si publica una versión nueva de una hoja de estilo CSS, puede nombrarla styles-1.0.1.css, y el navegador del usuario (y cualquier CDN frente a él) lo verá como un nuevo archivo que debe volver a descargarse. Al mismo tiempo, para algunas CDN, puede emitir invalidaciones manuales para vaciar la caché existente sin cambiar ningún nombre de archivo.

Cómo usar Cache-Control en NGINX

Cache-Control tiene algunas opciones:

• public – Cualquiera puede almacenarlo en caché, incluidos navegadores y CDN. Use esto para la mayoría de los objetos estáticos.
• private – Contiene datos confidenciales que no pueden almacenarse en caché a través de CDN o proxies inversos. El navegador del usuario puede almacenarlo en caché localmente. Use esto para la mayoría de las páginas autenticadas.
• no-cache – A pesar del nombre, no deshabilita el almacenamiento en caché. El navegador aún puede almacenar en caché la solución para el rendimiento, pero debe verificar con el servidor de origen las actualizaciones antes de usarlo. Use esto si desea que el usuario revalide cada vez
• no-store – Deshabilita el almacenamiento en caché por completo. Use esto solo para datos altamente confidenciales que no deben enviarse dos veces.

Al configurar el max-age, siempre se hace en segundos. A pesar de esto, NGINX posibilita algunos valores personalizados más:

• -1, o off, que desactivará el almacenamiento en caché y no modificará los encabezados existentes
• epoch, configurado en Unix time zero, que desactivará explícitamente el almacenamiento en caché y purgará todos los cachés (útil si está usando NGINX como proxy inverso)
• max, que expirará cuando el universo termine, el 31 de diciembre de 2037
• 30s, por segundos
• 1m, por minutos
• 24h, por horas
• 3d, por dias
• 1M, por meses
• 2y, durante años

Al mismo tiempo, puede agregar el no-transform directiva, que deshabilita cualquier conversión que se pueda llevar a cabo en el recurso. A modo de ejemplo, algunas CDN comprimen imágenes para reducir el ancho de banda. Esta directiva deshabilita aquella conducta.

Para NGINX, puede modificar los encabezados de Cache-Control con las siguientes directivas:

expires 1y;
add_header Cache-Control "public, no-transform";

La primera línea establece la edad máxima en 1 año y la segunda establece la public y no-transform configuración de almacenamiento en caché. Puede agregar esto a un server bloquear para aplicar en todo el sitio, pero un mejor método es hacer coincidir las extensiones de archivo con un bloque de ubicación para determinar diferentes valores según la extensión del archivo:

location ~* .(?:css|js)$ {
  expires 1y;
  add_header Cache-Control "public";
}

Este bloque de ubicación utiliza una coincidencia de expresión regular, denotada por el ~. Esto es útil para aplicar configuraciones generales para el tipo de contenido. Si desea hacer excepciones para ubicaciones específicas, puede utilizar un bloque de ubicación normal, que tendrá prioridad sobre una coincidencia de expresiones regulares.

location /profile {
    expires 2d;
    add_header Cache-Control "public, no-transform";
}

Además puede usar el = modificador, que coincide exactamente con las rutas y tendrá prioridad sobre una coincidencia de expresiones regulares y un bloque de ubicación estándar.

Use Surrogate-Control para modificar el comportamiento de CDN

Aunque puede deshabilitar el almacenamiento en caché de CDN y aún aprovechar el almacenamiento en caché del navegador usando Cache-Control: private, es mejor tener un control directo sobre él. La mayoría de los CDN respetarán el Surrogate-Control encabezado, que funciona exactamente igual que Cache-Control, excepto que solo está destinado a CDN. De esta forma, puede decirle a Fastly que haga una cosa y al usuario que haga otra.

En NGINX, tendrá que configurar este encabezado manualmente y configurar el max-age valor en lugar de usar NGINX expires directiva.

add_header Surrogate-Control "public, max-age=86400";
add_header Cache-Control "public, max-age=120";

Definitivamente querrá probar con su CDN para verificar que esto funcione.Surrogate-Control es bastante nuevo y no es universal.