Qué es la caché y los tipos de caché

Qué es la caché y por qué importa

La caché es una técnica que consiste en almacenar una copia de los datos en una ubicación desde la que se pueden recuperar más rápido, en lugar de regenerarlos u obtenerlos de la fuente original cada vez. Imagina la caché como hacer una fotocopia de un documento que usas a menudo en lugar de ir al archivo a por el original cada vez. En el contexto de los sitios web, la caché acelera drásticamente la carga de las páginas, reduce la carga del servidor y mejora la experiencia de usuario. Sin caché, cada solicitud de página requeriría procesar el código PHP, ejecutar consultas a la base de datos y generar el HTML desde cero.

La caché funciona según el principio del almacenamiento temporal de los resultados de operaciones costosas. Cuando un usuario visita una página por primera vez, el servidor la genera por completo y guarda el resultado en la caché. Cada usuario posterior recibe la versión cacheada entregada en una fracción del tiempo. Una página dinámica típica de WordPress sin caché carga en 2 a 5 segundos, mientras que una versión cacheada de la misma página puede entregarse en 50 a 200 milisegundos, una mejora de 10 a 100 veces.

Caché del navegador

Cómo funciona la caché del navegador

La caché del navegador es la forma de caché más sencilla y más cercana, que se produce directamente en el dispositivo del usuario. Cuando visitas un sitio, el navegador descarga el HTML, el CSS, el JavaScript, las imágenes y las fuentes del servidor. La caché del navegador almacena estos archivos localmente, de modo que en tu próxima visita no tenga que descargarlos de nuevo del servidor. Por eso, en la segunda visita una página carga mucho más rápido que la primera vez.

Cabeceras de caché HTTP

El servidor controla la caché del navegador mediante cabeceras HTTP que indican al navegador cuánto tiempo conservar determinados archivos. La cabecera Cache-Control es la más importante y puede contener directivas como max-age, que define cuántos segundos debe conservar el navegador el archivo; no-cache, que indica al navegador que debe comprobar con el servidor antes de usar la caché; no-store, que prohíbe por completo la caché; y public o private, que determinan si los intermediarios como las CDN pueden cachear el contenido.

La cabecera Expires es una forma más antigua de establecer la caché que define la fecha y hora exactas en que la caché expira. La cabecera ETag es un identificador de versión del archivo que el navegador envía al servidor para comprobar si el archivo ha cambiado. Si no ha cambiado, el servidor devuelve una respuesta 304 Not Modified sin contenido, lo que ahorra ancho de banda. La cabecera Last-Modified funciona de forma similar, pero utiliza la fecha de última modificación en lugar de un identificador. En la práctica, utiliza Cache-Control con max-age para los recursos estáticos y ETag para el contenido dinámico.

Configuración práctica

Para una caché del navegador óptima, establece valores de max-age largos para los recursos estáticos que rara vez cambian. Los archivos CSS y JavaScript con nombres versionados como style.v2.css pueden tener un max-age de un año porque, cuando el contenido cambia, cambias el nombre del archivo. Las imágenes pueden tener un max-age de entre 30 días y un año según la frecuencia con la que las cambies. Las páginas HTML deberían tener un max-age corto o no-cache porque el contenido cambia con más frecuencia. En Apache utiliza la directiva mod_expires en el archivo htaccess y en Nginx la directiva expires en la configuración.

Caché del servidor

Caché de opcode

PHP es un lenguaje interpretado, lo que significa que el código PHP se compila a código máquina cada vez que se carga una página. La caché de opcode elimina esta repetición almacenando el código máquina compilado en la memoria. OPcache es un mecanismo integrado de PHP para la caché de opcode que viene con PHP 5.5 y versiones posteriores. Cuando OPcache está activo, el código PHP se compila una sola vez y cada solicitud posterior utiliza el código previamente compilado desde la memoria. Esto puede acelerar las aplicaciones PHP de 2 a 5 veces sin ningún cambio en el código.

Caché de página completa

