Cómo especificar la caché del navegador en PageSpeed Insights paso a paso

Especificar la caché del navegador significa decirle al navegador, mediante cabeceras HTTP, durante cuánto tiempo puede guardar en el dispositivo del visitante los archivos estáticos de tu web (imágenes, CSS, JavaScript, fuentes) para no volver a descargarlos en cada visita. En PageSpeed Insights, el aviso que lo señala se llama hoy «Sirve recursos estáticos con una política de caché eficaz».

Cuando escribí este artículo, el mensaje de PageSpeed era «Especificar la caché del navegador», y la solución consistía en pegar un bloque en el archivo .htaccess. La idea de fondo sigue siendo la misma, pero ha cambiado el nombre del aviso, el modo de medir y la forma de hacerlo en WordPress, con plugins, CDN y servidores distintos de Apache.

Aquí tienes qué es la caché del navegador, cuánto influye de verdad en tu puntuación, el código actualizado para Apache y Nginx, las alternativas en WordPress y Cloudflare, y cómo comprobar que funciona.

Qué es la caché del navegador y por qué importa

Cuando alguien visita tu web por primera vez, su navegador descarga el HTML y todos los recursos que este pide: el logo, las hojas de estilo, los scripts, las fuentes y las imágenes. Si la respuesta del servidor incluye cabeceras de caché, el navegador guarda esos archivos y la próxima vez que se necesiten los lee del disco, sin pedirlos de nuevo a la red.

Eso da tres beneficios claros: las páginas siguientes cargan más rápido, el servidor recibe menos peticiones y el visitante gasta menos datos. Es el tipo de mejora que no se nota en la primera visita, pero sí en la segunda, la tercera y en toda la navegación interna.

Hay que ser realista con un detalle: la caché del navegador no mejora la carga de la primera visita, y por tanto no cambia el LCP de un usuario nuevo. Por eso conviene entenderla como una mejora de la experiencia recurrente y no como el truco que arreglará tu puntuación móvil.

Qué dice hoy PageSpeed Insights

PageSpeed Insights usa Lighthouse para el análisis de laboratorio y los datos del informe de experiencia de usuario de Chrome (CrUX) para los datos de campo. La auditoría de caché aparece en el apartado de diagnósticos, con una lista de recursos cuya caché dura poco o no está definida. Según la documentación de Lighthouse, el cálculo estima cuánto ahorrarías en visitas repetidas.

Tres matices importantes para no obsesionarte:

• Es un diagnóstico, no una métrica de Core Web Vitals. Las métricas que mide Google como experiencia de página son LCP, INP y CLS.
• Los recursos de terceros (Google Fonts, analíticas, anuncios) también aparecen en la lista y no los controlas tú.
• Un aviso por un archivo pequeño no vale el tiempo que cuesta resolverlo. Atiende primero los más pesados.

Qué cabeceras intervienen

Para definir la caché se usan estas cabeceras de respuesta:

• Cache-Control. La principal. Con max-age=31536000 indicas que el archivo es válido durante un año; con public permites que lo guarden también cachés intermedias; con immutable evitas revalidaciones en archivos que nunca cambian.
• Expires. La forma antigua de indicar una fecha de caducidad. Cache-Control tiene prioridad sobre ella, pero conviene dejarla por compatibilidad.
• ETag y Last-Modified. Permiten al navegador preguntar al servidor si el archivo ha cambiado y recibir un «no ha cambiado» muy ligero.

Lo ideal es combinarlas: caducidad larga para lo que no cambia y validación para lo demás. La explicación de referencia es la guía de caché HTTP de web.dev.

Cuánto tiempo poner a cada tipo de archivo

No hay un valor único. Estos son los que suelo aplicar:

Lo que no debes hacer es dar caducidad larga al HTML: si cambias el contenido, los visitantes seguirían viendo la versión antigua.

Cómo especificar la caché en Apache con .htaccess

Es el método del artículo original, actualizado. Si tu hosting usa Apache (lo habitual en hosting compartido), haz una copia de seguridad del archivo .htaccess de la raíz de tu web, ábrelo con un editor de texto y añade este bloque al principio.

<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 month"
ExpiresByType application/javascript "access plus 1 month"
ExpiresByType text/javascript "access plus 1 month"
ExpiresByType text/html "access plus 0 seconds"
</IfModule>

Si el servidor tiene mod_headers, puedes añadir también Cache-Control, que es lo que lee la auditoría moderna:

<IfModule mod_headers.c>
<FilesMatch "\.(jpg|jpeg|png|webp|avif|svg|woff2)$">
Header set Cache-Control "public, max-age=31536000, immutable"
</FilesMatch>
<FilesMatch "\.(css|js)$">
Header set Cache-Control "public, max-age=2592000"
</FilesMatch>
</IfModule>

Pasos para aplicarlo

