¿Cómo funciona la memoria caché del navegador?

La memoria caché del navegador es un mecanismo utilizado por los navegadores para almacenar localmente los recursos de la página web. Esto agrega ganancias de rendimiento, minimiza el consumo de ancho de banda y, en general, crea una experiencia más ágil. En este artículo, explicamos cómo funciona el almacenamiento en caché del navegador y cómo implementarlo en su sitio web.

¿Qué es la caché del navegador?

El caché es un componente de software o hardware que se utiliza para almacenar temporalmente valores para un acceso futuro más rápido. El caché del navegador es una pequeña base de datos de archivos que contiene recursos de páginas web descargados, como imágenes, videos, CSS, Javascript, etc. La idea básica detrás de esto es la siguiente:

El navegador solicita algún contenido del servidor web. Si el contenido no está en la memoria caché del navegador, se recupera directamente del servidor web. Si el contenido se almacenó previamente en caché, el navegador pasa por alto el servidor y carga el contenido directamente desde su caché.

El contenido se considera obsoleto dependiendo de si el contenido almacenado en caché ha caducado o no. Fresco, por otro lado, significa que el contenido no ha pasado su fecha de vencimiento y se puede servir directamente desde el caché del navegador sin involucrar al servidor.

El término validación se refiere al contenido que debe verificarse con la versión más reciente que posee el servidor. En definitiva, para determinar si el contenido está obsoleto o no. La invalidación se produce cuando el contenido se ha eliminado de la memoria caché antes de que pase la fecha de caducidad. Esto puede ser forzado por el servidor, en los casos en que el contenido ha cambiado, y el navegador necesita tener la versión más reciente para no presentar ningún problema.

Los desarrolladores y administradores web pueden aprovechar el almacenamiento en caché del navegador mediante el uso de encabezados HTTP específicos. Estos encabezados indican al navegador web cuándo almacenar en caché un recurso, cuándo no hacerlo y durante cuánto tiempo. El uso de encabezados relacionados con la memoria caché HTTP puede ser frustrante a menudo, ya que existe una gran superposición con los encabezados en las diversas reencarnaciones del protocolo HTTP. Agregue a la mezcla cosas como el extraño proxy web en el medio, navegadores antiguos, políticas e implementaciones de almacenamiento en caché en conflicto (por ejemplo, diferentes complementos de WordPress) y puede convertirse rápidamente en un dolor de cabeza.

Encabezados de almacenamiento en caché del navegador

El conjunto de reglas que definen qué se puede almacenar en caché o no y durante cuánto tiempo se denomina política de almacenamiento en caché. Esto lo implementa el propietario del sitio web mediante el uso de encabezados de respuesta de almacenamiento en caché. Aunque esto se puede lograr de muchas maneras diferentes , probablemente debería preocuparse solo por el control de caché, al principio.

control de caché

El encabezado de control de caché se introdujo en HTTP/1.1 y se considera la implementación más moderna que existe. Hay varios valores diferentes que puede usar, dependiendo de cómo desee que se comporten los navegadores. Haciéndolo bastante versátil. A continuación se muestra una lista de directivas de Cache-Control:

• sin caché
  Le indica a su navegador web que no consulte el caché de inmediato, sino que valide el contenido contra el servidor. Si está fresco, se puede servir desde el caché.
• sin tienda
  Le dice al navegador que no almacene en caché el contenido de ninguna manera. Se usa principalmente cuando se trata de datos confidenciales o con datos que cambian con frecuencia.
• Público
  Marca el contenido como público, lo que significa que el navegador y cualquier intermediario (como proxies, etc.) pueden almacenarlo en caché.
• Privado
  Se utiliza para marcar el contenido como privado, lo que significa que solo puede ser almacenado en caché por el navegador, y no por proxies intermediarios y demás. Esto generalmente se refiere a datos relacionados con el usuario.
• Max-edad
  Max-age representa el tiempo máximo en segundos que un contenido puede permanecer en el caché del navegador antes de que el cliente necesite revalidarlo. A diferencia del encabezado Expires que visitaremos en breve, max-age define un valor relativo en segundos desde el momento en que se almacenó en caché el contenido, y no una fecha de vencimiento absoluta.
• S-maxage
  Esto es similar a max-age pero solo se usa para cachés intermedias.
• Debe revalidar
  Obliga al navegador a revalidar el contenido cada vez que lo necesita, en lugar de servirlo directamente desde la memoria caché del navegador.
  Esto es útil en caso de que se produzca una interrupción de la red.
• Proxy-revalidar
  Similar a must-revalidate, pero solo se aplica a cachés intermedias.
