Menú


Cache

La memoria y los sistemas de cache, tratan de optimizar al máximo la velocidad de carga de la web, entregando los archivos que no sufren cambios, desde el propio dispositivo del visitante. Es decir, cada vez que visitamos un sitio web, algunos de sus archivos, imágenes, css, js..., son almacenados de forma temporal en nuestro dispositivo para que la próxima vez que visitemos esa página, se carguen desde nuestra máquina y no desde el servidor. Esto obviamente reduce de forma muy importante el tiempo de carga. Obviamente hay que planificar y configurar que archivos serán almacenados en memoria y durante cuanto tiempo.

Planificar y dimensionar los archivos y los tiempos

Este es el secreto de un buen sistema de cache. Saber que archivos queremos almacenar en memoria y durante cuanto tiempo. Estos criterios debes establecerse según la posibilidad de que incluyan cambios y con que frecuencia. Nosotros lo hacemos así:

  • Archivos que se modificarán a largo plazo o nunca: En este caso, nosotros establecemos un año de permanencia en la memoria. Normalmente son imágenes y ficheros de mucho peso: css, js, videos, audios...
  • Archivos que se modificarán a corto plazo: En este caso, establecemos un mes de almacenaje en el dispositivo. Estos archivos, deben ser archivos más dinamicos. Imagénes de perfiles por ejemplo.
  • Archivos que cambian permanentemente: Estos archvios no deben de almacenarse o de hacerlo que sea poco tiempo, 1 día, o unas horas. Estos debería ser los archivos más dinámicos. Html, php, pl, txt... Fijaros que normalmente son scripts y cgis.

Si diseñamos bien este punto, la optimización de nuestra página sufrirá una mejora importante, que notarán nuestros usuarios.

¿Como se configura?

Los CMS como Wordpress, Prestashop, Magento..., ya llevan integrados su propio sistema y su propia configuración. Solo tenemos que acceder al panel de control para ajustar los parámetros. Si la página web está programada a medida, nosotros utilizamos el archivo .htaccess para la configuración.

# 1 YEAR: expira en 1 año
<FilesMatch "\.(flv|ico|pdf|avi|mov|ppt|doc)$">
Header set Cache-Control "max-age=31536000, public"
</FilesMatch>

# 1 YEAR: expira en 1 año
<FilesMatch "\.(mp3|wmv|wav|mp4)$">
Header set Cache-Control "max-age=31536000, public"
</FilesMatch>

# 1 MONTH: expira en 1 mes
<FilesMatch "\.(swf|css|js|cur|svg)$">
Header set Cache-Control "max-age=31536000, public"
</FilesMatch>

# 1 MONTH: expira en 1 mes
<FilesMatch "\.(jpg|jpeg|JPG|png|gif)$">
Header set Cache-Control "max-age=31536000, public"
</FilesMatch>

# 3 HOUR: Cache que expira en 3 hora
<FilesMatch "\.(txt|xml)$">
Header set Cache-Control "max-age=18000"
</FilesMatch>

# NEVER CACHE - notice the extra directives: Sin almacenaje
<FilesMatch "\.(html|htm|php|cgi|pl)$">
Header set Cache-Control "max-age=0, private, no-store, no-cache, must-revalidate"
</FilesMatch>

Trucos y excepciones

En algunos casos, tenemos la necesidad de que algunos tipos de archivos no siempre cumplan las mismas condiciones de almacenaje. Supongamos que tenemos la web de mascotas.es, y definimos que las imágenes .jpg y los .css deben de permanecer cacheadas 1 año. Durante un año, siempre que el usuario no borre su memoria, se servirán los archivos .jpg y .css que se sirvieron en la primera visita a la web.

Supongamos ahora que por mejoras o modificaciones temporales, necesitamos modificar algunas imágenes y el archivo .css principal. En este caso, tenemos dos soluciones para que los antiguos usuarios que visiten la web, carguen los nuevos archivos y no los almacenados en su dispositivo.

  • Cambiar el nombre de las imágenes y del archivo .css: Si cambiamos los nombres de los archivos a alguno que no ha existido nunca, el archivo será cargado de nuevo en el momento que los usuarios carguen las páginas y verán los nuevos cambios sin problema.
  • Trabajar con versiones de archivos: En este caso lo que hacemos es añadir al final de las llamadas a los archivos, un parametro que define su versión. Nosotros trabajamos con fechas en formato yyyymmdd.

Os mostramos unos ejemplos, que muestran como aplicar el segundo punto anterior. Sistema de versiones en el nombre.

Supongamos que en la web mascotas.es, tenemos un archivo .css principal llamado custom.css. Y sabemos que este archivo va a cambiar a menudo y de forma muy diferente a los demás .css. Entonces nosotros hacemos la llamada de la siguiente forma.

#Versión del archivo de 18/04/2020
<link rel="stylesheet" href="/css/custom.css?20200418" type="text/css" />

De esta forma decimos que la última modificación del CSS se hizo el 18/04/2020 y mientras este dato no cambie, la política de cacheado de este archivo se ajustará a las de los demas .css. Supongamos que al cabo de una semana, hacemos un cambio en este archivo. Solo tenemos que ir y cambiar la fecha de la versión quedando de la siguiente forma:

#Versión del archivo de 25/04/2020
<link rel="stylesheet" href="/css/custom.css?20200425" type="text/css" />

Esta llamada es interpretada como una llamada a un archivo distinto porque la url es distinta.

Supongamos ahora que tenemos una imagen llamada cabecera.jpg, que cambia cada día. Tenemos la opción de cargar a diario una imagen distinta o utilizar el mismo nombre y el parametro de versiones de forma automática. Entonces la llamada en PHP quedaría de la siguiente forma:

#Versión del archivo que cambia cada día
<img src="/img/cabecera.jpg?<PHP echo date('Ymd');>" />

De esta forma, se añade cada día la nueva fecha como parametro de la imagen y su nueva versión es cargada sin problema a diario.

Artículos relacionados