Cómo implementar el almacenamiento en caché del navegador con el módulo de encabezado de Nginx en Ubuntu 20.04

El autor seleccionó el Fondo de Ayuda COVID-19 para recibir una donación como parte del programa Write for DOnations.

Introducción

Cuanto más rápido se carga un sitio web, más probabilidades hay de que el visitante se quede. Cuando los sitios web están llenos de imágenes y contenido interactivo ejecutado por scripts cargados en segundo plano, abrir un sitio web no es una tarea sencilla. Consiste en solicitar muchos archivos diferentes al servidor uno por uno. Minimizar la cantidad de estas solicitudes es una forma de acelerar su sitio web.

Un método para mejorar el rendimiento de un sitio web es el almacenamiento en caché del navegador. El almacenamiento en caché del navegador le indica al navegador que puede reutilizar versiones locales de los archivos descargados en lugar de solicitarlos al servidor una y otra vez. Para ello, debe introducir nuevos encabezados de respuesta HTTP que le indiquen al navegador cómo debe comportarse.

El módulo de encabezado de Nginx puede ayudar a realizar el almacenamiento en caché del navegador. Puedes usar este módulo para agregar cualquier encabezado arbitrario a la respuesta, pero su función principal es configurar correctamente los encabezados de almacenamiento en caché. En este tutorial, usaremos el módulo de encabezado de Nginx para implementar el almacenamiento en caché del navegador.

Prerrequisitos

Para seguir este tutorial, necesitarás:

• Un servidor Ubuntu 20.04 con un usuario normal que no sea root y que tenga privilegios sudo. Puedes aprender a preparar tu servidor siguiendo este tutorial de configuración inicial del servidor.

• Nginx instalado en su servidor siguiendo el tutorial Cómo instalar Nginx en Ubuntu 20.04.

Paso 1: creación de archivos de prueba

En este paso, crearemos varios archivos de prueba en el directorio predeterminado de Nginx. Usaremos estos archivos más adelante para verificar el comportamiento predeterminado de Nginx y luego para probar que el almacenamiento en caché del navegador esté funcionando.

Para inferir qué tipo de archivo se transmite a través de la red, Nginx no analiza el contenido del archivo, lo que sería prohibitivamente lento. En su lugar, busca la extensión del archivo para determinar el tipo MIME del archivo, que indica su propósito.

Debido a este comportamiento, el contenido de nuestros archivos de prueba es irrelevante. Si nombramos los archivos de forma adecuada, podemos engañar a Nginx para que piense que, por ejemplo, un archivo completamente vacío es una imagen y otro es una hoja de estilos.

Cree un archivo con el nombre test.htmlen el directorio predeterminado de Nginx utilizando truncate. Esta extensión indica que se trata de una página HTML:

sudo truncate -s 1k /var/www/html/test.html

Creemos algunos archivos de prueba más de la misma manera: un jpgarchivo de imagen, una csshoja de estilo y un jsarchivo JavaScript:

sudo truncate -s 1k /var/www/html/test.jpg
sudo truncate -s 1k /var/www/html/test.css
sudo truncate -s 1k /var/www/html/test.js

El siguiente paso es comprobar cómo se comporta Nginx con respecto al envío de encabezados de control de almacenamiento en caché en una nueva instalación con los archivos que acabamos de crear.

Paso 2: compruebe el comportamiento predeterminado

De forma predeterminada, todos los archivos tendrán el mismo comportamiento de almacenamiento en caché predeterminado. Para explorar esto, usaremos el archivo HTML que creamos en el paso 1, pero puedes ejecutar estas pruebas con cualquier archivo de ejemplo.

Por lo tanto, verifiquemos si test.htmlse proporciona alguna información sobre el tiempo durante el cual el navegador debe almacenar en caché la respuesta. El siguiente comando solicita un archivo de nuestro servidor Nginx local y muestra los encabezados de respuesta:

curl -I http://localhost/test.html

Verá varios encabezados de respuesta HTTP:

Output: Nginx response headersHTTP/1.1 200 OKServer: nginx/1.18.0 (Ubuntu)Date: Tue, 02 Feb 2021 19:03:21 GMTContent-Type: text/htmlContent-Length: 1024Last-Modified: Tue, 02 Feb 2021 19:02:58 GMTConnection: keep-aliveETag: "6019a1e2-400"Accept-Ranges: bytes

En la penúltima línea encontrará el ETagencabezado, que contiene un identificador único para esta revisión particular del archivo solicitado. Si ejecuta el curlcomando anterior repetidamente, encontrará exactamente el mismo ETagvalor.

