Cuando un visitante abre tu web por primera vez, su navegador descarga todos los archivos necesarios para mostrar la página: HTML, hojas de estilo, scripts, imágenes y fuentes. En una visita posterior, el navegador no necesita descargar de nuevo todos esos archivos si están guardados en local. La caché del navegador es el mecanismo que lo hace posible, y es una de las formas más sencillas de que una web se sienta más rápida para los visitantes que vuelven.
La caché del navegador guarda copias de los archivos de la web en el dispositivo del visitante para que las cargas de página posteriores puedan saltarse la descarga de recursos que no han cambiado. El servidor indica al navegador cuánto tiempo debe conservar cada archivo y cuándo comprobar si hay versiones actualizadas. Entender cómo funciona la caché del navegador ayuda a ver por qué las visitas repetidas suelen sentirse notablemente más rápidas que la primera.
¿Cómo funciona la caché del navegador?
Cada archivo que envía tu servidor incluye instrucciones de caché en las cabeceras de la respuesta HTTP. Estas cabeceras indican al navegador si debe guardar el archivo, cuánto tiempo conservarlo y cuándo pedir una copia nueva.
En una primera visita, el navegador descarga todos los archivos necesarios de tu servidor y guarda en el almacenamiento local los que se pueden poner en caché. En las visitas repetidas, el navegador carga los archivos válidos guardados en el almacenamiento local en lugar de descargarlos otra vez.
¿Qué archivos se benefician más de la caché del navegador?
No todos los archivos deben ponerse en caché por igual. Los recursos estáticos que rara vez cambian son los candidatos ideales. El contenido dinámico que se actualiza con frecuencia necesita duraciones de caché más cortas o ninguna caché.
Duración de caché larga
- Hojas de estilo y archivos JavaScript que cambian solo cuando actualizas el diseño de la web
- Imágenes de logotipos, iconos y favicons
- Archivos de fuentes
- Imágenes de fondo y gráficos decorativos
Duración de caché corta o sin caché
- Páginas HTML con contenido que se actualiza con frecuencia
- Páginas con contenido personalizado o dinámico
- Respuestas de API y puntos de procesamiento de formularios
El principio general es sencillo: pon en caché con decisión lo que rara vez cambia y con cautela lo que cambia a menudo. El artículo sobre qué es la caché y por qué es importante cubre el panorama más amplio de la caché, incluida la del servidor y la de las redes de distribución de contenido.
¿Por qué importa la caché del navegador para la velocidad?
La caché del navegador reduce directamente la cantidad de datos que debe descargar un visitante y el número de peticiones al servidor necesarias en las visitas repetidas. Ambas mejoras se traducen en cargas de página más rápidas.
Tiempo de carga percibido más rápido
Cargar una hoja de estilo desde el almacenamiento local lleva milisegundos. Descargar el mismo archivo por una conexión de red lleva cientos de milisegundos o más, según la velocidad de la conexión. En las visitas repetidas, los recursos en caché aparecen casi al instante, y la página se siente bastante más rápida incluso antes de que cargue contenido nuevo.
Menos carga en el servidor
Cada archivo servido desde la caché del navegador es una petición menos que debe atender tu servidor. En las webs con visitantes que vuelven, esto mejora los tiempos de respuesta para todos los visitantes.
Mejoras de rendimiento en el móvil
Las conexiones móviles suelen ser más lentas que las de ordenador. La caché del navegador da un beneficio de velocidad aún mayor en el móvil porque elimina peticiones de red que serían lentas en conexiones más débiles. El artículo sobre por qué importa la velocidad de página en móvil explica por qué esta capa es especialmente crítica para los visitantes móviles.
Cómo gestiona WEMASY la caché del navegador
WEMASY configura automáticamente las cabeceras de caché adecuadas para todos los tipos de archivo. Los recursos estáticos, como hojas de estilo, scripts e imágenes, reciben duraciones de caché largas. Las páginas HTML reciben duraciones más cortas para que las actualizaciones de contenido aparezcan pronto tras publicar. Cuando haces cambios desde el editor, el sistema de WEMASY actualiza las versiones de caché para que los visitantes que vuelven reciban contenido nuevo sin tener que vaciar la caché a mano.
Mira qué incluye en el creador de webs de WEMASY o consulta los planes en la página de precios.
Preguntas frecuentes
¿Qué es la caché del navegador?
La caché del navegador guarda copias de los archivos de la web en el dispositivo del visitante para que las visitas repetidas carguen más rápido. El servidor envía instrucciones de caché con cada archivo, que indican al navegador cuánto tiempo conservarlo antes de comprobar si hay actualizaciones. Con el creador de webs de WEMASY puedes configurarlo directamente en tu web.
¿En qué se diferencia la caché del navegador de la caché del servidor?
La caché del navegador guarda archivos en el dispositivo del visitante para cargar más rápido en sus visitas repetidas. La caché del servidor guarda páginas ya construidas en el servidor de hosting para que el proceso de generación de la página no se ejecute en cada petición. Ambas reducen el tiempo de carga, pero actúan en puntos distintos de la cadena de entrega.
¿Por qué mi web es rápida en la segunda visita pero lenta en la primera?
La primera visita exige descargar todos los recursos de la página desde el servidor. La segunda carga muchos de esos recursos desde la caché del navegador, que es mucho más rápida. Es un comportamiento normal y muestra que la caché del navegador funciona. Optimizar la primera visita pasa por comprimir imágenes, mejorar el tiempo de respuesta del servidor y reducir los recursos que bloquean el renderizado.
¿Pueden los visitantes ver contenido antiguo por la caché del navegador?
Sí, si las duraciones de caché son demasiado largas y el servidor no actualiza las versiones de caché tras los cambios de contenido. Las plataformas bien gestionadas lo resuelven automáticamente actualizando los identificadores de caché cuando publicas cambios. Así los visitantes reciben archivos nuevos en su siguiente visita sin tener que vaciar la caché del navegador a mano.
¿Debo vaciar la caché de mi navegador para probar mi web?
Vaciar la caché del navegador es útil para comprobar si los cambios recientes se ven correctamente. Simula la experiencia de un visitante nuevo. Para navegar a diario por tu propia web no hace falta vaciarla. Usa una ventana privada o de incógnito para probar sin afectar a tus archivos habituales en caché.
¿Tengo que configurar yo mismo la caché del navegador?
En una plataforma web gestionada, las cabeceras de caché se configuran automáticamente según el tipo de archivo. En un hosting que gestionas tú, la configuración de la caché requiere ajustes del servidor o extensiones de caché. WEMASY se encarga de toda la configuración de la caché del navegador sin que tengas que hacer ningún ajuste técnico.