equisd

Qué es Cache-Control?

Cache-Control es una cabecera HTTP que define la cantidad de tiempo y la forma en que un archivo se almacenará en cache.

Este archivo explicará como usar usar cache-control, que significan los valores y como hacer que funcione en tu página web.

La mayoría de paginas web modernas y rápidas usan cache-control para aprovechar el almacenamiento en cache del navegador.

Contenido de esta guía:

Fundamentos de cache-control

Lo principal que debemos saber de cache-control es que define el tiempo en que un archivo será almacenado en cache y la forma en que el archivo será almacenado.

Cache-Control: max-age=2592000, public

Cuando un archivo es consumido por un navegador las cabeceras HTTP también son consumidas. Es así que cuando la cabecera cache-control esta presente el navegador respetara los valores que esta almacena.

Si el navegador ve que el archivo debe ser almacenado por 5 minutos, este será almacenado por 5 minutos, así mismo el archivo no será descargado de la nube mientras duren los 5 minutos.

Un ejemplo podría ser el logo de tu sitio. Si un visitante ingresa a una de tus paginas, en primera instancia el logo se descargara de la nube, consumiendo así recursos de internet. En ese sentido si el usuario se dirige a otra de las paginas del mismo, el logo no volverá a descargarse. En su lugar el navegador usara la versión cacheada ahorrando recurso de internet.

Qué es max-age?

Usando max-age

Un ejemplo de código de max-age luce como lo siguiente:

max-age=2592000

Max-age se considera en segundos, aquí algunos ejemplos:

.htaccess

Esta es la opción más usada por los programadores, para añadir cabeceras HTTP.

Un ejemplo de .htaccess

El código mas básico para definir la cabecera cache-control con .htaccess es:

Header set Cache-Control "max-age=2628000, public"

Sin embargo este código no permite definir max-age diferentes por cada tipo de archivo.

Para definir diferentes cabeceras cache-control para diferentes tipos de archivos, podemos usar lo siguiente:

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

Este código básicamente dice lo siguiente:

Si el tipo de archivo es css, jpeg, jpg, png, gif, js, o ico entonces aplica la regla cache-control.

Aquí otro ejemplo cacheando imágenes por un año y cacheando archivos css y js por un mes.

# Imagenes almacendas por un año
<filesMatch ".(jpg|jpeg|png|gif|ico)$">
Header set Cache-Control "max-age=31536000, public"
</filesMatch>
# Almacenando js y css por un mes
<filesMatch ".(css|js)$">
Header set Cache-Control "max-age=2628000, public"
</filesMatch>

NGINX

Usando la directiva expires puedes agregar instrucciones de cacheo a tu servidor o a una ruta en especifico.

location ~* .(jpg|jpeg|png|gif|ico|css|js)$ {
expires 365d;
}

El código de arriba aplica para todos los archivos que se listan. Siendo así que puedes remover algunos y conservar otros.

Puedes crear bloques de código para tipos de archivo especifico.

Si te interesa saber más del tema te invito a revisar documentación de Mozilla.

También te dejo un enlace donde explico como funciona un hosting.

Salir de la versión móvil