Cuando se utiliza un navegador web, el ETagvalor se almacena y se envía de vuelta al servidor con el If-None-Matchencabezado de la solicitud cuando el navegador desea solicitar el mismo archivo nuevamente, por ejemplo, al actualizar la página.

Podemos simular esto en la línea de comandos con el siguiente comando. Asegúrese de cambiar el ETagvalor de este comando para que coincida con el ETagvalor de su salida anterior:

curl -I -H 'If-None-Match: "6019a1e2-400"' http://localhost/test.html

La respuesta ahora será diferente:

Output: Nginx response headersHTTP/1.1 304 Not ModifiedServer: nginx/1.18.0 (Ubuntu)Date: Tue, 02 Feb 2021 19:04:09 GMTLast-Modified: Tue, 02 Feb 2021 19:02:58 GMTConnection: keep-aliveETag: "6019a1e2-400"

Esta vez, Nginx responderá con 304 Not Modified . No volverá a enviar el archivo a través de la red, sino que le indicará al navegador que puede reutilizar el archivo que ya ha descargado localmente.

Esto es útil porque reduce el tráfico de red, pero no es suficiente para lograr un buen rendimiento de almacenamiento en caché. El problema es ETagque los navegadores siempre envían una solicitud al servidor para preguntar si puede reutilizar su archivo almacenado en caché. Aunque el servidor responde con un 304 en lugar de enviar el archivo nuevamente, aún lleva tiempo realizar la solicitud y recibir la respuesta.

En el siguiente paso, utilizaremos el módulo de encabezados para agregar información de control de almacenamiento en caché. Esto hará que el navegador almacene en algunos archivos caché localmente sin preguntarle explícitamente al servidor si está bien hacerlo.

Paso 3: Configuración de los encabezados Cache-Control y Expires

Además del ETagencabezado de validación de archivo, hay dos encabezados de respuesta de control de almacenamiento en caché: Cache-Controly Expires. Cache-Controles la versión más nueva, con más opciones que Expiresy generalmente es más útil si desea un control más preciso sobre su comportamiento de almacenamiento en caché.

Si se configuran estos encabezados, pueden indicar al navegador que el archivo solicitado se puede conservar localmente durante un tiempo determinado (incluso para siempre) sin volver a solicitarlo. Si no se configuran los encabezados, los navegadores siempre solicitarán el archivo al servidor y esperarán respuestas 200 OK o 304 Not Modified .

Podemos usar el módulo de encabezado para configurar estos encabezados HTTP. El módulo de encabezado es un módulo básico de Nginx, lo que significa que no necesita instalarse por separado para poder usarlo.

Para agregar el módulo de encabezado, abra el archivo de configuración predeterminado de Nginx en nanosu editor de texto favorito:

sudo nano /etc/nginx/sites-available/default

Encuentra el serverbloque de configuración:

/etc/nginx/sites-available/predeterminado

. . .# Default server configuration#server {    listen 80 default_server;    listen [::]:80 default_server;. . .

Agregue las siguientes dos nuevas secciones aquí: una antes del serverbloque, para definir durante cuánto tiempo almacenar en caché los diferentes tipos de archivos, y otra dentro de él, para configurar los encabezados de almacenamiento en caché de manera adecuada:

Se modificó /etc/nginx/sites-available/default

. . .# Default server configuration## Expires mapmap $sent_http_content_type $expires {    default                    off;    text/html                  epoch;    text/css                   max;    application/javascript     max;    ~image/                    max;    ~font/                     max;}server {    listen 80 default_server;    listen [::]:80 default_server;    expires $expires;. . .

La sección antes del serverbloque es un nuevo mapbloque que define la asignación entre el tipo de archivo y el tiempo durante el cual se debe almacenar en caché ese tipo de archivo.

Estamos utilizando varias configuraciones diferentes en este mapa:

• El valor predeterminado es offque no agregará ningún encabezado de control de almacenamiento en caché. Es una apuesta segura para el contenido, no tenemos requisitos particulares sobre cómo debería funcionar el caché.

• Para text/html, establecemos el valor en epoch. Este es un valor especial que da como resultado explícitamente que no haya almacenamiento en caché, lo que obliga al navegador a preguntar siempre si el sitio web está actualizado.

• Para text/cssy application/javascript, que son hojas de estilo y archivos JavaScript, establecemos el valor en max. Esto significa que el navegador almacenará en caché estos archivos durante el mayor tiempo posible, lo que reduce considerablemente la cantidad de solicitudes, dado que normalmente hay muchos de estos archivos.

