Cómo configurar la expiración de caché en .htaccess

Configurar la expiración de caché en el archivo .htaccess le indica al navegador cuánto tiempo debe guardar recursos como imágenes, CSS y JavaScript antes de volver a descargarlos. El resultado es inmediato: las visitas repetidas cargan mucho más rápido y se reduce el consumo de ancho de banda.

Esta guía muestra exactamente cómo hacerlo en un servidor Apache, con ejemplos listos para copiar y pegar.

¿Por qué importa la caché del navegador?

Cuando alguien visita tu sitio por primera vez, el navegador descarga todo: HTML, hojas de estilo, scripts e imágenes. En la segunda visita podría reutilizar esos archivos desde su caché local — si tu servidor le dice que es seguro hacerlo.

Sin encabezados de caché, el navegador asume que todo puede haber cambiado y re-descarga cada recurso. Ese comportamiento es el que corregimos aquí.

Las herramientas de análisis como GTmetrix o PageSpeed Insights penalizan la ausencia de encabezados de caché con recomendaciones del tipo "Serve static assets with an efficient cache policy". Si quieres saber más sobre métricas de rendimiento, consulta nuestra guía de optimización web.

Requisitos previos

• Acceso al archivo .htaccess de tu dominio (raíz del sitio o carpeta public_html).
• Servidor Apache con los módulos mod_expires y mod_headers activos. En la mayoría de los hostings compartidos ya están habilitados.
• Permisos para editar archivos vía cPanel File Manager, FTP o SSH.

Bloque .htaccess para expiración de caché

Copia este bloque y pégalo al final de tu .htaccess existente (no sobreescribas las directivas que ya tienes):

# ── Expiración de caché del navegador ──────────────────────────
<IfModule mod_expires.c>
  ExpiresActive On

  # Documentos HTML
  ExpiresByType text/html                 "access plus 0 seconds"

  # Hojas de estilo
  ExpiresByType text/css                  "access plus 1 year"

  # JavaScript
  ExpiresByType application/javascript    "access plus 1 year"
  ExpiresByType text/javascript           "access plus 1 year"

  # Imágenes
  ExpiresByType image/jpeg                "access plus 1 year"
  ExpiresByType image/png                 "access plus 1 year"
  ExpiresByType image/gif                 "access plus 1 year"
  ExpiresByType image/webp                "access plus 1 year"
  ExpiresByType image/svg+xml             "access plus 1 year"
  ExpiresByType image/x-icon              "access plus 1 year"

  # Fuentes web
  ExpiresByType font/woff2                "access plus 1 year"
  ExpiresByType font/woff                 "access plus 1 year"
  ExpiresByType application/font-woff     "access plus 1 year"

  # PDF y otros documentos
  ExpiresByType application/pdf           "access plus 1 month"

  # JSON / XML (feeds, APIs)
  ExpiresByType application/json          "access plus 0 seconds"
  ExpiresByType application/xml           "access plus 0 seconds"

  # Valor por defecto para tipos no listados
  ExpiresDefault                          "access plus 1 month"
</IfModule>

# ── Cache-Control (complementa mod_expires) ─────────────────────
<IfModule mod_headers.c>
  <FilesMatch "\.(ico|jpg|jpeg|png|gif|webp|svg|css|js|woff|woff2)$">
    Header set Cache-Control "public, max-age=31536000, immutable"
  </FilesMatch>
  <FilesMatch "\.(html|htm|php)$">
    Header set Cache-Control "no-cache, must-revalidate"
  </FilesMatch>
</IfModule>
# ───────────────────────────────────────────────────────────────

Entendiendo las directivas clave

ExpiresActive On

Activa el módulo mod_expires. Sin esta línea, todo lo demás es ignorado.

ExpiresByType

Asigna un tiempo de expiración por tipo MIME. El valor "access plus 1 year" es el máximo práctico recomendado para recursos estáticos que no cambian (o que cambian con un nuevo nombre de archivo).

