Rendimiento 11 min de lectura

Caché web: Guía completa para principiantes y profesionales

La caché es la optimización con mayor impacto en la velocidad de tu web. Aprende a implementarla correctamente en todos los niveles.

La caché es un mecanismo que almacena copias temporales de los datos o recursos que se solicitan frecuentemente, permitiendo servirlos de forma inmediata sin repetir el proceso de generación. En el contexto web, una buena estrategia de caché puede reducir los tiempos de carga en un 80% o más para visitantes recurrentes.

A pesar de su enorme impacto, la caché es una de las áreas más mal entendidas y peor configuradas de la mayoría de webs. En esta guía te explicamos los diferentes niveles de caché, cómo configurar cada uno y los errores más comunes que debes evitar.

Tipos de caché en una web

La caché web funciona en múltiples niveles, cada uno con sus propias características y beneficios. Entender estos niveles te ayudará a diseñar una estrategia completa que maximice el rendimiento.

Cada nivel de caché resuelve un problema diferente. La caché de navegador evita que el usuario descargue los mismos archivos en cada visita. La caché de servidor evita que el servidor repita operaciones costosas. La caché de CDN acerca el contenido al usuario.

  • Caché de navegador: almacena archivos estáticos (CSS, JS, imágenes) en el dispositivo del usuario
  • Caché de servidor (page cache): almacena páginas HTML ya generadas para servirlas sin procesamiento
  • Caché de objetos: almacena resultados de consultas a base de datos en memoria (Redis, Memcached)
  • Caché de CDN: almacena recursos en servidores distribuidos globalmente
  • Caché de opcode: almacena código PHP compilado para evitar recompilaciones (OPcache)

Caché de navegador: configuración y cabeceras HTTP

La caché de navegador se controla mediante cabeceras HTTP que el servidor envía junto con cada recurso. Estas cabeceras indican al navegador durante cuánto tiempo puede reutilizar un archivo sin volver a solicitarlo al servidor.

Las dos cabeceras más importantes son Cache-Control y ETag. Cache-Control define la política de caché (duración, si el recurso puede ser cacheado por intermediarios, si debe revalidarse). ETag proporciona un identificador único para cada versión del recurso, permitiendo al navegador verificar si ha cambiado sin descargarlo de nuevo.

  • Cache-Control: max-age=31536000 para recursos estáticos con hash en el nombre
  • Cache-Control: no-cache para HTML que debe revalidarse en cada visita
  • ETag: identificador de versión para revalidación eficiente
  • Vary: Accept-Encoding para servir versiones comprimidas correctamente
  • Immutable: indica que el recurso nunca cambiará (ideal con versionado en URL)

Caché de servidor y de página completa

La caché de página completa almacena el HTML generado de cada página para servirlo directamente sin ejecutar código PHP, consultas SQL ni procesos de template. En WordPress, esto puede reducir el TTFB de 800ms a menos de 50ms.

Herramientas como Varnish o LiteSpeed Cache interceptan las solicitudes antes de que lleguen a la aplicación y sirven la versión cacheada. Para WordPress, plugins como WP Super Cache, W3 Total Cache o LiteSpeed Cache gestionan la caché de página de forma transparente.

  • WP Super Cache: sencillo y fiable, genera archivos HTML estáticos
  • LiteSpeed Cache: el más rápido si tu hosting usa LiteSpeed como servidor web
  • W3 Total Cache: muy configurable con soporte para múltiples niveles de caché
  • WP Rocket: solución premium todo-en-uno con excelente soporte

Caché de objetos con Redis y Memcached

La caché de objetos almacena en memoria RAM los resultados de consultas a base de datos y operaciones costosas. Redis y Memcached son las dos tecnologías más populares para este fin.

En un WordPress con WooCommerce, por ejemplo, cada página puede ejecutar decenas de consultas SQL. Con caché de objetos, los resultados se guardan en memoria y se reutilizan en solicitudes posteriores, reduciendo drásticamente la carga de la base de datos.

Redis es generalmente la opción preferida por su persistencia de datos, soporte de estructuras de datos avanzadas y replicación. Memcached es más sencillo pero igualmente efectivo para escenarios básicos de caché.

Invalidación de caché: el desafío principal

Como dice la famosa cita en informática: "Solo hay dos cosas difíciles en ciencias de la computación: la invalidación de caché y nombrar las cosas." Una caché que no se invalida correctamente puede mostrar contenido desactualizado a tus usuarios.

La invalidación debe ser selectiva y precisa. Cuando publicas una nueva entrada de blog, necesitas purgar la caché de esa página, del archivo del blog y posiblemente de la portada, pero no de todas las demás páginas. Una invalidación demasiado agresiva anula los beneficios de la caché.

  • Purgar solo las páginas afectadas cuando se actualiza contenido
  • Usar versionado (query strings o hashes) en archivos CSS y JavaScript
  • Configurar TTL (tiempo de vida) apropiados para cada tipo de contenido
  • Implementar stale-while-revalidate para servir caché expirada mientras se regenera
  • Monitorizar la tasa de aciertos de caché (cache hit ratio) para verificar la eficacia

Errores comunes con la caché

Una caché mal configurada puede causar más problemas de los que resuelve. Desde mostrar contenido desactualizado hasta romper funcionalidades dinámicas, es importante conocer los errores más frecuentes.

  • Cachear páginas con contenido personalizado (carritos de compra, paneles de usuario)
  • No excluir las páginas de checkout y login de la caché de página
  • Configurar tiempos de caché demasiado largos para contenido que cambia frecuentemente
  • No cachear las peticiones de la API REST cuando los datos son estables
  • Activar múltiples plugins de caché simultáneamente, provocando conflictos
  • No limpiar la caché después de actualizaciones del diseño o funcionalidad

Puntos clave

  • La caché actúa en múltiples niveles: navegador, servidor, objetos y CDN
  • La caché de navegador con cabeceras HTTP adecuadas puede eliminar el 80% de las solicitudes repetidas
  • En WordPress, un plugin de caché de página puede reducir el TTFB de 800ms a menos de 50ms
  • Redis como caché de objetos reduce la carga de la base de datos en webs dinámicas
  • La invalidación de caché debe ser selectiva: purgar solo lo necesario, cuando sea necesario
  • Nunca cachear páginas con contenido personalizado como carritos de compra o dashboards

¿Necesitas configurar la caché de tu web correctamente?

Implementamos una estrategia de caché a medida para tu sitio que puede reducir los tiempos de carga en más de un 80%. Configuración profesional sin riesgo de romper nada.

Solicitar presupuesto
Contratar mantenimiento