• Las dos últimas configuraciones son para ~image/y ~font/, que son expresiones regulares que coincidirán con todos los tipos de archivos que contienen image/o font/en su nombre de tipo MIME image/jpg(como , image/pngo ). Al igual que las hojas de estilo, tanto las imágenes como las fuentes web de los sitios web se pueden almacenar en caché de forma segura para acelerar los tiempos de carga de las páginas, por lo que también font/woff2configuramos esto en .max

Nota: Estos son solo algunos ejemplos de los tipos MIME más comunes que se utilizan en los sitios web. Puede familiarizarse con la lista más amplia de dichos tipos en el sitio Tipos MIME comunes y agregar otros al mapa que puedan resultarle útiles en su caso.

Dentro del bloque de servidor, la expiresdirectiva (una parte del módulo de encabezados) establece los encabezados de control de almacenamiento en caché. Utilice el valor de la $expiresvariable establecida en el mapa. De esta manera, los encabezados resultantes serán diferentes según el tipo de archivo.

Guarde y cierre el archivo para salir.

Para habilitar la nueva configuración, reinicie Nginx:

sudo systemctl restart nginx

A continuación, asegurémonos de que nuestra nueva configuración funcione.

Paso 4: Prueba del almacenamiento en caché del navegador

Ejecute la misma solicitud que antes para el archivo HTML de prueba:

curl -I http://localhost/test.html

Esta vez la respuesta será diferente. Verás dos encabezados de respuesta HTTP adicionales:

OutputHTTP/1.1 200 OKServer: nginx/1.18.0 (Ubuntu)Date: Tue, 02 Feb 2021 19:10:13 GMTContent-Type: text/htmlContent-Length: 1024Last-Modified: Tue, 02 Feb 2021 19:02:58 GMTConnection: keep-aliveETag: "6019a1e2-400"Expires: Thu, 01 Jan 1970 00:00:01 GMTCache-Control: no-cacheAccept-Ranges: bytes

El Expiresencabezado muestra una fecha en el pasado y Cache-Controlse configura con no-cache, lo que le indica al navegador que siempre pregunta al servidor si hay una versión más nueva del archivo (usando el ETagencabezado, como antes).

Encontrará una diferencia en la respuesta con el archivo de imagen de prueba:

curl -I http://localhost/test.jpg

Tenga en cuenta el nuevo resultado:

OutputHTTP/1.1 200 OKServer: nginx/1.18.0 (Ubuntu)Date: Tue, 02 Feb 2021 19:10:42 GMTContent-Type: image/jpegContent-Length: 1024Last-Modified: Tue, 02 Feb 2021 19:03:02 GMTConnection: keep-aliveETag: "6019a1e6-400"Expires: Thu, 31 Dec 2037 23:55:55 GMTCache-Control: max-age=315360000Accept-Ranges: bytes

En este caso, Expiresmuestra la fecha en un futuro lejano y Cache-Controlcontiene max-ageinformación que le indica al navegador durante cuánto tiempo puede almacenar en caché el archivo en segundos. Esto le indica al navegador que almacene en caché la imagen descargada durante el mayor tiempo posible, por lo que cualquier aparición posterior de esta imagen utilizará la memoria caché local y no enviará ninguna solicitud al servidor.

El resultado debería ser similar para ambos test.js, test.cssya que tanto los archivos JavaScript como las hojas de estilo también están configurados con encabezados de almacenamiento en caché.

Esto significa que los encabezados de control de caché se han configurado correctamente y que su sitio web se beneficiará de la mejora en el rendimiento y de la reducción de solicitudes al servidor gracias al almacenamiento en caché del navegador. Debe personalizar la configuración de almacenamiento en caché en función del contenido de su sitio web, pero los valores predeterminados de este artículo son un buen punto de partida.

Conclusión

El módulo de encabezados se puede utilizar para agregar cualquier encabezado arbitrario a la respuesta, pero configurar correctamente los encabezados de control de almacenamiento en caché es una de sus aplicaciones más útiles. Aumenta el rendimiento para los usuarios del sitio web, especialmente en redes con mayor latencia, como las redes de operadores móviles. También puede generar mejores resultados en los motores de búsqueda que tienen en cuenta las pruebas de velocidad en sus resultados. Configurar encabezados de almacenamiento en caché del navegador es una recomendación fundamental de PageSpeed ​​​​de Google y otras herramientas de prueba de rendimiento similares.

Puede encontrar información más detallada sobre el módulo de encabezados en la documentación oficial del módulo de encabezados de Nginx.