La caché de página completa o caché de página almacena la salida HTML completa de una página de modo que el código PHP no se ejecuta en absoluto para las solicitudes cacheadas. Esta es la forma de caché más eficaz para WordPress y plataformas CMS similares porque elimina todo el procesamiento PHP y las consultas a la base de datos. El servidor simplemente entrega un archivo HTML estático desde la caché. La caché FastCGI de Nginx y mod_cache de Apache son soluciones a nivel de servidor, mientras que los plugins de WordPress como WP Super Cache y W3 Total Cache implementan la caché de página a nivel de aplicación.

Configuración de la caché del servidor

En Nginx, la directiva fastcgi_cache define una zona de caché en memoria, fastcgi_cache_valid establece cuánto tiempo es válida la caché para los distintos códigos de estado HTTP y fastcgi_cache_key define la clave por la que se identifica la caché, normalmente una combinación del método de solicitud, el host y el URI. Es importante configurar correctamente las excepciones para que no se cacheen las solicitudes POST, las páginas con cookies de usuarios conectados, las páginas de administración ni las páginas con parámetros de consulta. En BeoHosting, nuestros servidores utilizan una configuración optimizada de Nginx con caché FastCGI para el máximo rendimiento de los sitios WordPress.

Caché de objetos

Qué es la caché de objetos

La caché de objetos almacena los resultados de las consultas a la base de datos y otras operaciones costosas en una base de datos rápida en memoria, en lugar de ejecutar esas consultas una y otra vez en cada carga de página. WordPress tiene un mecanismo de caché de objetos integrado, pero de forma predeterminada solo conserva los datos durante una única solicitud. Con una solución de caché de objetos persistente como Redis o Memcached, los objetos cacheados permanecen en memoria entre solicitudes, lo que reduce drásticamente el número de consultas a la base de datos.

Redis como caché de objetos

Redis es una base de datos en memoria que almacena los datos en la RAM con almacenamiento persistente opcional en disco. Para WordPress, el plugin Redis Object Cache conecta la API de caché de objetos de WordPress con un servidor Redis. Un sitio WordPress típico ejecuta de 50 a 200 consultas a la base de datos por página. Con una caché de objetos de Redis, la mayoría de estas consultas se eliminan porque los resultados se leen desde la memoria, que es cientos de veces más rápida que el disco. Redis admite diversas estructuras de datos, como cadenas, hashes, listas, conjuntos y conjuntos ordenados, lo que lo hace extremadamente flexible.

La alternativa Memcached

Memcached es otra solución de caché de objetos popular que es más sencilla que Redis pero suficiente para la mayoría de los sitios WordPress. Memcached almacena los datos exclusivamente en memoria, sin almacenamiento persistente, lo que significa que todos los datos cacheados se pierden al reiniciar el servidor. La ventaja de Memcached es un menor consumo de memoria por clave y un rendimiento muy estable bajo cargas elevadas. Para la mayoría de los sitios, la elección entre Redis y Memcached no supondrá una diferencia de rendimiento perceptible.

Caché de página para CMS

Plugins de caché de WordPress

El ecosistema de WordPress ofrece muchos plugins para la caché de página con diversas características y niveles de complejidad. WP Super Cache es el plugin gratuito más popular, que genera archivos HTML estáticos y los sirve directamente sin procesamiento PHP. W3 Total Cache es una solución más completa que combina caché de página, caché del navegador, caché de objetos e integración con CDN, pero es más compleja de configurar. WP Rocket es un plugin premium que ofrece un excelente equilibrio entre rendimiento y simplicidad, con configuración automática y optimizaciones avanzadas.

Invalidación de la caché

El mayor reto de la caché es la invalidación: cómo y cuándo eliminar la caché obsoleta. Si publicas una nueva entrada del blog pero la caché muestra la versión antigua de la página de inicio, los visitantes no verán el contenido nuevo. Los buenos plugins de caché eliminan automáticamente los archivos de caché pertinentes cuando el contenido cambia. Por ejemplo, cuando publicas una nueva entrada, deberías eliminar la caché de la página de inicio, la caché de la página de la categoría a la que pertenece la entrada, las páginas de archivo por fecha y el sitemap. Conviene evitar el vaciado manual completo de la caché porque provoca una caída temporal del rendimiento mientras la caché se reconstruye.

