Uno de los factores clave para acelerar la carga de una página web y mejorar la puntuación en herramientas como Google PageSpeed Insights es la correcta configuración de la caché del navegador. Al establecer una política de expiración para los recursos estáticos como imágenes, hojas de estilo o scripts, evitamos solicitudes innecesarias al servidor en visitas recurrentes, reduciendo así el tiempo de carga y el consumo de ancho de banda.
En esta guía te explicamos cómo especificar la caché del navegador de diferentes formas, además de incluir recomendaciones de duración de caché según el tipo de recurso.
Índice de contenidos
¿Qué es la caché del navegador?
La caché del navegador permite almacenar localmente recursos de una página web para que no tengan que descargarse de nuevo en cada visita. Esto se traduce en una carga más rápida y en una experiencia de usuario mucho más fluida.
Por qué es importante para el SEO y el rendimiento?
Google penaliza las páginas lentas. Una buena política de caché ayuda a reducir el Time to First Byte (TTFB), mejora el rendimiento en móviles y aumenta la puntuación en Core Web Vitals. También reduce el consumo de recursos del servidor y mejora la eficiencia en general.
Recomendaciones de expiración por tipo de archivo
A continuación te mostramos una tabla con los valores de duración de caché recomendados por Google según el tipo de contenido:
| Tipo de contenido | Extensiones | Tiempo recomendado |
|---|---|---|
| Hojas de estilo (CSS) | .css | 1 semana a 1 mes |
| JavaScript | .js, .json | 1 semana a 1 mes |
| Imágenes | .jpg, .jpeg, .png, .gif, .webp | 1 mes o más (hasta 1 año) |
| Iconos y fuentes | .ico, .svg, .woff2, .woff, .ttf, .eot | 1 año (inmutable) |
| HTML (documentos) | .html, página inicial | 1 hora a 1 día |
Especificar la caché de navegador mediante ExpiresByType
Aunque no es la opción más moderna (tiene prioridad inferior frente a Cache-Control), sigue siendo útil en muchos servidores Apache:
#especificar caché de navegador ExpiresActive On ExpiresDefault "access plus 10 days" ExpiresByType text/css "access plus 1 week" ExpiresByType text/plain "access plus 1 week" ExpiresByType image/gif "access plus 1 month" ExpiresByType image/png "access plus 1 month" ExpiresByType image/jpeg "access plus 1 month" ExpiresByType image/x-icon "access plus 3 months" ExpiresByType application/x-javascript "access plus 1 month" ExpiresByType application/javascript "access plus 1 week" ExpiresByType text/javascript "access plus 1 week" ExpiresByType application/x-icon "access plus 3 months" # FIN especificar caché de navegador
Especificar la caché de navegador mediante Cache-Control
Esta es la opción más recomendada actualmente. Permite un mayor control sobre el comportamiento del navegador.
<IfModule mod_headers.c>
<FilesMatch "\.(css|js|json)$">
Header set Cache-Control "max-age=2629800, public"
</FilesMatch>
<FilesMatch "\.(jpg|jpeg|png|gif|webp|ico|woff|woff2|ttf|eot|svg)$">
Header set Cache-Control "max-age=31557600, public, immutable"
</FilesMatch>
</IfModule>
Especificar la caché de página HTML en WordPress
También puedes establecer caché personalizada para la propia página HTML en WordPress con este filtro:
function custom_expire_headers($headers = array()) {
// Solo frontend y solo usuarios no logueados
if (is_admin() || wp_doing_ajax() || (function_exists('rest_is_request') && rest_is_request())) {
return $headers;
}
if (!function_exists('is_user_logged_in') || !is_user_logged_in()) {
$expires = get_custom_cache_expiration();
session_cache_limiter('');
$headers['Cache-Control'] = 'public, max-age=' . $expires;
$headers['Expires'] = gmdate('D, d M Y H:i:s', time() + $expires) . ' GMT';
}
return $headers;
}
add_filter('wp_headers', 'custom_expire_headers');
function get_custom_cache_expiration() {
// Portada o página de inicio: 1 semana
if (is_home() || is_front_page()) {
return 60 * 60 * 24 * 7;
}
// Páginas estáticas: 1 semana
if (is_page()) {
return 60 * 60 * 24 * 7;
}
// Entradas individuales: 1 semana
if (is_single()) {
return 60 * 60 * 24 * 7;
}
// Categorías, archivos, etc.: 1 semana
return 60 * 60 * 24 * 7;
}