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, publicCuando 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?
- Define la cantidad de tiempo que una imagen debe almacenarse en cache.
- La directiva de respuesta “max-age” indica que un archivo cacheado se considera obsoleto después de que el tiempo indicado sea mayor en segundos.
Usando max-age
Un ejemplo de código de max-age luce como lo siguiente:
max-age=2592000Max-age se considera en segundos, aquí algunos ejemplos:
- 1 minuto: max-age=60
- 1 hora: max-age=3600
- 1 día: max-age=86400
- 1 semana: max-age=604800
- 1 mes: max-age=2628000
- 1 año: max-age=31536000
.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.