Caché de CDN

Cómo funciona una CDN

Una red de distribución de contenidos o CDN es una red de servidores distribuidos por todo el mundo que almacena copias de tu sitio y entrega el contenido desde el servidor geográficamente más cercano al visitante. Cuando un visitante de Tokio accede a tu sitio alojado en Madrid, sin una CDN la solicitud viaja a través de medio mundo, añadiendo de 200 a 300 milisegundos de latencia. Con una CDN, el contenido se entrega desde el servidor de la CDN en Tokio o en una región cercana, con una latencia de solo 10 a 30 milisegundos.

Servicios de CDN populares

El servicio de CDN Cloudflare es la CDN más popular, con un plan gratuito que incluye CDN, protección DDoS, certificado SSL y optimizaciones básicas. Cloudflare cuenta con más de 300 centros de datos en todo el mundo, incluidas ubicaciones regionales como Madrid y Barcelona. BunnyCDN es una alternativa económica con pago por uso y un rendimiento excelente. AWS CloudFront, Google Cloud CDN y Azure CDN son soluciones empresariales integradas con plataformas en la nube. Para los sitios WordPress, Cloudflare es la más sencilla de configurar, con un plugin dedicado de WordPress que vacía automáticamente la caché cuando se publica contenido.

Caché en el edge

Las CDN modernas ofrecen capacidades de edge computing en las que la lógica de la aplicación se ejecuta en los servidores de la CDN en lugar de en el servidor de origen. Cloudflare Workers, Vercel Edge Functions y AWS Lambda@Edge permiten ejecutar código en ubicaciones edge para la personalización del contenido, las pruebas A/B, las redirecciones y la autenticación sin comunicarse con el servidor de origen. La caché en el edge combinada con el edge computing puede entregar páginas totalmente personalizadas a la velocidad de la CDN, lo que supone un cambio revolucionario en el rendimiento web.

Estrategias de caché

El patrón cache-aside

Cache-aside o carga diferida es el patrón de caché más común, en el que la aplicación comprueba primero la caché en busca de los datos solicitados. Si los datos existen en la caché, eso se denomina acierto de caché y se devuelven de inmediato. Si no existen, eso es un fallo de caché y la aplicación obtiene los datos de la base de datos, los almacena en la caché y luego se los devuelve al usuario. Este patrón es sencillo de implementar y funciona bien para las aplicaciones con muchas lecturas, donde los datos se leen mucho más a menudo de lo que cambian.

Write-through y write-behind

El patrón write-through escribe los datos simultáneamente en la caché y en la base de datos, lo que garantiza que la caché esté siempre actualizada pero aumenta la latencia de escritura. El patrón write-behind o write-back escribe los datos primero en la caché y los escribe de forma asíncrona en la base de datos, lo que reduce la latencia de escritura pero genera un riesgo de pérdida de datos si el servidor se cae antes de que los datos se escriban en la base de datos. Para la mayoría de las aplicaciones web, cache-aside con una invalidación inteligente es la mejor opción porque equilibra el rendimiento y la coherencia.

Conclusión

La caché es una técnica fundamental para el rendimiento del sitio que funciona en múltiples niveles, desde el navegador hasta la CDN. La caché del navegador elimina las descargas innecesarias de recursos estáticos, la caché del servidor acelera la generación de páginas dinámicas, la caché de objetos reduce la carga de la base de datos, la caché de página elimina el procesamiento PHP y la caché de CDN acerca el contenido a los usuarios de todo el mundo. La combinación de estas técnicas puede acelerar tu sitio de 10 a 100 veces y mejorar considerablemente la experiencia de usuario. En BeoHosting ofrecemos alojamiento optimizado para el rendimiento con OPcache, caché de objetos Redis y soporte para la integración con CDN. Comprueba la velocidad de tu sitio.