¿Qué es la caché del navegador?

Caché del navegador: definición y utilidad

En la primera visita a un sitio web, el navegador tiene que obtener cada archivo del servidor. En las siguientes páginas, sin embargo, el logotipo, las fuentes, la hoja de estilo y los scripts suelen no cambiar. La caché del navegador hace que esos archivos permanezcan en el dispositivo del visitante. Las páginas siguientes y las visitas posteriores se cargan así notablemente más rápido.

El servidor lo controla mediante cabeceras HTTP, sobre todo Cache-Control. Con ellas, el operador define qué archivos pueden almacenarse en caché y durante cuánto tiempo. El procedimiento está descrito en el estándar HTTP RFC 9111. Sin cabeceras adecuadas, decide el navegador por su cuenta, lo que a menudo lleva a almacenamientos innecesarios o desfasados.

Cómo funciona la caché

Con cada archivo, el servidor envía cabeceras que determinan su vida útil en la caché. Cuando esta expira, el navegador pregunta si el archivo ha cambiado. Si no ha cambiado, el servidor responde solo con el breve código de estado 304 (Not Modified) y ahorra así una nueva transferencia.

• Cache-Control: max-age – duración en segundos durante la cual un archivo se considera actual
• ETag y Last-Modified – identificadores con los que el navegador comprueba los cambios
• no-cache – consultar al servidor antes de cada uso
• no-store – no almacenar en absoluto, por ejemplo con datos sensibles
• immutable – el archivo no cambia nunca, no hace falta consultar

Ejemplo práctico: un conce­sio­nario cambia su diseño

Un concesionario de automóviles cambia los colores en la hoja de estilo de su sitio web. Los clientes habituales siguen viendo el diseño antiguo, porque su navegador aún tiene el archivo en la caché. La solución se llama cache busting: los archivos estáticos reciben un hash en el nombre, por ejemplo estilo.3f9a1c.css. Si cambia el contenido, cambia el nombre del archivo y el navegador carga de inmediato la nueva versión.

Estos archivos versionados pueden permanecer hasta un año en la caché, porque cada cambio recibe automáticamente un nombre nuevo. El propio documento HTML, en cambio, recibe una vida útil corta o no-cache, para que siempre remita a los nombres de archivo actuales en cuanto un archivo haya cambiado.

Ventajas, límites y errores habituales

Una buena caché acorta los tiempos de carga, descarga al servidor y reduce el consumo de datos. Es una de las medidas más eficaces de la optimización de PageSpeed, sin que cambien el diseño ni los contenidos. Eso sí, solo ayuda a los visitantes recurrentes; la primera visita no se beneficia de ella y sigue necesitando archivos ligeros.

• Duración larga sin nombres de archivo versionados: los cambios no llegan
• Ninguna cabecera de caché: cada archivo se vuelve a cargar cada vez
• Contenidos personalizados almacenados en caché pública por error
• Páginas HTML con duración larga: los visitantes ven contenidos desfasados

Imple­menta­ción

La caché se configura en el servidor web (Apache, Nginx), en la CDN o mediante un plugin. Nano Concepts configura las cabeceras de caché de acuerdo con la aplicación, establece nombres de archivo versionados en el proceso de compilación (build) y comprueba con herramientas de medición que todos los archivos se sirven correctamente y que los cambios llegan a los visitantes.