Caché del navegador: cómo configurarla bien

Por qué importa

Un visitante que llega a tu portada y luego abre una categoría y dos productos necesita en cada página el logo, las fuentes, el CSS y el JavaScript del tema. Con una buena caché, las páginas siguientes cargan mucho más rápido porque solo se descarga lo nuevo; sin ella, el navegador vuelve a pedir o a descargar esos mismos archivos.

También ahorra transferencia a tu servidor y datos móviles a tus clientes. Es un ajuste que se hace una vez y que no afecta a la primera visita, por eso pesa poco en la nota; pero en tiendas y webs donde se navega por varias páginas, se nota.

Cómo lo comprueba Posiciona

Usamos el análisis de caché de Lighthouse 13 en la prueba móvil de PageSpeed Insights, que lista los archivos estáticos con una caché corta o sin caché y estima cuántos kilobytes se volverían a descargar en una visita repetida. Si no encuentra nada, la nota es 100. Si no, depende de ese ahorro: menos de 50 KB, 90; menos de 200 KB, 70; menos de 500 KB, 50; menos de 1 MB, 30; y 1 MB o más, 10.

En la nota de Velocidad esta comprobación cuenta como “detalle” (peso 1 de 5).

Cómo solucionarlo

Mira en el informe qué archivos tienen caché corta o no tienen, y de qué dominio son. Solo puedes cambiar la caché de los que sirve tu servidor o tu CDN.
Da a imágenes, fuentes, CSS y JavaScript una caché larga, de hasta un año: Cache-Control: max-age=31536000.
Para que una caché larga no te impida actualizar la web, versiona los archivos: cambia el nombre o añade un parámetro fijo al publicar una versión nueva (estilos.css?v=25). Muchos CMS y herramientas de compilación ya lo hacen.
No apliques caché larga al HTML de las páginas: debe poder actualizarse en cuanto cambies un precio o un texto.
No uses parámetros que cambian en cada carga, como una marca de tiempo aleatoria: anulan la caché por completo.
Los scripts de terceros (analítica, píxeles, chats) tienen la caché que decide su proveedor. Si alguno sale muy mal, valora si de verdad necesitas ese servicio.

En Nginx, si sirve los archivos estáticos directamenteNginx

# Caché de un año para archivos estáticos versionados
location ~* \.(?:css|js|woff2|jpe?g|png|gif|webp|avif|svg|ico)$ {
    expires 1y;
}

En .htaccess (Apache)Apache

<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresByType image/jpeg "access plus 1 year"
  ExpiresByType image/png "access plus 1 year"
  ExpiresByType image/webp "access plus 1 year"
  ExpiresByType image/avif "access plus 1 year"
  ExpiresByType image/svg+xml "access plus 1 year"
  ExpiresByType font/woff2 "access plus 1 year"
  ExpiresByType text/css "access plus 1 year"
  ExpiresByType text/javascript "access plus 1 year"
  ExpiresByType application/javascript "access plus 1 year"
</IfModule>

En WordPress

WP Rocket añade reglas de caché del navegador al .htaccess en servidores Apache; en W3 Total Cache y LiteSpeed Cache se activa en sus ajustes de caché del navegador.
WordPress añade a los CSS y JavaScript de temas y plugins un parámetro ?ver= con su versión: al actualizarlos cambia la URL y el navegador descarga el archivo nuevo, así que una caché larga es segura.

En Shopify

En Shopify, los archivos del tema y las imágenes se sirven desde el CDN de Shopify con su propia política de caché, que no necesitas tocar.
Si aparecen avisos, casi siempre son scripts de apps o de servicios externos. Revisa en el informe de qué dominio vienen y consulta al desarrollador de la app o busca otra que cargue mejor.

Preguntas frecuentes

¿Qué pasa si cambio una imagen o el CSS y los visitantes lo tienen en caché?

Seguirán viendo la versión antigua hasta que caduque su caché, salvo que cambie la dirección del archivo. Por eso las cachés largas se combinan con nombres versionados, como logo-v2.png o estilos.css?v=25. WordPress, Shopify y las herramientas de compilación lo hacen solas con sus archivos; si subes archivos a mano, cambia el nombre cuando los sustituyas.

¿Cuánto tiempo de caché es recomendable?

Para archivos estáticos con nombre versionado, la referencia habitual es un año (max-age=31536000), que es lo que proponen las guías de rendimiento web de Google. Para archivos que cambian sin cambiar de nombre, usa algo más corto, como un día o una semana, o no-cache, que obliga al navegador a comprobar si hay versión nueva antes de usar la guardada.