1. Descarga el archivo .htaccess por FTP o desde el administrador de archivos del hosting y guarda una copia.
2. Pega el bloque anterior al principio, antes de las reglas de WordPress si las hay.
3. Guarda y sube el archivo, sustituyendo al anterior.
4. Carga tu web y comprueba que no da error 500. Si lo da, restaura la copia: algún módulo no está activo.
5. Vuelve a pasar PageSpeed Insights y revisa la lista de recursos.

Cómo hacerlo en Nginx

Si tu servidor es Nginx, no existe .htaccess y la configuración se añade en el bloque del sitio:

location ~* \.(jpg|jpeg|png|webp|avif|svg|woff2)$ {
expires 1y;
add_header Cache-Control "public, immutable";
}
location ~* \.(css|js)$ {
expires 30d;
add_header Cache-Control "public";
}

Después recarga Nginx con la orden que use tu servidor. Si no tienes acceso, pídeselo a tu proveedor.

En WordPress: plugins y hosting

En un WordPress, lo más cómodo es no tocar el .htaccess a mano:

• Plugins de caché y rendimiento. WP Rocket, LiteSpeed Cache, W3 Total Cache o similares incluyen una opción para añadir las cabeceras de caché del navegador. Actívala y revisa que no choque con la configuración de tu hosting.
• Hosting gestionado. Muchos hostings ya aplican cabeceras de caché por defecto. Antes de tocar nada, comprueba con las herramientas del navegador si ya están.
• Una sola solución. Si usas varios plugins que escriben reglas de caché, puede haber conflictos o cabeceras duplicadas.

Para el conjunto de optimizaciones de velocidad y el SEO técnico, tengo el servicio de SEO técnico.

En Cloudflare y otros CDN

Si tu web pasa por Cloudflare, tienes dos capas: la caché de borde de Cloudflare y la caché del navegador del visitante. En el panel puedes fijar el «TTL de caché del navegador» y, si no lo respetas desde el servidor, Cloudflare lo sobrescribe. Para recursos con versión, usa un valor largo; para el resto, uno moderado. Después de cambiarlo, purga la caché del CDN para comprobar el resultado.

Cómo comprobar que funciona

• Con el navegador. Abre las herramientas para desarrolladores, pestaña Red, recarga y mira la cabecera Cache-Control de un archivo de imagen o CSS. Al recargar, debería aparecer «desde la caché de disco».
• Con la línea de órdenes. Ejecuta curl -I sobre la URL del archivo y comprueba las cabeceras de la respuesta.
• Con PageSpeed Insights. Repite el análisis y confirma que el recurso ha desaparecido de la lista o que su tiempo de caché ha subido.

Errores que conviene evitar

• Dar caducidad larga a archivos que cambian a menudo sin versionarlos: el visitante verá estilos antiguos.
• Poner caché larga al HTML.
• Duplicar cabeceras con el plugin y el servidor a la vez.
• Perder tiempo en recursos de terceros que no puedes controlar.
• Tocar el .htaccess sin copia de seguridad.

Mi recomendación

Aplícalo, porque es barato y mejora la experiencia de quien vuelve, pero no esperes un salto en la puntuación. Si quieres de verdad mejorar la velocidad de tu web, el orden que sigo es: imágenes optimizadas y en formatos modernos, menos JavaScript, servidor y caché de página bien configurados, y por último la caché del navegador. Si quieres verlo en conjunto, empieza por el SEO como conjunto y mira cuánto pesa la velocidad en tu sector.

Preguntas frecuentes

¿Qué significa «especificar la caché del navegador»?

Significa configurar el servidor para que envíe cabeceras que indiquen al navegador durante cuánto tiempo puede reutilizar archivos ya descargados, como imágenes, CSS o JavaScript. Así evitas descargas repetidas y mejoras la carga en visitas posteriores.

¿Dónde se configura la caché del navegador?

En el servidor web: en el archivo .htaccess si usas Apache, en la configuración del sitio si usas Nginx, o desde un plugin de caché o el panel de tu CDN. También puede hacerlo tu proveedor de hosting por defecto.

¿Cuánto tiempo debe durar la caché del navegador?

Para imágenes, fuentes y archivos con versión en la URL, entre seis meses y un año. Para CSS y JavaScript sin versión, entre una semana y un mes. El HTML no debe llevar caché larga porque cambia con tu contenido.

¿Mejora la caché del navegador mi posicionamiento?

Indirectamente. No es un factor de posicionamiento por sí misma, pero mejora la velocidad en visitas repetidas y reduce la carga del servidor. La experiencia de página que mide Google se basa en LCP, INP y CLS.

¿Cómo borro la caché del navegador después de cambiar mi web?

Si tus archivos llevan versión en la URL, el navegador los descarga de nuevo solo. Si no, el visitante tendrá que forzar la recarga, o debes cambiar el nombre del archivo. Los plugins de caché suelen gestionar esta versión por ti.