Caché del navegador y compresión Gzip y Brotli: cómo activarlas

Dos de los avisos más habituales de PageSpeed Insights son «Publica los recursos estáticos con una política de caché eficiente» y «Habilita la compresión de texto». Los dos se resuelven en el servidor, casi siempre con unas líneas en el .htaccess: la caché del navegador evita que el visitante vuelva a descargar lo que ya tiene, y la compresión Gzip o Brotli reduce el tamaño de lo que sí descarga. En esta guía te explicamos cómo activar ambas y cómo comprobar que funcionan.

Antes de tocar nada: haz una copia del .htaccess. Un error de sintaxis deja la web en error 500 hasta que se corrige. Y revisa si tu hosting o tu plugin de caché ya lo hacen: en servidores LiteSpeed, en Cloudflare y con plugins como WP Rocket o LiteSpeed Cache, buena parte de esto viene activado de serie.

Caché del navegador

La caché del navegador guarda en el dispositivo del visitante las imágenes, hojas de estilo, scripts y fuentes de tu web. En la siguiente página que visite, o cuando vuelva otro día, no los descarga de nuevo. La web carga antes y el servidor trabaja menos.

Cuánto tiempo guardar cada tipo de archivo

Tipo de contenido	Extensiones	Tiempo recomendado
Imágenes	.jpg, .png, .gif, .webp, .avif, .svg	1 año
Fuentes e iconos	.woff2, .woff, .ttf, .ico	1 año
Hojas de estilo y scripts	.css, .js	1 año si llevan versión en la URL; 1 semana a 1 mes si no
Páginas HTML	—	Sin caché de navegador, o muy corta

El matiz de CSS y JS es importante. WordPress añade la versión a sus archivos (estilo.css?ver=6.8), así que al actualizar cambia la URL y el navegador descarga la nueva. Si tu tema o tus plugins no lo hacen, una caché larga provocará que los visitantes vean estilos antiguos después de un cambio.

Configurarla con Cache-Control (recomendado)

La cabecera Cache-Control es la forma actual de indicar al navegador cuánto guardar cada recurso. En Apache, con el módulo mod_headers, añade al .htaccess:

# Caché del navegador
<IfModule mod_headers.c>
    <FilesMatch "\.(css|js)$">
        Header set Cache-Control "public, max-age=2592000"
    </FilesMatch>
    <FilesMatch "\.(jpe?g|png|gif|webp|avif|svg|ico|woff2?|ttf)$">
        Header set Cache-Control "public, max-age=31536000, immutable"
    </FilesMatch>
</IfModule>

max-age va en segundos: 2.592.000 son 30 días y 31.536.000, un año. immutable le dice al navegador que ese archivo no va a cambiar y que ni siquiera compruebe si hay una versión nueva.

Alternativa con mod_expires

Si tu servidor no tiene mod_headers, puedes usar mod_expires. Es un método más antiguo, pero sigue funcionando:

<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType text/css "access plus 1 month"
    ExpiresByType text/javascript "access plus 1 month"
    ExpiresByType application/javascript "access plus 1 month"
    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/avif "access plus 1 year"
    ExpiresByType image/svg+xml "access plus 1 year"
    ExpiresByType image/x-icon "access plus 1 year"
    ExpiresByType font/woff2 "access plus 1 year"
</IfModule>

No combines los dos métodos para los mismos archivos: si hay Cache-Control, el navegador ignora Expires.

¿Y la caché de las páginas HTML?

Con el HTML hay que ser prudente. Si el navegador guarda una página durante una semana, el visitante no verá los cambios que hagas (un precio, un horario, una oferta) hasta que caduque. Para acelerar las páginas es mejor la caché de servidor de un plugin como LiteSpeed Cache o WP Rocket, que se vacía sola cuando actualizas el contenido.

Compresión Gzip y Brotli

La compresión reduce el tamaño del HTML, CSS, JavaScript y SVG que envía el servidor, normalmente entre un 60 % y un 80 %. Las imágenes JPG, PNG o WebP ya van comprimidas y no se benefician.

• Brotli comprime más que Gzip y lo admiten todos los navegadores actuales con HTTPS. Es la opción preferente.
• Gzip es el respaldo universal. Conviene tener los dos: el servidor envía Brotli a quien lo acepta y Gzip al resto.

Activar Brotli

En Apache necesitas el módulo mod_brotli (disponible desde Apache 2.4.26). Si tu hosting lo tiene activo, añade:

# Compresión Brotli
<IfModule mod_brotli.c>
    AddOutputFilterByType BROTLI_COMPRESS text/html text/plain text/css text/xml text/javascript
    AddOutputFilterByType BROTLI_COMPRESS application/javascript application/json application/xml application/rss+xml application/xhtml+xml
    AddOutputFilterByType BROTLI_COMPRESS image/svg+xml image/x-icon font/ttf font/otf application/vnd.ms-fontobject
</IfModule>

Activar Gzip

En Apache, Gzip se activa con el módulo mod_deflate, que está presente en casi todos los hostings:

# Compresión Gzip
<IfModule mod_deflate.c>
    AddOutputFilterByType DEFLATE text/html text/plain text/css text/xml text/javascript
    AddOutputFilterByType DEFLATE application/javascript application/json application/xml application/rss+xml application/xhtml+xml
    AddOutputFilterByType DEFLATE image/svg+xml image/x-icon font/ttf font/otf application/vnd.ms-fontobject
</IfModule>

En servidores LiteSpeed la compresión se activa desde el panel del servidor y suele venir encendida; en Nginx se configura en el propio servidor, no en el .htaccess. Si usas Cloudflare, comprime automáticamente con Brotli lo que sirve a tus visitantes.

Cómo comprobar que funciona

• Desde el navegador: abre las herramientas de desarrollo (F12), pestaña Red, recarga la página y selecciona un archivo CSS o el documento HTML. En las cabeceras de respuesta verás content-encoding: br (Brotli) o gzip, y la cabecera cache-control con el tiempo que hayas configurado.
• Desde la terminal: curl -sI -H "Accept-Encoding: br,gzip" https://tuweb.com/ muestra las mismas cabeceras.
• Con PageSpeed Insights: los avisos de caché y compresión deberían desaparecer. Los recursos de terceros (Google Analytics, píxeles, vídeos incrustados) seguirán apareciendo, porque su caché la decide su propio servidor.

Esto es solo el principio del WPO

La caché del navegador y la compresión son ajustes rápidos, pero la velocidad de una web depende de mucho más: el hosting, las imágenes (te enseñamos a optimizar imágenes con Squoosh), el CSS y el JavaScript que se cargan, las fuentes y los scripts de terceros. Si quieres que tu web pase las Core Web Vitals, en Kebes lo hacemos por ti con nuestro servicio de WPO para WordPress o de WPO para PrestaShop. 👉 Cuéntanos tu caso.