Cache-Control: immutable

Le indica al navegador que el archivo no cambiará durante su vida útil en caché. Evita incluso la petición de revalidación condicional (If-None-Match). Úsalo solo en recursos que versionas (CSS y JS con hash en el nombre).

no-cache vs no-store

Cómo verificar que la caché funciona

Después de guardar el .htaccess, verifica que los encabezados se están enviando:

1. Abre las DevTools del navegador (F12).
2. Ve a la pestaña Network y recarga la página (Ctrl+Shift+R para forzar sin caché).
3. Haz clic en cualquier recurso estático (imagen, CSS, JS).
4. En la sección Response Headers verifica que aparezca Cache-Control y/o Expires con los valores que configuraste.

También puedes correr una nueva prueba en GTmetrix o PageSpeed Insights: la advertencia "Leverage browser caching" o "Serve static assets with an efficient cache policy" debería desaparecer o reducirse significativamente.

Si necesitas una revisión completa de tu configuración Apache y política de caché, el equipo de elenlace.com puede auditarla y optimizarla como parte de un plan de rendimiento integral.

Consideraciones importantes

• Versiona tus archivos estáticos. Si cacheas CSS y JS por 1 año y luego los modificas, los usuarios verán la versión antigua hasta que expire. Solución: añade un parámetro de versión al nombre (style.v2.css) o usa un query string (style.css?v=2).
• No cachees HTML. Las páginas HTML deben estar siempre frescas para reflejar cambios de contenido y precio. Por eso el bloque anterior usa "access plus 0 seconds" para text/html.
• Datos de sesión y carrito. Usa no-store para cualquier respuesta que contenga información personal del usuario.
• WordPress y otros CMS. Muchos plugins de caché (WP Rocket, W3 Total Cache) ya añaden estas directivas automáticamente. Evita duplicarlas para no generar conflictos.

Conclusiones clave

• Configurar la expiración de caché en .htaccess es una de las optimizaciones de rendimiento más sencillas y de mayor impacto.
• Usa mod_expires para asignar tiempos por tipo MIME y mod_headers para el encabezado Cache-Control.
• Un año es el tiempo de expiración máximo recomendado para recursos estáticos; combínalo con versionado de archivos.
• Nunca cachees HTML dinámico, datos de sesión ni respuestas de API en tiempo real.
• Verifica el resultado con las DevTools del navegador o con una herramienta de análisis de velocidad.

¿Quieres que alguien implemente y valide esto por ti? Los especialistas de elenlace.com configuran la política de caché, el versionado de activos y el resto de optimizaciones Apache para que tu sitio pase la auditoría de rendimiento de una vez.

Preguntas frecuentes

¿Puedo romper mi sitio al editar el .htaccess?

Sí, es posible si hay un error de sintaxis. Siempre haz una copia de seguridad del archivo antes de editarlo. Un error en .htaccess produce un error HTTP 500. Si eso ocurre, restaura la copia y revisa la sintaxis línea por línea.

¿Qué pasa si mod_expires no está disponible en mi hosting?

Puedes usar solo el bloque de mod_headers con Cache-Control, que es más ampliamente soportado. Si ninguno funciona, contacta a tu proveedor de hosting para que habilite los módulos necesarios.

¿La caché del navegador afecta el SEO?

Sí, positivamente. Google incluye la velocidad de carga y los Core Web Vitals como factor de ranking. Una política de caché correcta reduce el tiempo de carga en visitas repetidas y mejora métricas como el LCP, lo que puede beneficiar tu posicionamiento.

¿Cuánto tiempo tarda en reflejarse el cambio?

El cambio en el servidor es inmediato. Sin embargo, los usuarios que ya tienen los recursos cacheados con la política anterior seguirán usando esa caché hasta que expire. Los nuevos visitantes y quienes limpien su caché verán los nuevos encabezados de inmediato.

Para saber más

Otros proveedores y guías que vale la pena comparar:

• GoDaddy
• HostGator México
• Hostinger