• sin transformación
  Indica al navegador que no transforme el contenido recibido del servidor de ninguna manera (generalmente compresión, etc.).

Etiqueta

El encabezado de respuesta Etag se utiliza para identificar un recurso específico. Cada vez que cambia un determinado recurso, se genera un nuevo Etag. De esta manera, se ahorra ancho de banda, porque el servidor web no necesita dar una respuesta completa si el Etag no ha cambiado. En consecuencia, el encabezado de Etag está habilitado de forma predeterminada en Nginx y Apache, y los valores de Etag se generan automáticamente, por lo que no tiene que especificar nada.

Aloje su sitio web con Pressidium

GARANTÍA DE DEVOLUCIÓN DE DINERO DE 60 DÍAS

VER NUESTROS PLANES

Caduca

Esto se introdujo en HTTP/1.0 y define una fecha específica en el futuro en la que el contenido se considerará obsoleto. Es efectivamente una fecha de consumo preferente para el contenido. Por ejemplo, caduca: jueves 25 de mayo de 2017 a las 12:30:00 GMT

pragma

Este es un encabezado HTTP/1.0 algo desactualizado que se usa principalmente para la compatibilidad con versiones anteriores. Insertar Pragma: no-cache hará que su navegador se comporte de manera similar a Cache-Control: no-cache .

Cómo implementar una política de almacenamiento en caché en su sitio web

Hay dos formas de implementar una política de almacenamiento en caché en su sitio web. El primero es definir los encabezados de respuesta de almacenamiento en caché en la configuración del servidor web. La segunda es hacerlo directamente dentro de PHP. A continuación se muestran ejemplos de los dos servidores web más populares, Apache2 y Nginx:

apache2

<filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
Header set Cache-Control "max-age=84600, public"
</filesMatch>

Nginx

location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
expires 365d;
add_header Cache-Control "public" ;
}

Como puede ver, es bastante sencillo. En el primer ejemplo, usamos la directiva FileMatch de apache2 para comparar con un conjunto específico de tipos de archivos (.ico, .pdf, etc.) y hacerlos públicos, con una antigüedad máxima de 84600 segundos. En el segundo, nuevamente comparamos ciertos tipos de archivos usando la directiva de ubicación de nginx e incluimos una edad máxima de 365 días. También los definimos como "públicos" usando la cláusula de agregar encabezado.

PHP

Si desea agregar encabezados de respuesta directamente a su código, simplemente use el comando de encabezado de PHP.

<?php
header("Cache-Control: no-cache");
header("Expires: Sat, 26 Jul 1997 05:00:00 GMT");
header("Cache-Control: max-age= 604800");
?>

Cómo probar para ver si funciona

Puede probar fácilmente para ver las reglas de almacenamiento en caché de su navegador, utilizando, por ejemplo, la consola web de Firefox o las herramientas para desarrolladores de Chrome:

1. Haga clic en el icono de la hamburguesa en la parte superior derecha.
2. Seleccione Más herramientas > Herramientas para desarrolladores
3. Ingrese su URL en la barra de direcciones y presione Enter.

Debería ver una lista de solicitudes a medida que se carga su URL. Seleccione un recurso haciendo clic en él. Inspeccione los encabezados de respuesta a la derecha y, en particular, el código de estado. Imprime el código HTTP 200 pero indica entre paréntesis que es de memoria caché.

Esto significa que el recurso se cargó automáticamente desde el almacén de caché local, en lugar de solicitarlo desde el servidor.

En los casos en los que tenga una cláusula de "revalidación obligatoria" en su encabezado de Cache-Control, el código de estado será 304 (No modificado). Esto significa que su navegador revalidó el recurso contra el servidor y el servidor respondió que el contenido no ha cambiado, por lo que se puede servir desde el caché del navegador.

Proceda a deshabilitar el caché marcando la casilla de verificación Deshabilitar caché y presionando Recargar.

En este caso, verá que el Código de estado es 200 sin ninguna indicación de que usó el caché. El navegador solicitó el recurso del servidor web y el servidor web respondió entregando una copia nueva.

Conclusión

El almacenamiento en caché del navegador y las políticas de almacenamiento en caché pueden volverse bastante complicados. Pero comenzar a experimentar con Cache-Control como hemos demostrado es sencillo. La mayoría de las veces, implementar una política de almacenamiento en caché "genérica" ​​para activos estáticos es suficiente para marcar la diferencia en el rendimiento de su sitio web. Sin embargo, agrega una capa adicional de "preocupación" además de tantas otras cosas, y creemos que no debería ser así. Síganos en nuestra próxima publicación, donde mostraremos cómo implementamos el almacenamiento en caché del navegador en Pressidium que hace que todas esas preocupaciones desaparezcan.