Introducción

En la actualidad, la velocidad de carga de un sitio web es un factor determinante en el éxito de cualquier proyecto en la web. La optimización de la caché es una técnica que puede ayudar a reducir el tiempo de carga de una página web. En este artículo, te explicaremos qué es la caché y cómo puedes optimizarla para mejorar el rendimiento de tu sitio web.

¿Qué es la caché?

La caché es una memoria temporal que se utiliza para almacenar los recursos de una página web. Cuando visitas un sitio web por primera vez, tu navegador descarga todos los recursos necesarios para poder visualizar la página. Estos recursos pueden incluir imágenes, hojas de estilo, scripts, etc. Si vuelves a visitar la misma página web, tu navegador ya habrá descargado la mayoría de los recursos necesarios para visualizarla. En este caso, tu navegador utilizará la caché para cargar estos recursos desde tu ordenador en lugar de descargarlos nuevamente del servidor.

Beneficios de la caché

• Mejora la velocidad de carga de la página web: Al utilizar la caché, los recursos se cargan más rápidamente al haber sido almacenados previamente en tu ordenador.
• Reduce el uso de ancho de banda: Al no tener que descargar los recursos desde el servidor cada vez que se visita la página, se reduce el uso de ancho de banda.
• Reduce la carga del servidor: Al reducir el número de solicitudes al servidor, se alivia la carga del servidor y permite una mejor escalabilidad del sitio web.

¿Cómo funciona la caché?

Para que la caché funcione correctamente necesitas tener activada su configuración en tu servidor web y en tu navegador. Cuando visitas una página web por primera vez, tu navegador solicita los recursos necesarios para visualizarla. Si está configurado correctamente, el servidor web agregará información en la cabecera de la respuesta HTTP. Esta información le indica al navegador que debe almacenar en caché los recursos durante un período determinado de tiempo.

Cuando vuelves a visitar la misma página web, tu navegador busca esos recursos en su caché antes de solicitarlos al servidor web de nuevo. Si los recursos ya se encuentran en caché, tu navegador los carga directamente desde tu ordenador. De lo contrario, tu navegador deberá solicitarlos al servidor web.

Tipos de caché

Existen dos tipos de caché utilizados en los sitios web:

• Caché del navegador: Esta caché se encuentra almacenada en tu navegador web y contiene los recursos que tu navegador ha descargado previamente.
• Caché del servidor: Esta caché se encuentra almacenada en el servidor web y contiene los recursos que son comunes para todos los usuarios que visitan el sitio web. El servidor web puede almacenar en caché la respuesta de la solicitud HTTP para entregarla más rápidamente en siguientes solicitudes.

Optimización de la caché en el servidor web

Para optimizar la caché en el servidor web, es necesario realizar cambios en la configuración de tu servidor web. Si estás utilizando Apache, puedes hacerlo agregando reglas al archivo .htaccess de tu sitio web. Si estás utilizando Nginx, puedes hacerlo agregando directivas al archivo de configuración.

Configurar la caché en Apache

Para habilitar la caché en Apache, debes agregar las siguientes líneas de código al archivo .htaccess de tu sitio web:

  Header set Cache-Control "max-age=31536000, public"
  FileETag None

La primera línea agrega la cabecera "Cache-Control" a la respuesta HTTP. Esta cabecera indica cuándo los contenidos de una página web expiren y, por lo tanto, deben ser actualizados. En este caso, se ha establecido un tiempo de caché de un año.

La segunda línea desactiva la cabecera "ETag". Esta cabecera se utiliza para comprobar si el recurso ha cambiado, lo que puede ser útil en algunos casos, pero también introduce un mayor tiempo de carga en la página web.

Configurar la caché en Nginx

Para habilitar la caché en Nginx, debes agregar las siguientes directivas al archivo de configuración:

  proxy_cache_path /var/cache/nginx levels=1:2 keys_zone=my_cache:10m inactive=60m;
  proxy_cache_key "$scheme$request_method$host$request_uri";
  proxy_cache_valid 200 60m;
  proxy_cache_valid 404 1m;

La primera línea establece la ruta donde se almacenarán los archivos de cache, así como los parámetros de configuración necesarios.

La segunda línea establece la clave para el almacenamiento de la caché.

La tercera línea establece el tiempo de vida de los elementos en caché una vez que han sido almacenados (en este caso, 60 minutos para respuestas exitosas del servidor).

La cuarta línea establece el tiempo de vida de los elementos en caché para errores 404.

Optimización de la caché en el navegador

Para optimizar la caché en el navegador, es necesario agregar la información relevante en la cabecera de la respuesta HTTP.

Configurar la caché en PHP

En PHP, puedes establecer la caché utilizando la función header(). La siguiente línea de código establece el tiempo de caché a 365 días:

  header('Cache-Control: public, max-age=31536000');

La clave es 'public', lo que indica que el recurso se almacene en la caché pública del navegador. La duración de la caché se establece en segundos utilizando la clave 'max-age'.

Configuración de la caché en HTML

En HTML, es necesario agregar información en la etiqueta '' de la página para establecer la caché. La siguiente línea de código establece la duración de la caché en un año:

  <head>
  <meta http-equiv="cache-control" content="public, max-age=31536000">
  </head>

La clave es la misma que en PHP, 'public' indica que el recurso se almacene en la caché pública del navegador y, después, la duración de esta se establece en segundos utilizando la clave 'max-age'.

Conclusión

La optimización de la caché es una técnica muy importante para mejorar el tiempo de carga de tu sitio web. Al implementar una caché en el servidor web y en el navegador, los recursos de una página se pueden almacenar temporalmente para que se carguen más rápido la próxima vez que el usuario acceda a ellos. Si optimizas la caché, disfrutarás de una página más rápida y de una experiencia de usuario mejorada.